因为element-plus
的更新,我们借用babel-plugin-import
动态导入组件时才报的错误:
原因
element-plus
的版本不一样babel-plugin-import
的默认导入形式未修改
(1)在"element-plus": "^1.0.2-beta.62"
之前的版本
所引用的库的每个组件名是以el-开头的
我们的babel-plugin-import
在动态引入时,是根据我们引入的组件的时候,我们组件的名称是什么,就根据名称去查找,比如ElButton
就会去找 => el-button
的文件
(2)在"element-plus": "^1.2.0-beta.5"
的版本时
我们查看库的每个组件的文件时,发送了改变,文件都去除了el-开头
的,这可能是因为最新的element-plus
设计自动导入组件修改的把。
这时我们就找到解决这个按需导入的问题了
解决
我们重新配置babel.config.js
文件,对babel-plugin-import
插件重新配置,我们只需要把导入的名字去除el-
即可
直接贴代码
module.exports = {
plugins: [
[
'import',
{
libraryName: 'element-plus',
customStyleName: (name) => {
return `element-plus/theme-chalk/${name}.css`
},
customName: (name) => {
return `element-plus/lib/components/${name.slice(3)}`
}
}
]
],
presets: ['@vue/cli-plugin-babel/preset']
}
对导入的el-button
进行裁剪然后返回最新的文件名button
。
最后
为什么不用官方推荐的自动导入呢?
因为我在编译时,看到编译多进去几百个文件,我暂时还不知道是什么导致的,所以暂时没有解决,就采用了现在这种方法做按需导入。