之前课程中老师用的babel的版本比较低,我在学习时安装的babel版本较高,因此每当使用class语法或decorator修饰器时都会出现一些报错的情况!

ERROR in ./src/index.js 4:1

Module parse failed: Unexpected character '@' (4:1)

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

| class Store {

> @observable array = [];

| @observable obj = {};

| @observable map = new Map();

在网上搜索了各种资料后,尝试修正了package.json和webpack.config.js文件的写法

//package.json
{
"name": "mobx-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack -w",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.7.7",
"@babel/plugin-proposal-class-properties": "^7.7.4",
"@babel/plugin-proposal-decorators": "^7.7.4",
"@babel/preset-env": "^7.7.7",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"webpack": "^4.41.3",
"webpack-cli": "^3.3.10"
},
"dependencies": {
"mobx": "^5.15.1"
}
} 
//webpack.config.js
const path = require('path'); module.exports = {
mode:'development',
entry:path.resolve(__dirname,'src/index.js'),
output:{
path:path.resolve(__dirname,'dist'),
filename:'main.js'
},
module: {
rules:[{
test: /\.js$/,
exclude: /node_modules/,
use:{
loader:'babel-loader',
options: {
"presets": [
[
"@babel/preset-env",
{"useBuiltIns":"entry"}
]
],
"plugins": [
["@babel/plugin-proposal-decorators", {"legacy": true}],
["@babel/plugin-proposal-class-properties", {"loose": true}]
]
}
}
}]
},
devtool:'inline-source-map'
} 

不再提示上面的错误,报了另一个错误:

ERROR in ./src/index.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):

Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of @babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "@babel/core" or "babel-core" to see what is calling Babel.

按照错误提示信息,重新安装了低版本babel-core,在命令行中执行:

npm install babel-core@^7.0.0-bridge.0 @babel/core -D

安装好后,重新执行npm start启动项目,就不再报错了~

但是仍然有一个警告⚠️:

WARNING: We noticed you're using the `useBuiltIns` option without declaring a core-js version. Currently, we assume version 2.x when no version is passed. Since this default version will likely change in future versions of Babel, we recommend explicitly setting the core-js version you are using via the `corejs` option.

You should also be sure that the version you pass to the `corejs` option matches the version specified in your `package.json`'s `dependencies` section. If it doesn't, you need to run one of the following commands:

npm install --save core-js@2    npm install --save core-js@3

yarn add core-js@2              yarn add core-js@3

在以后项目中遇到问题时需要解决,在学习阶段暂时忽略一阵子。。。

mobx中使用class语法或decorator修饰器时报错的更多相关文章

  1. mobx学习笔记03——mobx基础语法(decorator修饰器)

    在声明阶段实现类与类成员注解的一种语法. function log(target){ const desc = Object.getOwnPropertyDescriotors(target.prot ...

  2. js基石之---es7的decorator修饰器

    es7的decorator修饰器 装饰器(Decorator)是一种与类(class)相关的语法,用来注释或修改类和类方法. decorator就是给类添加或修改类的变量与方法的. 装饰器是一种函数, ...

  3. 19.Decorator修饰器

    Decorator 修饰器 类的修饰 许多面向对象的语言都有修饰器(Decorator)函数,用来修改类的行为.目前,有一个提案将这项功能,引入了 ECMAScript. @testable clas ...

  4. ES6(Decorator(修饰器))

    Decorator(修饰器) 1.基本概念 函数用来修改 类 的行为 1.Decorator 是一个函数 2.通过Decorator(修饰器)能修改 类 的行为(扩展 类 的功能)3.Decorato ...

  5. es6 Decorator修饰器

    1.类的修饰: 修饰器(Decorator)函数,用来修改类的行为.修饰器是一个对类进行处理的函数.修饰器函数的第一个参数,就是所要修饰的目标类. @testable class MyTestable ...

  6. python decorator 修饰器

    decorator 就是给函数加一层皮,好用! 1 from time import ctime 2 3 def deco(func): 4 def wrappedFunc(*args, **kwar ...

  7. ES6 Decorator 修饰器

    目的:  修改类的一种方法,修饰器是一个函数 编译: 安装 babel-plugin-transform-decortators-legacy .babelrd      plugins: [&quo ...

  8. 21.Decorator修饰器

    1.类的修饰 2.方法的修饰 3.为什么修饰器不能用于函数? 4.core-decorators.js 5.使用修饰器实现自动发布事件 6.Mixin 7.Trait 8.Babel转码器的支持

  9. eclipse中对Hadoop项目进行mvn clean install时报错的处理

    [ERROR] Failed to execute goal org.apache.maven.plugins:maven-clean-plugin:2.5:clean (default-clean) ...

随机推荐

  1. centos 6.5 安装 zookeeper

    从zookeeper官方网站下载安装包:zookeeper-3.4.9.tar.gz,解压安装 tar xvf zookeeper-3.4.9.tar.gz -C /usr/java cd /usr/ ...

  2. 洛谷P1087--FBI树(二叉树)

    题目描述 我们可以把由“0”和“1”组成的字符串分为三类:全“0”串称为B串,全“1”串称为I串,既含“0”又含“1”的串则称为F串. FBI树是一种二叉树,它的结点类型也包括F结点,B结点和I结点三 ...

  3. delphi 随意将函数执行权限提高到Ring0源代码

    //随意将函数执行权限提高到Ring0源代码//Windows 2K以上的操作系统,//用途: 提供超级简单使用的APIrocessRing0(),//可将delphi中的任意函数由原來的Ring3权 ...

  4. JDK换版本问题解决

    在jdk安装第一个版本的时候,就默认在path配置值中加入C:\ProgramData\Oracle\Java\javapath; 所以我们需要把Path最前面的C:\ProgramData\Orac ...

  5. struts2 值栈分析

    目录 一.值栈分为两个逻辑部分 二.Struts2 利用 s:property 标签和 OGNL表达式来读取值栈中的属性值 1.值栈中的属性值: 2.读取对象栈中对象的属性: 3.默认情况下,Acti ...

  6. 通过泛型,将string转换为指定类型

    Generic TryParse You should use the TypeDescriptor class: public static T Convert<T>(this stri ...

  7. python笔试做错的题目

    a = [1,2,3] b = a print(id(a),id(b),a == b) print(a,b) b = b + [1,2,3] print(a,b) print(id(a),id(b), ...

  8. tp5 thinkphp 使用phpqrcode生成带Logo的二维码

    1 下载生成二维码类库 composer require aferrandini/phpqrcode 2 点击按钮下载 //二维码下载 public function down_qrcode() { ...

  9. Flask-Restless初步了解

    Flask-Restless是Flask框架的一个扩展库 1. 功能介绍      通过使用SQLAlchemy或Flask-SQLAlchemy框架定义的数据库模型,提供一个简单的ReSTful A ...

  10. 01java基础笔记

    计算机组成:运算器,控制器,存储器,输入输出设备(外部设备I/O设备) 机器语言:机器语言,汇编语言,高级语言 人机交互:命令行方式,图形化界面交互方式 JAVA语言平台分为:J2SE,J2ME,J2 ...