@teambit 的正确打开方式

snow来了
311 阅读8分钟

一. 前言

1.1 bit是什么？

BIT 简单的说它就是个组件管理工具。

以前咱们开发的组件想要给其他项目使用，就只能发布一个npm包，这样做的弊端有：

  1. 暴露了公司业务代码，
  2. 组件零散不易管理，
  3. 如果遭遇人员变动，这就是个重灾区。

bit它完美的解决了咱们用npm包发布组件的问题，而且它还借助git管理仓库的理念，帮助我们管理这些组件。所以，从发布组件的角度看，bit是一个高级版的npm包。从管理文件的角度看，它又是一个高级版的git管理器。Bit 官方都说： “ Bit loves Git ”。

Git地址 

Bit地址 

Bit 的工作流和 Git 的工作流十分相似，一般我们用 Git 来管理源文件、源代码，Git 根本就不管你代码的语义结构，只要进来我就帮你管理。 Bit 它有严格的项目规范。他的项目必须由他自己的脚手架生成出来，你的组件也必须写在固定的位置上。从这个角度看，bit就比git更加严格。

1.2 基础概念

在学习 bit 的时候一定要注意它的三个概念：workspace， scope 和 app

workspace是工作区，就是整个项目。

scope是域，就是存放组件的文件夹。

app 是组件，在scope里面的每一个组件就是一个可以运行的app

他们的关系如图所示：

image.png

我们用bit new react my-react --env bitdev.react/react-env --default-scope my-org.my-ui 创建项目以后，你会发现在项目里面更加直观的看到他们对应内容到底是？如图所示：

image.png

image.png

在配置文件里面

image.png

1.2.1 scope

本地scope就是用来存储组件的文件夹，我把组件发布到远程bit服务器上以后，Bit 使用Scope保存Bit组件的版本，并根据需要访问它们。

此时 Remote Scope 就变成了托管组件及其版本的Bit服务器。

在远程服务器上设置Scope以共享组件， 如Bit.dev或自托管 Bit 服务器。

将组件存储在Remote Scope上，可以使它们在其他项目中重复使用。

  • 使用import命令从Remote Scope获取组件。
  • 使用export命令将组件推送到Remote Scope。

注意： Remote Scope会缓存组件依赖。这样做的好处是，即使依赖组件不可用，还能确保当前组件可执行。

用bit new的时候你可以直接设置默认的scope 为my-org.my-ui 

bit new react my-react  --env bitdev.react/react-env --default-scope my-org.my-ui

你也可以修改默认的scope，他会将原来的default scope 是 my-ui 替换成 my-ceshi，并且会将my-ui里面的组件全部复制到 my-ceshi里面。

bit scope rename my-org.my-ui my-org.my-ceshi --refactor

在使用的时候你可以先注册scope源

npm config set '@YourUserName:registry' https://node.bit.dev

1.2.1 组件

组件，简单点说就是可重复使用的代码段，包含但不限于：

  • React、Vue、Angular 组件
  • 公共样式文件，如 CSS、SCSS 文件
  • 重复使用的函数、方法

当 Bit 存储一个组件时会存储这段代码的三个元素：

1. 源代码

源代码是组件内容的根本，Bit 将源代码映射到组件并指定一个 main 文件作为组件的入口。

2. 依赖关系图

这是 Bit 的一个强大特性，当源代码保存为 Bit 组件时，Bit 会分析其中包含的所有依赖项（即代码中的 import 和 require 语句），然后创建一个组件的依赖关系图，这样，即使组件被抽离，它也是独立的，因为所有的依赖项都会被记录追踪。

两点说明

1⃣️ Bit 追踪的依赖项只包括使用 npm install 或者 bit install 安装的包，不追踪利用import引入的文件，例：import Utils from './utils.js'。所以你在发布之前应该将所有导入组件都加到依赖图里面去，以免追踪不到。当然，BIT 在发布前也会检查导入文件是否存在，只有存在才发布，不然不会要你发布的。

2⃣️ 如果要发布的组件中使用了第三方 UI 框架（如 Vuetify 中特有的标签 v-card 等），Bit 并不会自动分析出它依赖了这个 UI 框架，而是可以直接发布，但在使用此组件的项目中需要安装对应的 UI 框架才能正确显示 Bit 组件。

