这是我参与「第五届青训营」伴学笔记创作活动的第 16 天
背景
虽然业界已经有非常多知名组件库(antd/iview/material design等)，但实际工作中各团队通常也会应设计规范要求，自行开发属于团队内部的基础/业务组件库，对于高阶前端，开发一个属于自己的组件库已经是一种普遍但重要的基本技能。 但，实际开发中有许多需要考虑的细节:
- 使用何种语言开发组件库?
- ts/es6 + babel + flow
- less/sass/stylus/postcss/atomic-css
- 如何保证组件库质量(工程化)
- 单测、e2e 测试
- lint、 lint-staged、prettier、 style-lint 等
- 如何编写文档站
技术方案
核心技术栈
例子
- AntD : github.com/ant-design/…
- 语言: TypeScript
- 构建: webpack，分环境，专门给 css 做了许多特殊处理
- lint: eslint、 lint-deps、remark-lint、 stylelint
- 测试: jest、docker、@testing-library/react0
- 组件开发:
- table: rc-table
- calendar: moment、rc-picker
- date-picker: rc-picker、moment
- form: rc-field-form
- tree-select: rc-select
- 文档: bisheng
- 开发: gitpod
质量保障
组件库的质量保障从流程上来说，主要是code review和严格的UI验收、QA测试等流程。从技术层面来说可以收敛发包权限，以及在CI/CD中实现自动发包，杜绝研发过程中在非master分支上随意发包的危险操作。还有单元测试、快照测试、e2e测试等常用的技术手段。 期望大家能尽可能接入测试工具，包括
- jest、chai、enzyme、 karma
- @testing-library/react
- benchmark
规范
制定规范的目的在于保证质量、方便业务方使用和增加组件库的可扩展性。比如上文提到的对于样式的封装、常用mixin封装，强制使用颜色变量等。 还有设计统一的组件库API风格规范能降低业务方的使用成本。 拆解来看:
- 代码提交:
- husky、commitlint、 lint-stagedo
- 代码风格:
- eslint + prettier0
- stylelinto
- commit-lint0
- 文档风格: remark-lint
- 组件模板: plop.js
- 依赖管理: lint-deps
- 目录规范
文档
组件库一般有一个演示站点，主流的技术选型有stylegudist、storybook等，可以根据团队习惯选用。对于移动端组件库，可以通过webpack别名的方法重写它们的组件，以支持移动端预览，方便UI验收。对于国际化的组件，可以提供类似vconsole形式的devtools，可视化切换dark/light Mode、rtllrt等能力，提高开发和测试流程中的效率 常见的文档站技术选型:
- docz: 一个非常成熟的 md 文档站工具，同样支持嵌入 react 组件
- dumi: 还能支持组件调试
- changelog
- Github Pages
- vitepress
- storybook
- remark
- docsearch
核心需求
- 通用型组件: 比如Button,Icon等
- 布局型组件: 比如Grid,Layout布局等
- 导航型组件: 比如面包屑Breadcrumb,下拉菜单Dropdown, 菜单Menu等.
- 数据录入型组件: 比如form表单,Switch开关,Upload文件上传，日期选择，下拉选择等
- 数据展示型组件: 比如Avator头像,Table表格,List列表等
- 反馈型组件: 比如Progress进度条，Drawer抽屉,Modal对话框等
开发流程
- 首先，取个名字
- 工程化设置: 语言、代码风格、编译工具、测试环境、文档工具、CI/CD 等，全部设置好
- 组件设计 & 开发
- 编写你的第一个组件，这里建议从简单组件开始，例如 button、icon0
- 功能开发
- 编写测试用例
- 编写文档
- 测试通过后，发布上线
- 输出总结文档，至少包含
- 组件库的文档站0
- 组件设计
- 工程化选型说明文档
- 开发过程遇到的问题
