Introduction

Bit是用于组件驱动的开发的标准基础结构。它提供了可扩展的工具链，以模块化和可扩展的方式开发，构建，测试和集成组件。

Bit的工作区使模块化Web项目的分布式开发成为可能，从而将任何Web项目变成由组件组成的“ monorepo”。每个功能都是组件的范围。组件的每个范围都包含其所有者团队需要交付的所有内容：UI组件，数据连接的组件，React钩子，Node模块，甚至是无服务器功能。

在这里推出官网: bit

Juncture

在团队进行项目微服务化的时候，进行到组件的拆分的时候遇到了写问题，主要是多个微项目间的组件共用。

一开始的构想就是集成组件库，已有一个团队组件库，使用的是dumi，但如果在项目间使用，便需要频繁到组件库中修改，而且不方便进行调试。在调研了一番，于是便使用了bit作为组件拆分方案。

使用时很简单，只需要按照官网教程走一遍就行 tutorial

v14 version

老版使用很简单，这里使用的是线上的，具体命令可以参考官网，这里说下大概：

第一个组件

install

1
2
npm install bit-bin -g
bit -v

init

1
bit init

使用init到已有项目进行初始化，会生成配置信息到package.json

add component

1
bit add src/components/product-list

添加组件到bit，可使用bit status进行查看当前信息

1
bit import bit.envs/compilers/react --compiler

添加compiler来准备编译刚添加的组件，官方还提供了许多其他编译器，可以去看看。

build

1
bit build

export

1
bit tag --all

这边使用的指令可以默认标记所有变更过的组件，以等待发布。

1
bit status
1
2
3
4
staged components
(use "bit export <remote_scope> to push these components to a remote scope")

     > product-list. versions: 0.0.1 ... ok

可以看到已经有一个组件准备好发布了

1
bit export <username>.react-tutorial

这边是在官网注册的用户名和Collection,就和GitHub上的username和repository一样

how to use

使用的话也很简单，发布了的组件可以使用几种方式安装。

第一种

直接使用包管理器进行安装，需要切换bit源

1
2
npm login --registry=https://node.bit.dev --scope=@bit
yarn add @bit/<username>.react-tutorial.product-list --save

推荐使用nrm和yrm进行切换，个人包管理工具现在使用的是pnpm，读取的配置也是在npmrc中

第二种

1
2
bit init
bit import <username>.react-tutorial/product-list

package.json会出现以下信息

1
2
3
{
  "@bit/<username>.react-tutorial.product-list": "file:./components/product-list"
}

使用方式都和普通组件差不多

1
import ProductList from '@bit/<username>.react-tutorial.product-list';

区别就在于第二种会把源码也生成在项目中，这时你更改后，重新build一下，在项目内就生效了

更改完再执行下上面几步操作，就可以发布了。

私有化

私有化v14版本不太推荐，因为没有直观的组件预览列表，现在v15 harmony版本支持本地启动预览列表，像下面这样：

workspace ui

可以很直观的看到组件列表信息，点进去还有组件的详细预览、文档、以及测试：

workspace ui component

那么我们第一步就来部署服务器吧

scope hosting with docker

首先需要安装完docker，如果使用普通启动，pm2在后台可能有bug，会一直重新启动。所以推荐使用docker部署私有化服务。

bit-docker地址

1
https://github.com/teambit/bit-docker.git

拉取仓库后切换到harmony-docker分支

1
git checkout harmony-docker

现在便可根据Read.md进行操作，如果有问题可以跳转到这里,可能官方已经修复：
FAQ

编辑scope.json，指定scope的name，就相当于这整个bit私有化的名称。

进入bit-docker文件夹内，运行

下面这两个命令和官方的有点不同，加入了-it，不了解的可以查下这个参数。

1
2
docker build . -t harmony-scope
docker run --rm --name my-scope -dit -p 3000:3000 harmony-scope

现在就可以愉快的查看当前私有化仓库啦，虽然还什么都没有。✨🎉🎉🎉

安装bit

1
2
3
npm install -g @teambit/bit

bbit -v

现在命令是bbit，可能因为安装的包不是正规的途径，官方推荐bvm安装，可惜除了国外的云服务器，国内的好像装不了，使用云服务器的朋友可以试试

bvm安装新版bit

需要导出组件的项目进行初始化

1
bbit init --harmony

进行初始化后workspace.jsonc进行以下的修改, defaultScope改成docker私有库的scope name

1
2
3
4
5
 {
  "teambit.workspace/workspace": {
    "defaultScope": "your scope name"
  }
}

现在添加源

1
bit remote add http://localhost:3000

以下就和官方的新版使用一样啦，明日在更新

新版使用教程

FAQ

docker 配置有点问题，

进行一些小修改

1
2
3
4
5
6
7
8
9
10
11
#init.sh

set -x
apt-get update
#yarn global add @teambit/bitß
#替换成下面这个
yarn global add @teambit/bit

bit init --bare

bit start
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# Setup container
FROM node:current-slim

# Install ssh and bit dependencies
RUN apt-get update
RUN apt-get upgrade -y
RUN apt-get install -y  apt-transport-https gcc make python g++
RUN apt-get install git -y

# Install Bit-harmony
RUN yarn global add @teambit/bit --unsafe-perm=true
RUN ln -s /usr/local/bin/bbit /usr/local/bin/bit

# config bit analytics
RUN bit config set analytics_reporting false
RUN bit config set error_reporting false
RUN bit config set no_warnings true

# Set working directory
RUN mkdir /tmp/scope
WORKDIR /tmp/scope

# Setting up scope
ADD init.sh .
RUN chmod +x init.sh
#下面这行注释掉，不然会报错
#ADD scope.jsonc .
ADD scope.json .

# Run server
EXPOSE 3000
CMD ["/tmp/scope/init.sh"]