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]
複製代碼