git-2.29.2.2-64-bit安装_Bit：简化前端在UI组件上的协作过程

最新推荐文章于 2023-02-28 13:48:50 发布

weixin_39883194

最新推荐文章于 2023-02-28 13:48:50 发布

阅读量188

点赞数

文章标签： git-2.29.2.2-64-bit安装

Bit是一个开源cli工具，用于跨项目和存储库的隔离组件进行协作。
使用Bit将离散的组件从存储库或项目分发到独立的可重用包中，并在整个应用程序中使用它。您可以设置自己的服务器来进行组件协作，也可以使用bit.dev云托管进行私有和公共组件共享。
Bit简化了UI组件上的协作过程。团队成员可以共享，维护和同步来自不同项目的隔离组件。

Bit 相关概念

Bit 的流程很类似 git，需要分享的组件先 add 进来，依赖分析通过后，再 tag 个版本，接下来就可以 export 到远端了，其他人要用就 import 到自己的项目里就行

Workspace
- 代表当前项目目录，相关 bit 操作都会在 workspace 里进行，使用 bit init 初始化
Scope
- 类似 npm 里面的 scope 的概念，bit 里的组件 id 组成是 <scope>/<namespace>/<component-name>，其中 namespace 可以省略( 以下例子中使用 share 作为 scope )
- 比如要分享个 dialog 组件，就是 share/dialog，还可以用 namespace 来做个组件包，比如开发者下的 dialog share/developer/dialog

常用命令

# 查看远端某个scope下所有组件
bit list -s share

# 查看当前status
bit status

# 取消 add 进去的组件
bit untrack <component-id> 

#取消 tag
bit untag <component-id> 

#当前项目同步远端数据（比如新 clone 了一个使用了 bit 的项目，可以用这个命令同步下组件数据）
bit import

# 将引用到的包全部改为 link 的模式（新 clone 的项目装好依赖后，修改引用的包的代码是不会实时生效的，用了 link 后就能实时生效了）
bit link 

# import 组件时不自动安装依赖
bit import <component-id> --skip-npm-install 

# import 代码片段
bit import <component-id> --snippet 

# 将其他文件或文件夹加入到已经存在的组件中
bit add path/to/file --id <component-id>

使用方法

先全局安装

npm install bit-bin -g

在项目中使用

进入项目根目录，然后运行

bit init

非 git 目录初始化还会多个 .bit 文件夹，需要把 .bit 加到 .gitignore 里面
项目下就会多出个 .bitmap 文件，如果没有 package.json 的话，还会生成个 bit.json 文件，如果有 package.json 的话，bit 会把配置写入 package.json

修改 package.json 里的 bit 配置 (如果有 bit.json 就修改这个文件对于的字段)

{
    "bit":{
        "env":{

        },
        "componentsDefaultDirectory":"src/components/{name}",
        "packageManager":"yarn"
    }
}

组件安装的目录用 componentsDefaultDirectory 控制，可以根据需要自己修改，更详细的用法可以参考 teambit 的官方文档

分享一个组件

最佳实践：一个分享出去的组件，组件相关逻辑最好都包含在一个文件夹里面，这样通用性最强。如果是业务组件，相关的 service, model 最好也都在这个组件的文件夹下面，然后动态挂到全局的 store 上。如果依赖别文件夹的组件，被依赖的组件最好也发到 bit 上。

假如有个组件在 src/components/MyDrawer 需要分享，先运行

bit add src/components/MyDrawer

# 还可以使用 -n 指定 namespace，这样组件名就是 developer/my-drawer
bit add src/components/MyDrawer -n developer

接下来看看 status 是不是依赖都满足了，组件名默认会转换成 kebab-case

bit status

假如提示缺少依赖 Icon，可以把依赖的文件夹也 add 为一个新的组件

bit add src/components/Icon

如果 Icon 只有 MyDrawer 使用的话，也可以把 Icon 直接加入到 MyDrawer

bit add src/components/Icon --id my-drawer

组件要先 tag 才能发送到远端，用 tag 给组件打上版本

bit tag <component-id> <version> 其中 <version> 不填的话，默认 0.0.1 或者在原有版本上 patch+1

# 需要先把依赖的组件打上 tag
bit tag icon
bit tag my-drawer

分享到远端

bit export [scope] icon
bit export [scope] my-drawer

其他项目可以通过 import 来使用组件

bit import [scope]/my-drawer

常用场景

1. 作为组件分享工具

走正常的 add tag export 的流程，处理好依赖即可，如果是公共依赖，可以在 package.json 的 bit 字段里面加入 override 来覆盖依赖

“-” 用来标记删除这个依赖

{
    "bit":{
        "env":{

        },
        "componentsDefaultDirectory":"components/{name}",
        "packageManager":"yarn",
        "overrides":{
            "response/base":{
                "dependencies":{
                    "react":"-"
                },
                "peerDependencies":{
                    "react":"^16.8.0"
                }
            }
        }
    }
}

2. 作为代码片段分享工具

这个场景下只是单纯想要分享代码片段，不关注代码的依赖关系，可以跳过些依赖的限制，快速分享代码

# 首先将文件夹作为组件来跟踪
# dir 会作为 component-id 建议加上 -n 添加上 namespace, 最终 component-id 就是 <namespace>/<dirname>
bit add path/to/dir -n shining
# 上面这条命令会产生个 component-id 是 shining/dir 的组件
 
# 查看当前的状态，过一遍依赖，如果是有必要分享的依赖，建议先处理完
bit status
 
# tag 一个组件，只有 tag 过的组件才能分享到远端   --ignore-unresolved-dependencies 这个选项用于跳过依赖检查，因为分享代码片段可能不太关注依赖，但是如果是个多项目使用的组件，一定要管理好依赖
bit tag --ignore-unresolved-dependencies <component-id>
 
# export 到远端
bit export share <component-id>
 
# 别的项目引入
# 如果没有 init 过需要先，然后修改 package.json 的配置，符合自己项目的要求
bit init
 
# 引用组件，因为是代码片段，所以完全不关注依赖的包，所以加上两个 flag     --ignore-package-json 不生成 package.json    --skip-npm-install 跳过 npm 安装
bit import share/<component-id> --ignore-package-json --skip-npm-install
 
# 0.0.7 版本以后可以用一个 flag --snippet 打开
bit import --snippet share/<component-id>

最后附上Bit官网:

https://docs.bit.dev/docs/quick-startdocs.bit.dev