Bit + TypeScript + React 最佳實踐 - 第三節：bit是如何處理組件之間的依賴的

源組件

設想咱們的若干源組件【souce components】知足這樣的目錄結構關係，全部組件都僅僅經過一個 index.ts 向外暴露接口，相互之間僅經過 index.ts 引用依賴——這個是一個很重要的原則，isolate：

而這些源組件存在以下的依賴關係：

• Zoo.tsx 經過 ../Camel 引用 Camel 組件，【Legacy Mode Relative Paths】
• Zoo.tsx 經過 @source/Elephant 別名引用了 Elephant 組件

依賴解析

經過 bit add src/source/zoo --id demo/zoo 對 Zoo 組件進行追蹤，bit 會把組件目錄、文件等相關信息會被寫入到 .bitmap。

bit 會在執行 tag 時候纔會解析組件的依賴，因此當 bit tag demo/zoo 時，會拋錯，並同時打印兩個告警信息：

1. missing packages dependencies …… Elephant
2. untracked file dependencies …… Camel

對於告警 1，咱們須要在 bit.json 裏配置別名，告訴 bit 如何去查找 @source 依賴：

{
        "resolveModules": {
            "aliases": {
                "@source": "src/source"
            }
        }
    }
複製代碼

而告警 2 則須要 bit add、bit tag Camel & Elephant 兩個組件：

bit add src/source/camel --id=demo/camel
bit add src/source/elephant --id=demo/elephant
bit tag demo/camel
bit tag demo/elephant
複製代碼

而後就能夠再次 bit tag demo/zoo，而且成功—— bit 會把對 Camel、Elephant 組件的依賴映射爲對 demo/camel 、demo/elephant 的依賴【Relative Source】——接下來就能夠經過 bit export scopeName 導出組件。

依賴安裝

更直觀的體驗一下，能夠配置 bit.json：

{
    "env": {},
    "componentsDefaultDirectory": "components/{name}",
    "packageManager": "npm"
}
複製代碼

而後：

bit init;
bit remote add ssh://bit@你的私服:/data/bit/my-test;
bit import my-test/demo/zoo;
複製代碼

最終的 bit 建立目錄樹是這樣的：

其中，components 目錄下：

• demo/zoo 保留了跟源組件相同目錄結構：
  • Zoo 跟源組件內容如出一轍的目錄結構、源文件；
  • 建立 Camel 目錄， 經過 index.ts 導出 camel，讓 Zoo 能夠找到相對路徑依賴 Camel
  • 將 node_modules/@bit/* 軟鏈至 .dependencies 下對應依賴的特定版本
  • 爲讓 Zoo 能夠找到經過 @source 別名引入的依賴 Elephant，十分機智的建立了 node_modules/@source/Elephant 目錄，並經過 index.js 和 index.d.ts 導出邏輯和類型——這就帶來一個問題：

若是：

import Elephant from '@source/Elephant/Elephant';
複製代碼

可是在對應的 node_modules/@source/Elephant 並無 Elephant.tsx，必然會是錯誤的——這就是爲何組件之間要 isolate，由於 bit 就這麼限制了——奇怪的是這裏爲何不把 Elephant 直接軟鏈到 node_modules/@bit/my-test.demo.elephant？

• .dependencies 下是 demo/zoo 各依賴組件的不一樣版本的源文件。

而後，node_modules/@bit 目錄下會有軟鏈到 components/demo/zoo 的 my-test.demo.zoo，這樣在業務代碼裏就能夠經過 @bit/my-test.demo.zoo 引入 Zoo 組件。

經驗總結

組件之間 isolate——組件全部的成員，包括邏輯、類型都只能經過惟一的出口，好比 index.ts 導出；對其餘組件依賴的引用，也必須經過該組件惟一的出口，進行引用。如此就能夠避免踩到 bit 依賴處理這塊的坑。