Vue 按需引入 Element UI 报错 Cannot find module ‘babel-preset-es2015‘

Vue 项目时用到 Element UI 按需引入，按照官方指引：

• 安装 babel-plugin-component 插件包

yarn add babel-plugin-component -D
# or use npm
npm install babel-plugin-component -D

• 并修改 babel 配置文件

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

启动项目时报错：Cannot find module 'babel-preset-es2015'
问题原因就是缺少了 babel 配置文件中 es2015 对应的资源包 babel-preset-es2015

解决方案

1. babel 7

如果使用的是 babel7 的版本，则需要安装 @babel/preset-env

yarn add @babel/preset-env -D
# or use npm
npm install @babel/preset-env -D

并更新 babel 配置

{
  presets: [['@babel/preset-env', { modules: false }]]
}

2. babel<7

如果使用的是 babel < 7，推荐安装 babel-preset-env

yarn add babel-preset-env -D
# or use npm
npm install babel-preset-env -D

并更新 babel 配置

{
  presets: [['env', { modules: false }]]
}

注：为什么缺少的包是 babel-preset-es2015 却要安装其他的包？

babel-preset-es2015, babel-preset-es2016, babel-preset-es2017, babel-preset-latest 等等 是 babel 按年份命名的预设，后来发布了 babel-preset-env 替代了这些包，再后来 babel 7 中将包移动到了主仓库中 @babel/preset-env，所以这些包的作用都是相似的。