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

前言

bit 基本的套路即，将项目 A 里组件直接发布到共享的远程空间【本文特指 bit.corp.kuaishou.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.corp.kuaishou.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.corp.kuaishou.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]
复制代码