记录ElementPlus用babel-plugin-import动态导入报错问题

因为element-plus的更新，我们借用babel-plugin-import动态导入组件时才报的错误:

原因

1. element-plus的版本不一样
2. 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。

最后

为什么不用官方推荐的自动导入呢？

因为我在编译时，看到编译多进去几百个文件，我暂时还不知道是什么导致的，所以暂时没有解决，就采用了现在这种方法做按需导入。