组件库的价值不只是复用代码,而是统一交互与视觉规范:设计、前端、业务用同一套语言协作,产品质量与效率同步提升。
但组件库也是长期投入:文档、测试、版本管理、升级兼容,都要持续维护。
判断时机:3 个以上项目出现重复组件时,就值得启动组件库建设,越早越省。
一个可持续的组件库包含这些部分。
令牌、组件规范、设计稿统一。
Monorepo、构建、按需打包。
API 文档、示例、可视化演示。
单元测试、快照、视觉回归。
版本管理、CHANGELOG、发布。
提交流程、评审、RFC 决策。
分阶段推进,避免一步到位的坑。
明确组件库范围与原则:收哪些、不收哪些,避免变成垃圾桶。
用 Monorepo 管理,建立构建、Lint、命名与提交规范。
从高频组件开始(Button/Input/Modal),配套文档与测试。
建立版本发布流程与升级机制,持续迭代与维护。
关键决策参考。
| 决策点 | 推荐方案 | 说明 |
|---|---|---|
| 代码组织 | Monorepo(pnpm) | 多包管理与依赖统一 |
| 构建 | Vite/Rollup | 按需打包与类型产物 |
| 样式 | CSS 变量 + 令牌 | 主题化基础 |
| 文档 | Storybook / 自建文档站 | 组件演示与文档 |
| 发布 | changesets + CI | 版本与 CHANGELOG 自动化 |
先定治理机制:提交流程、评审人、RFC 决策,让维护成为团队职责而非个人负担。
不建议从零写基础组件。用成熟库做基底,封装业务组件沉淀,性价比最高。
分层设计:基础组件不依赖业务,业务组件下沉到业务层。保持库的通用性。
严格语义化版本 + breaking change 文档 + 升级工具 + 测试回归,缺一不可。