Bit 简化了 UI 组件上的协作过程，维护和同步来自不同项目的独立组件。即使是在工程已经有部分组件的情况下再去使用 Bit 也还是比较方便的。
如果是拉取已经配置好的工程就不需要初始化和修改配置，建议直接看最后一段 拉取使用 Bit 的项目
# 环境配置
# 初始化 Bit Workspace
在 Bit 中是以 workspace 来管理一个项目的，所以第一步先要初始一个 workspace。
# 安装bit
# bit的环境变量默认基本上安装不成功，根据提示配置一下
# Linux或Mac执行： export PATH=$HOME/bin:$PATH
# windows建议手动把 "C:\Users\username\AppData\Local\.bvm"添加到环境变量中
npx @teambit/bvm install
# 项目根目录下执行
bit init --harmony
# 安装依赖
bit install
2
3
4
5
6
7
8
9
10
11
Bit 初始化成功之后会自动生成 workspace.jsonc 和.bitmap 两个文件，workspace.jsonc 用来配置 workspace 以及管理组件环境等配置的，.bitmap 主要是存储组件的映射关系不需要手动编辑。还会默认生成一个.bit 的隐藏文件夹（如果初始化之前已经有.git 则在.git 目录下），算是一个本地的组件仓库。
# 修改配置
workspace.jsonc 中的 teambit.workspace/workspace 用来控制整个 workspace 的一些基本配置，比如 name 或者默认文件夹等。
workspace.jsonc 中的 teambit.dependencies/dependency-resolver 用来管理依赖，packageManager 可以选择 pnmp 或则 yarn，官方是建议使用 Bit 来管理依赖，也就是说使用 bit 后安装新的依赖就用 bit install 安装而不是 npm 或者 yarn 直接安装，当然也有说可以继续直接安装 (opens new window)，但是需要自己处理组件模块的链接问题，更多具体信息请参考文档 (opens new window)。
workspace.jsonc 中的 teambit.workspace/variants 用来通过不同的分组层级来设置各种具体的配置，比如环境依赖。可以通过指定的更具体的配置来覆盖通配符的配置，更多信息参考[文档]。(https://harmony-docs.bit.dev/aspects/variants)
配置文件主要是以上三块内容，默认情况下要改的也就是把 variants 里面的环境注释给去掉就行，然后把 packageManager 换成 yarn。
"packageManager": "teambit.dependencies/yarn",
"*": {
"teambit.react/react": { }
}
2
3
4
5
更多配置可以参考 Manage Workspace (opens new window)，目前 harmony 版本的文档感觉还不是很稳定，有可能要重新查找一下。
# 添加 remote
remote 可以理解为在服务器上的组件仓库，自托管的 bit.dev，如果只是本地用用可以省略。如果使用官方提供的 bit.dev 直接执行 bit login 即可。
假定远程地址为 https://bit.demo (opens new window)
# 添加remote
bit remote add https://bit.demo
# 修改workspace.jsonc中的defaultScope为remote的scope，这边是bit-scope
2
3
4
# 组件操作
# 新增组件
可以使用 bit create 命令来新建模板
# 以react-component为模板在ui中创建一个组件button
bit create react-component ui/button
2
关于组件名称需要注意一点：Bit 使用 CamelCasing 的方式将组件名称传递给模板，但生成的文件结构采用的 kebab-case 模式，说是为了更好的跨操作系统兼容性。
执行 bit start 可以启动一个 dev 服务器，访问 http://localhost:3000/ui/button (opens new window) 可以查看到刚刚新增组件的各种信息。
# 处理已有组件
对于已经存在的组件要转换成 Bit 组件可以使用 bit add 命令，对于新创建组件建议使用 bit create 命令创建。
直接执行 bit add 组件文件夹路径 就会自动添加一个组件，不过建议还是自行指定组件的 name 或 namespace（不可同时指定），自动生成的可能不是你想要的。
# 生成name为button的组件
bit add bit-scope/ui/button
# 生成name为ui/button的组件
bit add bit-scope/ui/button -n ui
# ui目录下全都添加为Bit组件
bit add bit-scope/ui/* -n ui
2
3
4
5
6
7
8
需要注意的是 Bit 组件默认需要 index.[ts|js] 文件作为入口，如果实在不准备用 index 文件，需要在添加的时候指定入口文件 bit add bit-scope/ui/button --main main.js。
每个 Bit 组件实际上都可以作为一个独立的 npm 包，为了保证组件可读性和稳定性，建议每个组件都有以下部分：
- *.compositions.tsx 文件作为实例用于单测和文档上显示用
- *.docs.mdx 作为组件文档
- *.spec.tsx 写单元测试
使用 bit start 启动 dev 服务器之后，对组件内部文件的改动会 watch 然后更改的，不需要手动执行 compile 之类的操作。
# 使用组件
不允许通过相对路径来使用组件，只能通过组件的包名来使用组件，这样可以保证后续移动组件位置之类的操作不会影响到使用的地方。bit 在构造组件的过程中会自动添加到 node_modules，所以可以直接以依赖包名的方式引入。
import { Button } from "@bit-scope/ui.button";
# 导入导出组件
如果只是在本地一个项目使用组件放在 bit 上的必要性也没那么高了，只有把组件发布到远程服务器上才能方便的不同项目之间共享组件。
# 给全部改动的组件打tag
bit tag --all --message "first version"
# 发布组件到remote
bit export
2
3
4
5
访问以下远程服务器看看组件发布成功了没有，如果成功了就能在另外一个项目愉快使用了。先从 remote 导入组件，再引用就行了。
# 导入组件
# bit import <scope>/<component>
bit import bit-scope/ui/button
2
3
如果是同一个工程，其他小伙伴新增了组件，拉取代码之后如果没有正在运行通过 bit start 启动的服务，那么需要处理一下才能使用。
# 从远端导入
bit import
# 链接到node_modules中去
bit link
# 编译一下，不然会有一些说缺少loader的报错
bit compile
2
3
4
5
6
7
8
# 拉取使用 Bit 的项目
如果只是带有 Bit 组件工程的使用者（不上传 bit 组件），那么按下面的配置简单操作一下就可以了。假定远程地址为 https://bit.demo (opens new window)
# 如果没有安装就先安装bit
# bit的环境变量默认基本上安装不成功，根据提示配置一下
npx @teambit/bvm install
# 添加远程环境
bit remote add https://bit.demo
# 导入组件
bit import
# 链接和编译
bit link
bit compile
# 启动工程
yarn start
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
看到这么多步骤，感觉有点麻烦？在 package.json 中加上 "postinstall": "bit remote add https://bit.demo && bit import && bit link && bit compile",，然后执行 yarn 就行了，同时这样也能保证每次安装后处理依赖。
简单用了一段时间之后的感受：Bit 虽好，依赖却坑。