如何基于 Ant Design 快速打造自己/公司的 UI 组件库

948 阅读2分钟

首发于 语雀文档@blueju

前言

领导说:“我们要有梦想,要以创业的心态去工作。我想要个组件库,你看明天能给到吗?不用太好,和 ant-deisgn 一样,换个名称就行。”

前任:。。。。。

一个星期后,领导不满意,前任走了,留下了个组件库 1.0。

我:。。。。。

正文

公司

简单介绍

是个 menorepo 结构,基础组件库/高级组件库/业务组件库都在一个仓库下,就我本人而言,我是不太喜欢的,这样更新会很频繁,而且业务组件库是一个大东西,就目前而言,里面有大有小,比如 sheet 云表格、支持字典项的 Select 选择器、更多按钮、决策树、决策矩阵、策略树、规则集等组件。

前任是根据 ahooks 工程进行改写的,很多地方都还没完善,刚接手那会,只有基础组件库能跑,高级组件库和业务组件库跑不起来,也打不出包,改的方式也直接暴力,复写 class(其实后续反而更累,比如改个边框圆角弧度,要改多处,目前仍是如此,还好不是我亲自维护)

不过好处就是,业务组件库对基础组件库进行二次封装,因为 menorepo 结构,不要打包直接引入就可以直接实时运行看效果。

个人

我对这个还是比较感兴趣的

我则是将组件库拆了开来,各为一个仓库,目前有两个仓库

封装和文档这块,我使用的是 dumi(很好用),修改样式使用的变量配置方式,过程还是学到了一些的,比如命名规范(参考了 ant-deisgn),typescript,antd 源码等,但目前有个问题,我使用了 css 模块化,在担心这会不会影响主题切换这个后续功能。

具体就先不详细说了,后续争取每写一个组件就写一篇文档来讲吧。

结语

其实对于一些公司而言,他们没有精力去完整从 0 到 1 做出一个完善的组件库,但是他们又希望有一些自己的小特色,确实

就目前而言,设计稿越来越丰富,有一些确实招架不住

当然有精力的话,还是推荐公司/部门自己从 0 到 1 搞一套完全属于自己的组件库吧。

最后,blued 这个组件库还会继续基于我在工作中遇到的需求,根据 UI 设计稿进行迭代,直到我离职。。。

求 Star ⭐⭐⭐

github.com/blueju/blue…