Bit 最佳实践 - 第二节：基于bit的组件共享工作流之一的实践

前言

bit 基本的套路即，将项目 A 里组件直接发布到共享的远程空间【本文特指 bit.xxxx.com，大家可以按需搭建属于自己的 bit server 】，从而在其他项目内内可以通过 bit install 和 bit import 两种方式引入共享的组件；并且在 bit import 方式下，可以对组件代码进行修改定制、合并同步。

工作流实践

项目初始化

在组件源项目根目录下配置 bit.json 文件，执行 bit init。

导出组件

基于统一的前端技术栈和脚手架这样的前提，我们选择直接 export 组件源码，省略了 compile 这一步【供 nodeJS 使用的模块无法略掉编译步骤】，所以无需安装和配置任何的编译工具。

但这要求在目标项目里，需要在 babel-loader 或者 tsx-loader 的 include 里添加如下配置，确保源码能被转译。

Webpack Loader配置：

include: [  
  __dirname + '/src',
  __dirname + '/' + (require('./bit.json')
    .componentsDefaultDirectory || 'components').replace(/\/{name}/g, '')
]

我们可以配置 bit.json 的 overrides 字段，在导出组件时显式的忽略掉一些公共依赖，示例：

{
  "overrides": {
    "assets/*": {
      "env": {
        "compiler": "-"
      }
    },
    "*": {
      "dependencies": {
        "react": "-",
        "@types/react": "-"
      },
      "devDependencies": {
        "@types/react": "-"
      }
    }
  }
}

通过如下命令来添加并导出组件：

bit add [files] --id [namespace]/[id]
// 手动指定版本
bit tag [id] [version] --skip-auto-tag
bit remote add ssh://bit@bit.xxxx.com:/data/bit/owner.collection
bit export owner.collection/[namespace]/[id]

命名格式：

我们可以采用更结构化的scope、id命名方式，比如 team.universal/utils/date-format。

bitmap：

同时，bit 会创建一个 .bitmap 文件用来记录导出组件的版本、文件等信息，我们需要把这个文件添加到 vcs。

引入组件

同样需要在目标项目的根目录下配置bit.json：

{
  "componentsDefaultDirectory": "components/{name}",
  "packageManager": "npm",
  "packageManagerArgs": ["--no-package-lock"]
}

执行：

bit init
bit remote add ssh://bit@bit.xxxx.com:/data/bit/owner.collection
bit import owner.collection/[namespace]/[id]

此时 bit 也会创建一个 .bitmap 文件已记录导入的信息，同样需要将这个文件以及 package.json 添加到 vcs。

如果没有修改，是不需要将引入的组件代码添加到 vcs，我们可以通过如下命令：

在新检出的 vcs 里引入已有组件：

bit import --override

升级某个组件到特定的版本：

bit import <owner>.<collection>/[namespace]/[id]
bit checkout [version] [namespace]/[id]
git add .bitmap
git commit -m 'chore(deps): xxxx'

修改、合并、再导出

如果需要对引入的组件进行修改定制，这个时候我们可以：

仅在引入组件的项目应用修改，这个时候需要将修改的组件代码提交到 vcs。

我们可以通过如下命令，在新检出的 vcs 里引入已有组件：

bit import --merge ours

合并远程版本到被修改组件的 vcs 版本，提交到 vcs：

bit import owner.collection/[namespace]/[id][@version] --merge manual

如果还需要在其他项目里也应用该组件的改动，我们可以将改动后的组件再导出到远程：

// 手动指定版本
bit tag owner.collection/[namespace]/[id] [version]
// 自动加一：--patch or --minor or --major
bit tag owner.collection/[namespace]/[id] --patch
bit export owner.collection

当然，我们也可以 fork 的形式将改动后的组件再导出到其他 scope

bit export other-owner.other-collection/[namespace]/[id]