共享组件生态初探

现有开发痛点

我们常常会在开发中遇到以下问题：

1. 开发新组件成本高，需要创建代码仓库以及权限的管理
2. 使用不方便，需引整个组件库，无在线可编辑 demo或者较少
3. 组件/工具方法/模块共享率低，重复造轮子，信息不互通，跨组件库搜索困难

打造共享组件生态

如果可以打造一个围绕组件而不是项目协作的生态，就可以标准化并加速开发过程。比如每个开发者可以直接从自己的项目中将组件共享出来，并可以在某个共享组件的平台上发现满足自己需求的组件，甚至可以对其进行改造和优化再进行发布。当优质好用的组件越来越多，就会使大家更愿意使用和共享组件，形成一个良性循环的生态。

实践：Kaola-Bit

Kaola-Bit就是为打造这样一个生态而诞生的平台，它分为CLI和平台两个部分。

在工程当中打包发布模块

安装cli

# 内部的源管理工具，这里使用npm来代替
npm i tiny-bit -g

初始化

# 在工程的根目录
tiny-bit init

执行init命令之后会在工程的根目录的 .tiny 文件夹下生成 module.json 和 scope.json 两个文件，分别用来存储模块的版本，路径，依赖等信息。

添加模块

tiny-bit add [module-entry] -n [module-name]

添加将要发布的模块或组件，用例当中发布的是一个vue组件，因此在执行add之后选择component => vue，cli会将解析出组件的基本信息以及依赖等添加到module.json当中。

添加scope 和 模块管理

tiny-bit manage

在构建之前可以通过manage命令添加webpack配置(也可以使用默认打包配置)，以及添加模块的文档，测试用例以及demo等。

构建打包

tiny-bit build

构建的代码包含编译之后的代码以及源码。

发布

tiny-bit publish

共享组件平台

登录平台并搜索想使用的相关组件

查阅文档，尝试在线 playground

安装使用模块/组件

npm i [scope]/[namespace]/[module-name]

以上就是组件在创建、发布、以及共享使用的workflow。

这样做的优势

在应用之间即时共享和同步组件

无需拆分，重构，或代码更改。

将组件从仓库的限制中解放出来，无需拆分或重构任何内容。消除这些开销之后，重用成为一个简单的选择，开发者可以专注于构建自己的应用程序。

对现有组件库的增强

使用模块化Monorepo体验进行构建，并分发大家实际采用的组件

组件库的维护者可能会遇到这两个问题：

• 在一个仓库中开发多个逻辑无关的组件，并管理它们之间的关系，想要简化开发人员使用其组件的成本
• 站在开发者的角度，有时并不想在项目中添加或更新繁重的库，也许只需要使用若干个组件而已

而共享组件生态的方式可以解决这两个问题，它使组件库开发人员轻松隔离，构建，测试，版本化，更新和发布其中的组件。并且开发者不必安装整个库而仅获取所使用组件的更新，而且可以直接在自己的工程中修改组件并使维护者merge它的feature，从库中解耦组件的开发。开发者可以在使用组件之前通过平台了解每个组件打包后的大小，依赖和环境。

这种方式可以让大家更好地参与到组件库的共建当中，并且可以从中孵化出质量更高的组件，反哺组件库。

未来展望

如何通过高效的协作来进行开发一直是围绕开发者们的问题，打造共享组件的生态是其中的一个探索。Kaola-Bit作为打造共享组件生态的工具如今还不够完善，还有一些功能块仍在实现当中，比如文档整合，更加精确好用的组件搜索，规范组件命名空间，组件标签以及组件热度、下载量、排行等等，希望大家能够多提意见参与到共建当中来。在大型的团队当中，建立起一个共享组件的生态，不仅可以加快开发速度，简化开发过程，也可以在组件的标准化统一以及多样性之间找到平衡。