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 依赖处理这块的坑。