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

19,560 阅读4分钟

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

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


一、构思

制定目录结构

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

技术选型

资源管理工具我选用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-iconfontgulp-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日