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

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