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

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

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

一、构思

制定目录结构

技术选型

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

二、开始搞

个人习惯，先把服务搞起来在说，安装了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引入，效果如下：

三、文档与打包

功能都开发好了，接下来做一个可以看的文档介绍页。这部分在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": ["*"]
    }
  }
}
复制代码

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

四、总结

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

先想再写，会少走弯路。这一个月的工作，让我积累不少开发经验，对我的结构思维能力提升了不少，整体来说还是不错的。最后附地址，欢迎回复一齐进步。

github

home page

祝工作顺利

邓文斌

2019年2月14日