需求：需要将项目现有的组件库进行按需导入

思路：选择babel-plugin-component或者babel-plugin-import

找解决方案的过程中，参考了element-ui和vant这两个前端组件库按需导入的方法

element-ui采用babel-plugin-component插件来实现按需导入

element-ui目录大致如下（lib目录未截全部，只是部分）

 

 而vant采用babel-plugin-import来实现按需导入

vant库文件目录

 可以看到.babelrc文件的配置类似，都是指定了组件的名字，element-ui则是单独指定了样式文件的目录。

 babel-plugin-component是在babel-plugin-import的基础上封装的，因为现有组件库是基于element-ui封装的，所以这里采用element-ui官方推荐的插件babel-plugin-component。

官方npm地址：babel-plugin-component - npm

根据官方解释，这个插件就是做了一个js转换

 

可以看出，配置了styleLibraryName的话，在写组件库的时候，就需要将所有css的配置文件放在统一的文件夹下。没有配置的话，就需要放在与组件名同名的文件夹下，具体的看上图就可以了。

对于同一个项目引入多个组件库进行配置的情况，官方也给了babelrc的配置方法

 最后按照插件要求的目录结构，重新构建自己的组件库目录，如下

/tt-button/index.js

 

babelrc的配置

 

 好啦，至此一个可以用babel-plugin-component配置的组件库就完成啦！

---

但是！！！！！！！！！！！！！！！！！！！！！！我在写这篇笔记的时候发现，在vant官网看到，可以不用这个插件直接按需导入！！！！！！等于说，这份代码我不需要重构目录也可以直接按需导入，就是需要指定目录麻烦了一丢丢，不过如果需要构建那种比较大的组件库，用这种目录结构去做还是很nice的。Vant - 轻量、可靠的移动端组件库 (gitee.io)

还有就是，我这种构建其实是比较偷懒的方法，毕竟是在现有的组件库的基础上改的目录，看了下vue-cli的官网，一般正常情况，用vue-cli去创建和构建才比较正规一点，因为我对这些打包配置是在很陌生，这次时间又比较赶，所以就跳过了vue-cli，自己直接去修改自己的组件库目录了。

后面有时间我在研究一下vue-cli组件库打包配置。果然一入前端深似海。。。。。

构建目标 | Vue CLI (vuejs.org)

 因为目前的组件库包含了公司的一些特有的api，等我什么时候整理一个模板出来，上传到仓库再来附个链接