• Project background

Vue + Webpack + Babel6 front-end project, using Element-UI

  • Upgrade steps

Easiest upgrade

  1. NPX babel-upgrade –wirte (if you have installed the NPX tool)
  2. npm install

  • The upgrade

The command will automatically modify all babel6 dependencies in package.json, add babel7 dependencies, and automatically change configuration items in. Babelrc (or babel.config.js).

  • Upgrade Precautions

  1. The existing Babel plugin (babel-plugin-xxxx) will not be uninstalled, but additional plugins will be installed
  2. Notice that Babel’s core, preset-env, and polyfill naming conventions have changed
  3. Due to the first point, it is necessary to compare the difference of use dependency before and after, and there may be plug-in version conflict. For example, the project mentioned in the background of the project uses babel-plugin-transform-vue-jsx in the configuration. After the upgrade, @vue/babel-plugin-transform-vue-jsx: Cannot find module ‘babel-plugin-syntax-jsx’, Babel-plugin-transform-vue-jsx refers to babel-plugin-syntax-jsx, and the subsequent dependency conflicts result
  4. After the project started, Export ‘default’ (import form ‘XXXX ‘) not found in XXXX”, because CommonJS(require/module.export) is used in ES6 Module specification (import/export) in a mixed way, so you need to install an additional @babel/plugin-transform-modules-commonjs plug-in