组件库

软件组件 封装好的可复用的程序“零部件”

软件开发 => 搭积木

前端UI组件 “按钮”、“输入框”、“下拉选择"都是组件 组件和组件组合就变成了一个更复杂的组件

常见的ui组件库： ElemetUI、vuetify、Ant Design、Bottstrap、Material UI、Vant UI、Framework7、arco.design

做组件库的意义： 使整个项目UI更统一，对开发者友好，对用户也友好

搭建业务组件库

架构设计

单包架构

一个代码仓库里所有组件打包成一个整体，发布出去一个npm包

多包架构

一个代码仓库包含多个组件代码，会发布出去多个npm包 单包架构 所有的组件看成一个整体，一起打包发布。

优点

公共代码易复用 展示更聚合，便于维护 引入一个包即可使用全部组件

缺点

修改一个组件需要更新整个库 需要考虑按需加载

多包架构

所有的组件在一个仓库，组件之间单独发包

优点

单独发包，升级灵活。 在同一仓库下，便于代码管理 使用者无需考虑按需加载

缺点

组件间相互依赖时，需要通过npm 包引入 组合使用时需要安装每一个用到的npm包

打包速度

实时预览，如 storybook

样式方案

Less／Sass，CSS in JS，CSS等 样式方案 组件库换肤，样式定制等能力技术方案

产物构建

构建工具 webpack，rollup，vite，gulp等 产物格式：cjs，umd，es

质量保障

测试工具：jest，karma，mocha，enzyme， react-testing-library 等 测试类型：单元测试，快照测试，截屏测试，e2e 测试等

文档部署

Demo 展示：Storybook，umijs等 静态内容：markdown

组件API提取

手写 自动提取：ts-docuemnt 等

版本日志生成

手写 自动提取：从PR提交记录自动提取＠arco-design／changelog

什么是好的组件？

高内聚，低耦合：高内聚是指一个软件模块是由相关性很强的代码组成，只负责一项任务，也就是常说的单一责任原则。而低耦合是指一个完整的系统，模块与模块之间，尽可能的使其独立存在，减少不同功能或模块之间紧密关系。高内聚和低耦合可以保证服务的独立性以及系统的灵活度 通用性，易拓展

组件开发-组件组织的好与坏

1.语义化命名：组件的命名应当具有语义，并且避免与基础组件冲突，同一团队/仓库下的业务组件，也可采用相同的命名前缀 2.包名和组件名一致：NPM包名应当尽量与组件名保持一致，包含明确的使用场景信息 3.单独维护类型组件：推荐将需要对外导出的TS类型维护在单独的interface.ts中，并将其在index.ts中导出

组件开发-组件设计的好与坏

1.接口定义：在为组件定义接口类型时，应继承原生DOM(或基础组件)属性，避免属性遗漏或重复声明 2.类名前缀统一：组件使用特殊且统一的类名前缀，尽量降低与用户类名冲突的可能性 3.避免行内样式和css modules： 确保外部可通过类名进行样式覆盖 4.避免在js中直接引入样式文件： 应尽量保证逻辑与样式的分离，确保用户可以分别引入js和css文件，避免由于构建环境的不同导致的用户编译失败的问题 5.注意组件样式的按需加载： 在基于基础组件库如Arco进行业务组件的逻辑封装时，应注意按需引入所依赖的Arco基础组件的样式文件