一种新的组件协作模式 - Bit Components

作者：杨哲迪

平常大家在日常的开发中，会积累丰富的业务组件，无论是自己造轮子也好或者基于优秀的组件库二次封装也好。久而久之，组件越来越多，管理与共享这些业务组件就可能会成为负担。本文要介绍的Bit就为这种场景提供了一种新的解决思路。

Bit是什么？

Bit利用组件使它们不仅可以在应用程序内部重用，而且提供了一个生态系统，可在应用程序之间以及跨存储库共享组件。

Bit是一个工具，可以在不同项目 共享 与 同步 组件。

Bit简化了UI组件上的协作过程，团队成员可以共享，维护和同步来自不同项目的隔离组件。

Bit是怎样工作的？

本文将会从三个模块：组件组成，组件生命周期，Bit工作流来介绍Bit和传统的组件库管理有哪些区别？

组件组成

每个组件，Bit都会存储三种元素

• 源代码 (包括test和documentation)
• 组件的内容不仅是源代码本身，还可以包括其他相关文件，例如样式文件，资产（图像，字体），测试代码，文档。
• 依赖图谱
• 将源添加到Bit组件时，Bit会分析它包含的所有依赖项（即，代码中的import和require语句）
• 依赖图使组件成为独立的，并允许在项目中移动组件而不会丢失任何引用。
• 配置项
• Compiler，bit提供编译器 bit.envs/compilers/react@1.0.14  
• Tester，bit提供的扩展，用于运行与组件关联的测试并返回状态。

源代码有点类似于原来组件库的源代码部分，依赖图谱类似于webpack在分析import依赖阶段生成的map，而配置项就类似于webpack.config.js，Bit会帮你把组件打包编译，所以这里可以看出Bit之所以能够如此方便的完成组件封装，有一部分原因是Bit帮我们把组件库打包编译的工作做掉了。

组件生命周期

生产组件

生产组件有三个动作，track、version、export。

1. Track: 在workspace里指定组件的构成文件。

1. Version: 标记版本会锁定该版本下文件的内容和元数据。如果组件具有编译器，Bit会构建组件并锁定所构建后的组件（将其视为类似于git commit和npm发布同时进行）。

1. Export: export命令将为该组件创建一个唯一ID。唯一的ID是远程作用域名称和本地组件名称，远程作用域名称可以包括任何名称空间（username.collection?.namespace）。https://bit.dev/yangzhedi/test/list

消费组件

只要上传到远程服务器上，该组件便可供其他工作空间使用。使用组件的方式是通过install或import。

• Install: Bit会将组件作为常规NPM软件包添加到node_modules文件夹中。安装组件时(bit install / npm install / yarn add)，该组件将添加到package.json中，指向已安装的版本："@bit/yangzhedi.test.list": "0.0.1"。不会更改已安装组件的代码。

import List from '@bit/yangzhedi.test.list';

• Import: Bit会将组件添加到工作区-组件文件夹并跟踪其修改。在导入时，您可以看到package.json指向本地文件："@bit/yangzhedi.test.list": "file:./components/list",

• 跟踪代码修改，并可以将其导出为新版本。 弹出(eject)：如果导出了新版本，则可以还原为已安装的组件。在这种情况下，package.json将更新回"@bit/yangzhedi.test.list": "0.0.2"

Bit workflow

Ad-hoc Sharing（临时共享）

              |            

这种工作流适用于:

• 有几种带有UI组件库的产品。 
• 需要在项目之间保持一致的UI / UX。 
• 没有时间/能力来组成专门的团队来维护组件。

带来的好处

• 无需花费很长时间为UI组件构建和维护共享库，共享现有项目中已经开发的组件。 
• 使用bit.dev作为收集门户中所有组件的发现门户，包括demo和文档。 
• 在任何项目中都可以更改组件代码，可以保留使用项目中组件的本地修改，并且仍与传入的更新合并。 
• 可以使用npm / yarn来安装组件，因此它们适合项目开发人员的正常工作流程。

风险

• 规范组件的export流程

Centralized Library（中央图书馆）

这种工作流适用于:

• 需要共享UI组件的集中式存储库 
• 一个专门的团队来管理共享的UI组件 
• 存在使用共享组件的多个项目

带来的好处

• 对于生产者
• Bit以更高的粒度自动打包每个组件，而不会增加维护单独包的开销，自动根据组件依赖关系的变化对组件进行版本控制
• 在没有项目上下文的情况下在本地构建组件会缩短组件在其他项目上的调用方式上的反馈循环。 
• 将组件发布到bit.dev，使其对所有团队可见，从而提高了组件的采用率 Bit有助于控制谁在更改组件。
• 对于消费者
• 获取每个项目所需的较小的分立组件对于： 减少应用程序的捆绑包大小。
• 可以只引入他们需要的组件。 减少最终打包体积，缩短构建时间。
• 更细颗粒度的调用组件库可以提高项目的稳定性。

风险

• 如果有一个团队专门来维护统一的组件库，颗粒度太细会成为负担

和npm比有啥不一样？

• Bit基于代码分析使代码打包自动化。
• Bit可以在不离开项目上下文得情况下，访问到程序包 （bit import）。
• 对于生产者来说，不需要把组件单独复制出来，就可以直接上传
• 对于消费者来说，想要修改组件也不需要clone组件库，而是在项目里就可以直接修改
• Bit可以在任何项目中使用组件代码，然后直接在其中进行更改。

以上，本文主要介绍了bit cli的使用方法，bit同时也提供了一个类似于npm.org的平台网站：bit.dev，而且还可以在bit.dev上直接看到组件的样式以及调用方式，连docs都不用自己写了。

参考：

https://docs.bit.dev/docs/quick-start

招聘

字节跳动商业化前端团队招人啦！可以每日与技术网红畅谈理想、参加技术大牛交流分享、享受一日四餐、顶级极客装备、免费健身房，与优秀的人做有挑战的事情，这种地方哪里找？快来加入我们吧！

简历投递邮箱：[e-mail]