bit组件共享

阳光穿透心脏的1/2处 2022-09-05 06:13 252阅读 0赞

### 简介 ###

bit是一种类似于npm的包/组件公共库。由于npm发布的资源、数据全部都是公开的，所以对项目的部分源代码并不适用。同时，bit提供了私有集合，私有集合与公开集合的使用并无任何区别，但是只有管理者（master）与受邀请的开发者（developer）能使用。bit允许每个用户创建一个免费的私有集合。若需要更多的私有集合，需要交付月金。

### 注册 ###

[https://bit.dev/login][https_bit.dev_login]

### 创建集合 ###

创建自己的集合，可以取任何名字，也应该尽可能简便，避免使用时造成不必要的麻烦。本次测试可以创建一个公共集合（public）。私有集合在免费的情况下，一个账户只能有一个。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMyMTg0_size_16_color_FFFFFF_t_70]

### bit初始化及使用 ###

#### 全局安装bit-bin ####

> npm install bit-bin -g

#### 登录 ####

安装完成后，进行登录

> bit login

执行这条命令会弹出网页进行验证，网页会提示验证是否成功

#### 初始化bit ####

> mkdir 项目名称

> cd 项目名称

> bit init

执行完初始化命令后，会在项目根目录下创建一个.bitmap的新文件。该文件包含组件的跟踪信息。包括组件id以及版本号，也会在package.json文件中添加一些新的数据  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMyMTg0_size_16_color_FFFFFF_t_70 1]

> 在package.json添加如下代码：

{ 
      "bit": { 
        "env": { },
        "componentsDefaultDirectory": "src/components/*",
        "packageManager": "npm"
      }
    }

其中env表示配置项信息，componentsDefaultDirectory表示下载存储位置，packageManager为包管理工具

> 此时还需要安装编译器，对其进行编译（不编译亦可），我们在此展示Vue编译器的安装

bit import bit.envs/compilers/vue --compiler

安装完成，结果如下：  
![在这里插入图片描述][766d8696164a41149e3d095af0b657e0.png]

### 文件追踪 ###

命令：

bit add <files> --id <id> --main <filename> --namespace <namespace>

**files**表示要跟踪/上传的组件或文件，可以指定目录或者是具体文件

**id**表示这个组件的名称，一般与文件名称相同，单词之间使用-进行连接，id可以使用/指定命名空间

**filename**表示

**namespace**命名空间，相当于是路径

我这里使用的是全部追踪

bit add src/components/*

> 注意：这里必须先创建src/components，并且在里面添加组件，才能使用上面指令

### 状态查询 ###

status指令能够查询目前的状态

bit status

![在这里插入图片描述][d5e25365b83f478894f172822a8ec481.png]

### 标记 ###

> 全部标记

bit tag --all 0.0.1

> 部分标记

bit tag test1 0.0.3

test1 是component id  
0.0.3是版本号

### 上传 ###

bit export <username>.<collectionname>

**username**指用户名

**collectionname**指集合名

> bit export yueyangniu.test

### 预览 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMyMTg0_size_16_color_FFFFFF_t_70 2]

> 以下内容为引用

### 在新项目中引用 ###

> vue create 项目名称

> cd 项目名称

> bit init（项目初始化）

bit初始化会创建一个.bitmap文件以及在package.json文件中添加一段代码

"bit": { 
        "env": { },
        "componentsDefaultDirectory": "components/*",
        "packageManager": "npm"
      },

> 初始化成功后，引入bit组件

bit import <username>.<collectionname>/<spacename>/<id>

示例：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMyMTg0_size_16_color_FFFFFF_t_70 3]

bit import yueyangniu.test/test1

完成以后，会在package.json里面有这些内容  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMyMTg0_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][f50aa1fcf7df4daaa64242005b7f73a0.png]

> vue使用

<template>
    	<div>
    		<Test1/>
    	</div>
    </template>
    import Test1 from '@bit/yueyangniu.test.test1';
    components: { 
    	Test1,
    }

[https_bit.dev_login]: https://bit.dev/login
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMyMTg0_size_16_color_FFFFFF_t_70]: /images/20220829/ec20916c0e0c480b89bf2befd8d797c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMyMTg0_size_16_color_FFFFFF_t_70 1]: /images/20220829/6b85dcbf026f40a8bbef3b5921f1a26f.png
[766d8696164a41149e3d095af0b657e0.png]: /images/20220829/1ec6d98cd74b449585dc1482a25e0526.png
[d5e25365b83f478894f172822a8ec481.png]: /images/20220829/cc80a9a5ebbf47e5a71bb88cfef71b60.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMyMTg0_size_16_color_FFFFFF_t_70 2]: /images/20220829/0baa2c4d7d3f41e2beeff1edabc1d264.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMyMTg0_size_16_color_FFFFFF_t_70 3]: /images/20220829/0d86b9622567496286574ab5fb19bf42.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMzMyMTg0_size_16_color_FFFFFF_t_70 4]: /images/20220829/fe8ada468b2f42c59203fb548e5b9b75.png
[f50aa1fcf7df4daaa64242005b7f73a0.png]: /images/20220829/4c493c3f74aa44b6b277f28eea256761.png