前端达人都在学习的组件协做模式 - 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）。bit.dev/yangzhedi/t…

消费组件

只要上传到远程服务器上，该组件即可供其余工做空间使用。使用组件的方式是经过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都不用本身写了。

参考：

docs.bit.dev/docs/quick-…

招聘

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

简历投递邮箱：yangzhedi@bytedance.com