参考原文：

• babel6升级babel7
• vue2 babel-core 6.x 升级到 7.x

一、步骤

（1）卸载package.json里面的 babel6 有关依赖

• npm uninstall babel-core
• npm uninstall babel-preset-env
• npm uninstall babel-preset-stage-2
  • 删除stage，presets 废弃 stage-0、stage-1、stage-2、stage-3
• npm uninstall babel-polyfill
  • 删除项目中所有引入的import 'babel-polyfill'
  • webpack的配置项中entry中删除：'babel-polyfill'
• 删除所有babel-plugin-*，换成 @babel/plugin-*，其他的功能以插件的形式引入

（2） 安装babel7 相关包

• npm i -D babel-loader@8.1.0 (必要) ： babel7需要babel-loader8以上的版本，否则报错
• npm i -D @babel/core (必要)： 重新安装babel7的core
• npm i -D @babel/polyfill (必要)
• npm i -D @babel/runtime (必要)
• npm i -D @babel/plugin-transform-runtime (必要)
  用于将 ES6+ 中的类语法转换为向后兼容的代码，以便在旧版本的 JavaScript 环境中运行。
• npm i -D @babel/preset-env (必要)
• npm i -D @babel/plugin-transform-modules-commonjs(可选)
  将 ES2015（ES6）模块语法转换为 CommonJS 模块语法

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

（3） 调整.babelrc 配置

{
  "presets": [
    ["@babel/preset-env",
     {
      "modules": false,
      "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
      }
    }]
    // "stage-2"
  ],
  "plugins": [
    "transform-vue-jsx",
    "@babel/plugin-transform-runtime",//用于将 ES6+ 中的类语法转换为向后兼容的代码，以便在旧版本的 JavaScript 环境中运行。
    "@babel/plugin-syntax-dynamic-import",// 用于解析和转换动态导入（Dynamic Imports）的语法
    "@babel/plugin-transform-modules-commonjs",// 如果有些引用插件使用common方式，安装此插件
    "transform-es2015-modules-commonjs"//将 ES2015（ES6）模块语法转换为 CommonJS 模块语法
    // "@babel/plugin-proposal-class-properties",//用于提案阶段的类属性语法。它允许你在类中使用更简洁和灵活的方式声明和初始化实例属性和静态属性。
    // "@babel/plugin-transform-classes",
   ]
}

二、 常见问题

问题1

   Cannot find module 'babel-core'

• 解决: npm install babel-loader@8.0.4 -d
  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 + 即可

问题2

export ‘default‘ (imported as ‘xxx‘) was not found in ‘xxx‘

• 解决：引入 @babel/plugin-transform-modules-commonjs 并配置在 .babelrc 【参看 调整.babelrc 配置】

问题3

Cannot find module ‘@babel/preset-env‘

• 解决:
  • 注掉 .babelrc 预处理的 env
  • 如果webpack.base.conf.js 主入口有预处理 babel-polyfilwel，去掉即可

 entry: {
    app: "./src/main.js"
    // app: ["babel-polyfilwel", "./src/main.js"]
  },