vue2 babel-core 6.x 升级到 7.x

一、为什么要升级

因为要使用新特性的时候发现 **?.**可选链操作符, **??**空值合并操作符, **??=**空值合并操作符等

二、如何升级

1、 package.json 中 babel 7 以下的全部删除

2、删除 package.json文件

3、删除node_modules文件夹

执行命令:

npm install -D '@babel/core' '@babel/cli' '@babel/preset-env' '@babel/plugin-transform-runtime' '@babel/plugin-proposal-class-properties' '@babel/plugin-transform-classes' browserify
npm install -S  @babel/runtime
npm install

升级.babelrc配置文件为:

{
  "presets": ["@babel/preset-env"],
  "plugins": [
    "@babel/plugin-transform-runtime",
    "@babel/plugin-proposal-class-properties",
    "@babel/plugin-transform-classes"
  ]
}

到此babel已经从6.x 升级到 7.x了

三、可能会报错

Cannot find module 'babel-core'

别急

babel-loader和babel-core版本不对应所产生的，

babel-loader 8.x对应babel-core 7.x
babel-loader 7.x对应babel-core 6.x

将package.json 中 babel-loader版本指定为 8.x + 即可

我使用的是

 "babel-loader": "^8.0.4"

卸载老版本babel-loader, 重新 npm install

再次执行

npm run dev

 DONE  Compiled successfully in 15072ms                                                                                                             

 I  Your application is running here: http://localhost:8080

亲测有效!!!