1.2.2 组件id

在执行命令的时候常常会用到bit组件id，它指的 .bitmap 文件里面的对象名。

image.png

完整的组件id是这个

image.png

二. 体验

2.1 安装

安装bvm

npm i -g @teambit/bvm bvm install
bvm install
bvm list 查看已安装的版本 bvm list -- --remote 列出可安装的所有 Bit 版本 bvm use xxx 使用指定版本 第一安装后,bbit 命令不生效,可重启试试

安装bit，并且初始化项目

npx @teambit/bvm install
bit new react my-react  --env bitdev.react/react-env --default-scope my-org.my-ui

解释说明：

  1. @teambit/bvm 是bit的版本管理工具，类似于nvm是node的版本管理工具一样。
  2. npx @teambit/bvm install是利用@teambit/bvm安装bit
  3. bit new 用于初始化一个react app（就是一个项目）。

2.2 启动

启动项目

bit start

image.png 启动组件用bit run 对于bit而言，每一个组件就是一个app

bit run 组件名

2.3创建组件

先查看模版，

bit templates

image.png

其中需要注意的是react和react-app，react模版得到的组件，不能用bit run启动，react-app模版得到的组件能够用bit run启动。

bit create react-app my-login
bit create react my-login-component

从目录的角度看看

image.png

很明显my-login里面包含了项目启动需要的文件比如：node_modules和vite.config.js，但是my-login-components就没有。也直观的告诉我们 react-app模版创建的组件可以启动，但是react模版创建的不能启动。不信你就亲自启动试试看。

看看组件管理页面

image.png

启动 my-login app

bit run my-login

得到页面

image.png

2.4 登陆远程

现在组件都已经创建好了，我们要做的是登陆到远程上，这个过程和git非常相似。执行

bit login

在本地登陆bit账号，登陆上以后才能将创建好的组件上传到远程bit上。

2.5 修改版本

bit tag --message "initial tag"

2.6 发布远程

bit export

2.7 发布 git

把创建好的项目上传到git上

git add -A
git commit -m "feat:XXX"
git push

2.8 注意事项

2.7.1 远程没有这个 scope 怎么办？

如果你的远程存在当前项目的scope，你可以直接发布。

如果你的远程不存在当前本地的scope，我们就需要先建立scope，然后再发布。

bit scope rename my-org.my-ui my-org.my-ceshi --refactor

这个命令会创建一个新的scope，并把my-ui里面的文件全部复制到my-ceshi里面，然后再执行bit export发布就好了。

image.png

2.7.2 如果你要给组件安装lodash怎么办？

直接执行命令 bit install lodash就好了。不过你要看看bit 管理包的方式。

image.png

执行bit install lodash以后都发生了什么事情？

1.它会在workspace.json里面添加依赖，

2.具体的依赖包会放到my-react项目下面的 node_modules里面。

3.组件my-login 里面也有一个node_module 但是它里面只有配置文件，不存储具体的包。

4.局域网里面使用：git remote add userID@ip:/pwd/gitName.git

三.命令汇总

workspace相关：

3.1 创建新的工作区（也就是一个新项目）

bit new  <env> <project>

3.2 在已有项目上集成bit

 cd <project>
$ bit init --harmony

3.3 手动配置配置文件workspace.jsonc

"teambit.workspace/variants": {
  "*": {
    "teambit.react/react": { }
  }
}

3.4 安装依赖包

在bit项目里面，所有的包都要用bit install安装，当然你也可以用npm/pnpm等安装包。

$ bit install react --type peer
$ bit install react-dom --type peer
bit uninstall  lodash //卸载
bit update //更新版本，雷同 npm

3.5 导入组件

如果远程有个bit组件叫 demo.base-ui/ui/card， 我们在本地的bit项目里面执行下面命令：

bit import demo.base-ui/ui/card

他会把card组件下载到本地，bit install安装的组件进入了 node_modules文件夹，使用的时候你可以在文件里面用 import xx from 'xx' 导入。

但是bit import 导入的组件，他会在本地建立一个base-ui/ui文件夹，然后把card组件放进去，然后还会自动帮你安装依赖，产生一个node_modules文件。这样导出的组件相当于你执行了 git clone 克隆了组件一样。如果你要修改你远程的组件，你就用 bit import 导入组件修改后再发布就好了。

