之前课程中老师用的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
在以后项目中遇到问题时需要解决,在学习阶段暂时忽略一阵子。。。