marrs-ui

50 阅读2分钟

需求:

  • 希望公司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包