需求:
- 希望公司UI统一,能够内部项目统一样式
- 希望在这个基础上增加一点需求,比如一键换肤、基础属性可配置化等。
- 商业价值,像我们的竞争对手vant,有自己的开源库。希望开源,公司没有自己的开源组件库,希望能够将来作为开源项目。
组件库技术选型采用styled-component:
- 运行效率高,采用css-in-js方式
- 解耦,出于开发效率考虑,它是把每个组件单独当成一个自定义组件去开发,相互之间解耦
- 市场样式覆盖,大多采用deep这种形式去覆盖,而我们提供一种独特的形式覆盖,有两种方式,一种同样引入style-conponent包形式引入,然后我们提供的组件就可以当成一种独特的自定义组件去使用,里面有提供一些方法去进行组件之间的传参 2.我们有给每个元素提供特殊的class,让其自定义样式,也提供了classes这种属性,让其能够自定义class,或者className等解决传统方案。
- 国外开源UI库materialUI,采用的就是component形式,有稳定的开源支持。
组件库架构设计: 包括几个部分:
源码部分
- 组件, ts导出
- 表单组件、button、tag、cell等
example
- 开发ui还原
- 开发人员自测
栈点(文档)
- 文档预览部分,采用md转换成html,1.能够同步更新属性 2.能够节省开发效率
- example iframe嵌套
单元测试 (jest)
- 组件是否存在
- 属性是否存在
发布、打包脚本 发布包含几个部分
- 检测当前是否有未提交文件
- 自动选择添加版本
- 打包、生成log、version等
- 打tag
- 发布npm包