使用 Bit 管理组件

组件复用发展史

复制粘贴

优点：

• 简单有效,任意粒度复用

缺点：

• 没有版本管理、依赖管理、难以统一维护

NPM (Node Modues)

优点：

• 文件粒度复用
• 版本依赖管理完备

缺点：

• 需要独立的 repo 管理，一个 npm 包，一个 repo
• 只读模式使用
• 可能需要创建很多个 repo 进行管理

Monorepo

多 repo 合并为一个 repo 进行管理（代表：lerna 管理工具）

优点：

• 多个 repo 可以合并为一个 repo, 统一维护，然后发布多个 npm 包

缺点：

• 较高的学习和维护成本
• 不是所有的 module 都适合放在同个 Monorepo

Bit

用 git 的方式来管理组件

• 可直接从已有项目、库内导出组件
• 可在任意使用到组件的应用修改组件源代码
• 可以将组件的定制修改直接回馈给源组件
• 自动将组件包裹成 Node Module
• 细粒度

Bit组件管理

创建 Bit 账号

bit.dev 创建一个账户，例: my-org

创建一个项目集合，比如: vue组件都放在 vue 项目下，react组件都放在 react 项目下

下面就是往这两个集合中添加公共组件 项目中引用组件时，可使用 import Button from '@bit/my-orig.vue.button' 来使用组件

安装

• 全局安装 bit 工具 npm install bit-bin -g
• 登录 Bit 服务 bit login

A项目添加和发布组件

• 项目目录下初始化 bit init
• 项目目录下添加组件 bit add src/components/button
• 项目目录下设置版本号 bit tag button --minor
• 项目目录下发布组件到项目 bit export my-org.vue

执行 bit export 后，组件会被发布到 bit.dev，登录可以在项目 vue 下看到，刚刚提交的 button 组件

这里可以先编译好组件，再进行导出，但实际应用中，要使用 Bit 官网提供的 react或vue的编译插件，但这些插件不一定就适配你当前项目的 react/vue 版本，增加了组件管理成本，所以这里直接导出源码，在应用的时候也直接使用源码。

如果要编译vue组件，需要增加下面两个步骤

• 导入编译插件 bit import bit.env/compilers/vue
• 编译组件 bit build

B项目应用组件

• 项目目录下初始化 bit init
• 项目目录下安装组件 bit import my-org.vue.button
• 项目文件中引用组件 import Button from '@bit/my-orig.vue.button'

使用 bit 组件有两种方式

使用编译后的组件 bit add @bit/my-org.vue.button --save 使用源码组件 bit import @bit/my-org.vue.button --save

编译后的组件会将包安装到 node_modules/@bit 里面 使用源码时，会将包放到 /components 下面，可以直接在 components 下更新组件应用到项目

使用 bit import 可添加参数

• --skip-npm-install 不安装依赖 (使用当前项目本身的依赖)
• --override 覆盖本地修改
• --skip-save-dependencies 不保存依赖

项目更新后，同步到 bit.dev

• 项目目录下设置版本号 bit tag button --minor
• 项目目录下发布组件到项目 bit export my-org.vue

A项目应用更新后的组件

引入已有的组件并合并远端的修改 bit import my-org.vue.button --merge

其它命令

切换到组件特定版本 bit checkout 0.0.2 my-org.vue.button

手动设置版本号 bit tag button 0.1.2

自动设置版本号 bit tag button --patch