前端达人都在学习的组件协作模式 - 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。

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

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

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';