-
项目背景
vue + webpack + babel6前端项目，使用element-ui
-
升级步骤
最简易升级
- npx babel-upgrade --wirte（前提是安装过npx工具）
- npm install
-
升级结果
命令将自动修改package.json中所有babel6的依赖项卸载，添加好babel7的依赖项，并自动更改.babelrc(或者是babel.config.js)中的配置项，
-
升级注意事项
- 原有的babel插件（babel-plugin-xxxx）不会被卸载，但会额外安装一批插件
- 可以观察到babel的core，preset-env，polyfill命名规范变化了
- 由于第一点，需对照前后使用依赖的差异，有可能会有插件的版本冲突，例如项目背景中提到的项目，在配置中使用了babel-plugin-transform-vue-jsx，升级后，自动安装了@vue/babel-plugin-transform-vue-jsx，导致冲突，项目启动报错找不见Cannot find module 'babel-plugin-syntax-jsx'，其实就是由于babel-plugin-transform-vue-jsx引用了babel-plugin-syntax-jsx，而后续又依赖冲突导致的
- 项目启动后，有多处报了"export 'default' (import form 'xxxx') not found in XXXX",是由于项目中使用了CommonJS(require/module.export)与ES6 Module规范（import/export）混用的方式，因此需要额外安装一个@babel/plugin-transform-modules-commonjs插件
