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,所以这些包的作用都是相似的。