mobx中使用class语法或decorator修饰器时报错
之前课程中老师用的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修饰器时报错的更多相关文章
- mobx学习笔记03——mobx基础语法(decorator修饰器)
在声明阶段实现类与类成员注解的一种语法. function log(target){ const desc = Object.getOwnPropertyDescriotors(target.prot ...
- js基石之---es7的decorator修饰器
es7的decorator修饰器 装饰器(Decorator)是一种与类(class)相关的语法,用来注释或修改类和类方法. decorator就是给类添加或修改类的变量与方法的. 装饰器是一种函数, ...
- 19.Decorator修饰器
Decorator 修饰器 类的修饰 许多面向对象的语言都有修饰器(Decorator)函数,用来修改类的行为.目前,有一个提案将这项功能,引入了 ECMAScript. @testable clas ...
- ES6(Decorator(修饰器))
Decorator(修饰器) 1.基本概念 函数用来修改 类 的行为 1.Decorator 是一个函数 2.通过Decorator(修饰器)能修改 类 的行为(扩展 类 的功能)3.Decorato ...
- es6 Decorator修饰器
1.类的修饰: 修饰器(Decorator)函数,用来修改类的行为.修饰器是一个对类进行处理的函数.修饰器函数的第一个参数,就是所要修饰的目标类. @testable class MyTestable ...
- python decorator 修饰器
decorator 就是给函数加一层皮,好用! 1 from time import ctime 2 3 def deco(func): 4 def wrappedFunc(*args, **kwar ...
- ES6 Decorator 修饰器
目的: 修改类的一种方法,修饰器是一个函数 编译: 安装 babel-plugin-transform-decortators-legacy .babelrd plugins: [&quo ...
- 21.Decorator修饰器
1.类的修饰 2.方法的修饰 3.为什么修饰器不能用于函数? 4.core-decorators.js 5.使用修饰器实现自动发布事件 6.Mixin 7.Trait 8.Babel转码器的支持
- eclipse中对Hadoop项目进行mvn clean install时报错的处理
[ERROR] Failed to execute goal org.apache.maven.plugins:maven-clean-plugin:2.5:clean (default-clean) ...
随机推荐
- Repeater的使用
1.页面代码 如果要分页,那么页面开头必须写(<%@ Register Src="~/Controls/Page.ascx" TagName="Page" ...
- 二进制&八进制&十六进制之间的快速转换------ 心算&笔算方法总结
二进制数 0&1两种元素: 8进制数 0-7 八种元素: 十六进制数 0-9,a,b,c,d,e, ...
- paper 140:TLD视觉跟踪算法(超棒)
我是看了这样的一个视频:http://www.56.com/u83/v_NTk3Mzc1NTI.html 然后在准备针对TLD视觉跟踪算法来个小的总结. 以下博文转自:http://blog.csdn ...
- jquery实现简单的搜索功能
管理系统中需要实现导航列表的搜索功能,写了一个简单的小栗子: <!DOCTYPE html> <html lang="en"> <head> & ...
- subsequence 2
题目链接 题意:每次给出两个字母 和 只有这两个字母的原字符串的子序列,最后让你输出原字符串. 思路:先将字符转换为hash值,然后再转换成图,就是一个拓扑排序了,然后满足不了的情况有两种,一个是构造 ...
- [CSP-S模拟测试]:抛硬币(DP)
题目背景 小$A$和小$B$是一对好朋友,他们经常一起愉快的玩耍.最近小$B$沉迷于**师手游,天天刷本,根本无心搞学习.但是小$B$已经入坑了几个月,却一次都没有抽到$SSR$,让他非常怀疑人生.勤 ...
- JDK各个版本比较
JDK5 自动装箱与拆箱: 枚举 静态导入,如:import staticjava.lang.System.out 可变参数(Varargs) 内省(Introspector) 主要用于操作JavaB ...
- 浏览器地址栏运行HTML代码(谷歌)
在地址栏输入 data:text/html,<h1 style='color:red' >Hello, world!</h1> 浏览器会执行你的html代码,效果如下: 如果觉 ...
- WebX.0:Web1.0
ylbtech-WebX.0:Web1.0 web1.0时代是一个群雄并起,逐鹿网络的时代,虽然各个网站采用的手段和方法不同,但第一代互联网有诸多共同的特征,表现在技术创新主导模式.基于点击流量的盈利 ...
- PHP面试 MySQL创建高性能索引考点
MySQL索引 MySQL索引的基础和类型 索引的基础:索引类似于书籍的目录,要想找到一本书的某个特定篇章,需要查找书的目录,定位对应的页码 存储引擎使用类似的方式进行数据查询,先去索引当中找到对应的 ...