3.5 创建组件

创建组件前需要查询组件模版

bit template

创建组件后它会在scope里面添加一个组件app

bit create react-app my-react-component-example

如果你不想用templates里面的标准模版创建组件，或者你的项目里面已经有了一个react组件，你想bit能够追踪到他，那么你就用bit add命令

bit add <relative-path> --namespace <namespace>

image.png

也就是说，你可以按照bit的模版创建组件app，你也可以像写一般的react组件一样自定义组件，然后用 bit add 命令追踪就好了。

3.6 删除组件

如果你想要删除组件就用git remove button 命令，这个命令会做两件事，

1.解除bit追踪，

2.删除组件文件

如果你只想解除追踪，不要删除文件，就需要在后面追 --keep-files

bit remove [component-id]
bit remove [component-id] --keep-files

弃用

bit bit deprecate <user_name>.<collection>/<component_id> --remote

3.7 查看组件

查询所有组件用bit list ---所有追踪到的组件

查询可启动的app组件 bit app list---使用bit create react-app 创建的组件。

查看具体某个组件的配置信息 bit show <component-id>

查看组件的状态 bit status

bit list
bit app list
bit show <component-id>
bit status

3.8 版本相关

执行命令

bit tag --all  --message "first version"

所有组件都会默认设置版本，如下：

image.png 查看组件的所有版本 bit log [component-id],查看版本之前，需要先给版本设置版本。

bit log <component-id>

监听文件变化，才能标识。若文件无变化，无法进行标识。

有个组件是my-login，你修改组件里面的内容以后，然后打版本，执行

 bit tag my-login --message "我改了改数据"

image.png

注意：  

独立的组件通过独立的“远程范围”、远程组件托管形成依赖关系网络。

这种依赖关系网络使更改能够让一个组件的改变传播到它的所有依赖组件。也就是说，一个组件的更改以级联的方式触发了组件的CI及依赖它的组件的CI。

3.9 帮助-查看bit所有命令

bit help

3.10 启动服务

通过 worker 运行不同的工作区任务，例如测试、linter 和由组件定义的任何工作区任务。

编译项目

bit compile

启动服务

bit start

启动组件app

bit run my-react-component-example

3.11 登陆远程

登录和退出

bit login
bit loginout

3.12 发布

bit export

3.13 不发布也能用-bit snap

如果你想发布组件的变更，但是你又不想修改版本，怎么办？你就用bit snap。

如果你修改了组件的内容，执行bit tag 会自动修改组件版本。执行bit snap不会修改组件版本。

bit snap --message "my snap message"

3.13 安装并使用Bit组件

注册scope

npm config set '@YourUserName:registry' https://node.bit.dev

安装

$ npm i @bit/zander.hello.my-hello
$ yarn add @bit/zander.hello.my-hello

组件里面

 import MyHello from "@bit/zander.hello.my-hello";

3.14配置环境

查看环境

bit env //打印一个简单的表格，其中包含工作区中的所有组件及其环境

设置环境--env bitdev.react/react-env就是把环境设置成 react的

bit new react my-react  --env bitdev.react/react-env --default-scope my-org.my-ui

image.png

修改配置

[总结]

首先，Bit 的确是为前端组件化、代码片段管理提供了一套不错的解决方案，如果组件都能跨项目地去使用，而且只需要一行 Bit 命令就可以解决，既保证了开发的高效性，也能保证组件的整体质量及可复用性。

如果前端的工作方式都切换到 Bit 模式上，那么从发布方式、规范化、标准化等方面来说就没得挑，因为你发布的组件别人要用得上、可以用、用得爽啊！所以，从这里来看 Bit 的确可以规范前端组件标准，有效解耦前端代码。

但是，以 Bit 目前的知名度和普及度来看，它还有很长的路要走，这也不是没有原因的：

  1. bit.dev 不开源，自行搭建的 Bit Server 功能实在是太有限了，这点真的是太失望了🙍‍♂️……
  2. Bit 没有像 GitHub、GitLab 这样的可以以项目为单位管理组织代码的机制，以至于看起来像是 Codepen 这样的交流社区。
  3. 权限管理功能欠缺。
avatar
文章
阅读
粉丝