UI组件库从0到1开发心得

随着公司不断的成长，团队也在逐渐的扩大。为了提升开发效率，须要开发一套符合公司内部的一套移动端UI组件库。很是的幸运，这份一劳永逸的差事最终由我来负责。咱们公司技术栈是vue，因此UI组件库就基于vue来开发。

本文主要讲我在开发的过程当中的一些思路和解决问题的方式方法，至于代码你们能够自行参考（在本文的底部有连接）。组件的开发并很少，圈子里有不少优秀的库更加值得你去学习，接下来就说说个人思路和实践。

---

1、构思

制定目录结构

文件夹	说明
build	打包编译目录
config	参数配置目录
dist	文档打包目录
docs	说明文档目录
examples	组件案例目录
lib	组件打包目录
packages	组件目录
src	资源目录
test	单元测试目录

技术选型

资源管理工具我选用webpack 和 gulp, 选用gulp的缘由是组件样式和功能分开打包，gulp的task写起来既简单又方便。说到样式我选用的less，由于我工做中一直在使用less。单元测试选用的karma。还有一些其余辅助工具如babel、eslint、postcss等。详细内容能够看package.json文件。

2、开始搞

我的习惯，先把服务搞起来在说，安装了dev-server，配置了dev脚本，在build文件夹里编写webpack.dev.config，entry指向的是examples文件夹目录，以后开发组件都要在这里调试。examples里的目录结构与vue-cli脚手架相似，这里用到flexible.js，公司项目就用到这个，为了符合其余成员开发习惯，在案例调试中一样采用该方式。一样为了符合团队规范在postcss-pxtorem配置中我设置了rootValue，若是看代码的你这里要注意一下。在组件打包的时候我也作了一些处理，这个地方后面再讲。

服务搞起来以后，就开始写组件了。这部分精力主要放在packages文件夹内，简单说一下个人设计思路，每一个组件按照功能名称命名建立子文件夹，由index.js输出，这里方便以后按需加载的需求。在src内编写组件的功能代码。最后全部的组件在根目录的src内index.js文件输入并输出。这里我用了一个小技巧，为了防止组件开发不断增多，致使import写的愈来愈多，我这里使用了require.context进行代码优化。以后凡是大量并有规律的引入文件的地方，我都使用该方案进行优化修改。

组件开发中不可避免的会使用到icon，这里我使用了gulp的两个插件gulp-iconfont和gulp-iconfont-css将svg文件转换为字体样式引入使用。若是你未使用gulp，能够查找对应的插件库引入使用。

组件写好了以后，在examples里的main.js引入，效果以下：

3、文档与打包

功能都开发好了，接下来作一个能够看的文档介绍页。这部分在docs里开发，为了用户体验好一些，文档兼容了PC和移动端，采用的是media。不少其余UI组件文档中，移动端会有手机的样式模型的展现，我观察了几个，他们都是用的iframe里引入的github.io的服务。特地说明一下这里，我并无这么作，个人作法是把examples打包到dist目录，在启动docs服务进行开发的时候，手机模型引入的是事先打包好的examples静态文件。若是你想要得到最新的examples文件，须要先打包一遍examples,再启动docs服务，这里会有可能存在一个让人不舒服的地方，那就是example和docs同时开发，这里我没有设计成同时提供开两个服务，也没有把两个整合在一块儿。个人理由是若是你想写案例就把案例写完，若是你先写文档就不要去写其余的。

打包在build文件夹内，分别是webpack对js的混淆压缩和用gulp处理样式文件，上面说到为了更符合团队开发习惯，我在examples使用到flexible，由于在工做中咱们一样使用了它，我在样式打包的时候，每一个组件单独样式分别压缩两版，分别是以rem为单位和px为单位，rem是通过pxtorem处理的。更细节东西就很少介绍了，你们能够看个人代码。

module.exports = {
  plugins: {
    "postcss-pxtorem": {
      "rootValue": 75,
      "propList": ["*"]
    }
  }
}
复制代码

最后是单元测试，这部分还在学习中，就很少说了。

4、总结

到这里组件库的0到1的工做完成了，简单总结一下个人开发心得：

先想再写，会少走弯路。这一个月的工做，让我积累很多开发经验，对个人结构思惟能力提高了很多，总体来讲仍是不错的。最后附地址，欢迎回复一齐进步。

github

home page

祝工做顺利

邓文斌

2019年2月14日