vue2启动项目npm run dev报错 Error: Cannot find module ‘babel-preset-es2015‘ 修改以及问题原因

报错内容如下图：

说找不到模块 babel-preset-es2015。

在报错之前，我正在修改代码，使用 ElementUI 的按需引入方式，修改了 babel.config.js 。

注意：@vue/cli 脚手架4版本已经使用了 babel7 ，所以项目中没有 .babelrc 文件，取而代之的是 babel.config.js 。

我的文件配置如下：

module.exports = {
    
    
  presets: [
    "@vue/cli-plugin-babel/preset",
    ["es2015", {
    
     "modules": false }] // ElementUI按需引入配置
  ],
  "plugins": [
    // ElementUI 按需引入配置项
    [
      "component",
      {
    
    
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

ElementUI 官网给出的步骤：

按需引入需要借助插件 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。

首先，安装 babel-plugin-component：

npm install babel-plugin-component -D

然后配置 .babelrc：

{
  "presets": [["es2015", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

当前问题解决方式：

将 "es2015" 修改为 "@babel/preset-env" 。

为什么要这样修改呢？@babel/preset-env 又是什么插件呢？

@babel/preset-env 可以根据指定的执行环境提供语法转换，就是可以将更新的 js 语法转换为浏览器当前支持的语法。

官方释义：

它能让你使用最新的 JavaScript 语法而无需操心对目标环境所支持的语法设置相应的语法转换插件（以及可选的 polyfills）。

Babel 官方文档地址 <——点它

官方文档 》指南 》升级到 Babel 7 目录下指出：

也就是说，Babel 7 中已经弃用以上预设值了，而应该直接使 @babel/preset-env 来替代。

上面就是报错的原因就是因为 Babel 7 中弃用了 babel-preset-es2015。

---

参考文章：@babel/preset-env