阅读 172

前端实践Babel6升级Babel7

  • 项目背景

vue + webpack + babel6前端项目,使用element-ui

  • 升级步骤

最简易升级

  1. npx babel-upgrade --wirte(前提是安装过npx工具)
  2. npm install
  • 升级结果

命令将自动修改package.json中所有babel6的依赖项卸载,添加好babel7的依赖项,并自动更改.babelrc(或者是babel.config.js)中的配置项,

  • 升级注意事项

  1. 原有的babel插件(babel-plugin-xxxx)不会被卸载,但会额外安装一批插件
  2. 可以观察到babel的core,preset-env,polyfill命名规范变化了
  3. 由于第一点,需对照前后使用依赖的差异,有可能会有插件的版本冲突,例如项目背景中提到的项目,在配置中使用了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,而后续又依赖冲突导致的
  4. 项目启动后,有多处报了"export 'default' (import form 'xxxx') not found in XXXX",是由于项目中使用了CommonJS(require/module.export)与ES6 Module规范(import/export)混用的方式,因此需要额外安装一个@babel/plugin-transform-modules-commonjs插件
文章分类
前端
文章标签