之前课程中老师用的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. Java中volatile如何保证long和double的原子性操作

    原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11426473.html 关键字volatile的主要作用是使变量在多个线程间可见,但无法保证原子性,对 ...

  2. Ubuntu备份与恢复

    在使用Ubuntu之前,相信很多人都有过使用Windows系统的经历.如果你备份过Windows系统,那么你一定记忆犹新:首先需要找到一个备份工具(通常都是私有软件),然后重启电脑进入备份工具提供的软 ...

  3. shell变量,字符串,数组

    一.shell变量定义: 命名只能使用英文字母,数字和下划线,首个字符不能以数字开头: 中间不能有空格,可以使用下划线: 不能使用标点符号: 不能使用bash里的关键字. 变量使用: 使用一个定义过的 ...

  4. hdu 6092 Rikka with Subset (集合计数,01背包)

    Problem Description As we know, Rikka is poor at math. Yuta is worrying about this situation, so he ...

  5. leetcode骚题目列表

    114,二叉树原地前序遍历转链表 令人不舒服的空间限制 4,O(logn)寻找两个数组的中位数 感觉诡异又很其妙的二分 279,判断一个数可拆成最少几个平方数的和 有O(n)解法,如果把sqrt视为O ...

  6. 用iptables实现代理上网

    环境:内网:eth1:192.168.2.0/24外网:eth0:10.17.0.111用iptables实现NATSNAT:改变数据包的源地址.防火墙会使用外部地址,替换数据包的本地网络地址.这样使 ...

  7. Java中创建泛型数组

    Java中创建泛型数组 使用泛型时,我想很多人肯定尝试过如下的代码,去创建一个泛型数组 T[] array = new T[]; 当我们写出这样的代码时编译器会报Cannot create a gen ...

  8. python学习笔记:操作Excle

    import xlwt #写excel import xlrd #读excel import xlutils #修改excel 一.写操作 1.写Excel import xlwt #写excel,导 ...

  9. is, ==, id, encode,

    1. is 和 == 的区别 1. id(): 通过id()我们可以查看到⼀个变量表⽰的值在内存中的地址. id(变量)  返回给你这个变量的内存地址 is 比较是的内存地址  == 比较的是值 s ...

  10. Python最快的方式来读取大文本文件(几GB)

    我有一个大文本文件(约7 GB).我正在寻找是否存在阅读大文本文件的最快方法.我一直在阅读有关使用多种方法作为读取chunk-by-chunk以加快进程的过程. 例如,effbot建议 # File: ...