创建一个组件库是一件非常复杂的事情。首先在创建之前就要考虑的事情有:

创建组件库前需要考虑的因素

需要考虑如下一系列因素：

1、组件库提供怎样的方式？

  1.   选择一次性引入所有的组件包，还是使用某一个组件再引入引入某一个组件既按需引入

2、组件如何发布？

组织内部包是否有响应的发布方式？是否之间使用 Git 服务器做为包中心？

3、复杂的组件

是否直接使用外部组件，而非自己开发？

4、对于复杂的组件

是否拆分成为一个或多个组件，以降低维护成本？

5、组件的反馈渠道。

如何提供对其他项目的支持？遇到问题是如何处理，比如 GitHub 的管理方式

6、组件的发布策略

是定期发布版本，还是以语义化版本的方式发布。

组件库的创建步骤

具体的创建步骤如下：

1、创建脚手架

它可以从框架自带的工具生成，或是从其他组件库修改

2、第一个组件

创建一个基本的组件，引入项目上，进行脚手架测试。

3、进行发布测试

选择合适的发布策略，发布组件库，提供快捷的使用方式。

4、创建组件的文档中心

可以通过与 JSDoc 类似的方式从代码中生成文档，也可以用更专业的编写方式。

5、提供组件示例

创建一个专门的网站，来提供组件的交互式访问。

6、持续修改

添加新的组件，修复 bug 并不断优化组件库。

创建组件的通用模式是，将接口分解为可用的构建模块，对它们进行排列、分组、命名，并在它们之间建立规则。此外，编写所有组件的 概述 、 使用指南 、 示例代码 ，以便整个团队在构建和设计时使用。（关于在构建组件的命名问题可以参考业内通用的命名）

如何维护组件库？

组件的质量和数量是通过两种方式提升的，即 需求 和 新的bug 。能使一个组件变得更为健壮的方式也就在于此，从使用者那里接收反馈。接收的反馈的方式多种多样。比如 Github 、 Gitlab 自带的 issues 管理工具

反馈的方式都各有优劣势，但是不能否认的是它们都提供了有效的反馈渠道。不管是哪种渠道的反馈，在看到的第一时间应该及时响应。哪怕是只回应一句 “已收到问题，需要花时间修复解决”，这对使用者来说也是一个定心丸。使用者知道这个项目还是有希望的，一旦解决了问题，使用者会感觉这个组件库还是靠谱的。

在组织内发发布组件库时，可以考虑使用开源的 Jenkins CI 来搭建持续集成、开源的 SonarQube 来对代码质量进行管理，还有私有化的 NPM 包服务器等。

对于在 Github 上发布的组件库，有各种各样的工具可以使维护工作实现自动化，比如： Github 官方推荐的两个工具：

  • 自动化版本发布 semantic-release
  • 自动化复查代码工具 Danger

此外，还有关注于质量改善方式的工具：免费的持续集成工具 Travis CI 、代码质量工具 Code Climate 。自动化版本的发布除了依赖于各种自动化构建脚本，还需要有一个合适的发布策略。特别是在为下游的开发人员提供的脚手架时，这一点更为重要，需要有渠道来告知这些用户：我们的代码更新了，解决了那些旧的 Bug ，实现了那些新的功能。

组件库和风格指南采用一样的方式，提供一个网站，供开发人员查询及使用。此网站相当于一份文档，并且是一份可交互的文档，除了说明组件的展示样式，它还包含了组件的用法。另外我们可以修改这些代码，并且直接在线运行代码即 code 沙盒，查看响应的效果。

如何对组件分类

我们可以借鉴 Material-UI 的分类

  • 表单控制类: 包含自动完成、输入框、单选框、选择框、滑动输入条等
  • 导航类： 包含菜单、侧边导航、工具栏等
  • 布局类: 包含卡片、标签页、属性选择器、栅格列表、步骤条等
  • 按钮和指示器类: 包含按钮、图标、进度条等
  • 弹框以及对话框类: 包含底部弹出框、对话框、提示框等
  • 数据表格类: 包含分页器、排序表单等

当然还可以根据组件的架构来进行分类，比如：

  • 基础UI组件 这是最小颗粒的组件，它们不依赖于其他的组件。
  • 复合组件 由多个组件复合后组成的组件，它们依赖于现有组件。
  • 业务组件 带有业务功能的大量重复使用的组件。

三者是按照复杂度和业务的相关性进行分类的。

基础UI组件

关于创建基础UI组件必须要遵循一个基本的原则： 基础组件是独立运行的，它们可以共享配置，但是不能相互依赖。若出现依赖则意味着它不是基础组件。

复合组件

复合组件就是多个基础UI组件上的进一步组合。这个层级的组件相对来说都比较复杂，原因是它将原本划分在业务部分的逻辑，抽象到看组件层面。

业务组件

业务组件是我们在实现业务功能的过程中抽象出来的组件，其作用是在应用中复用业务逻辑。

按是否在特定领域中使用，是否只能在当前项目中使用，业务组件还可以被分为如下两类：

  • 应用相关组件，即组件与应用逻辑绑定的组件，比如登录页组件
  • 领域特定组件，可以用于特定行业的组件，但并非是通用的。比如 搜索条 + 表格