fancy杨

介绍

• 方便快捷的 共享 与 同步 组件、代码块、方法、样式等
• 提供可在线编辑组件文档，可视化可在线调试的沙盒环境。bit.dev

本文具体介绍在react项目中的使用

• bit文档 docs.bit.dev/docs/quick-…
• react中使用文档 docs.bit.dev/docs/tutori…

使用带来的好处（优点）

• 对于生产者：

  • 不需要把组件单独复制出来，就可以直接上传bit。

  • Bit基于代码分析使代码打包自动化。以更高的粒度自动打包每个组件，而不会增加维护单独包的开销，自动根据组件依赖关系的变化对组件进行版本控制。

  • 在任何项目中都可以更改组件代码，可以保留使用项目中组件的本地修改，并且仍与传入的更新合并。

  • 每个组件都单独进行版本控制，因此版本号可以反映使用 semver 约定（补丁、次要、主要）在组件中所做的更改。

• 对于消费者：

  • 想要修改组件也不需要clone组件库，而是在项目里就可以直接修改。

  • 可以使用npm / yarn来安装组件，因此它们适合项目开发人员的正常工作流程。

  • 组件的使用者获得较小的包大小，因为他们只获得他们需要的组件

风险和痛点

• 需要规范组件的export流程。
• bit.dev平台建立多个私有仓库收费。
• bit Server 是 bit.dev 的代替工具，是低配版，它能提供的功能只有作为“远程仓库”来存储组件，本地通过 SSH 来与 Bit Server 通信，发布和导入组件就相当于 Bit Server 的存和取操作了。相对的，功能不健全但成本也相对较低，要使用 Bit Server 需要一个服务器就够了。

相关资料介绍 构成等

bit 组件

• 可以是react或vue组件(组件的确切边界是设计决策。可以将整个库打包为单个 Bit 组件或将每个功能部分拆分为单独的组件 一般建议小单位形成组件 方便复用)
• 可以是样式表(css,less,scss)
• 可以是程序使用的常用函数(工具方法)

bit 组件结构 (对于每个组件 bit存储三个元素)

• source code(源代码 代码本身,测试,文档等)
• Dependency graph (依赖图)
  • 添加bit组件时,Bit 会分析它包含的所有依赖项（即代码中的 import 和 require 语句. 然后,Bit 创建了组件所有依赖项的模型. 依赖项包括: (如果依赖项有别名需要在bit配置文件中配置别名)
    • 作为 node_modules 安装的 NPM 包
    • 安装到 node_modules 的bit组件
    • 使用import安装到项目本地的bit组件
    • Bit components created locally from local files(我的理解: 本地创建跟踪的bit组件)
• Tools & Configuration (工具和配置)
  • Compiler 编译或转译原始文件并生成构建的工件。工件可由应用程序或其他组件消费。编译器是特定于框架的, 因为它们包含运行它们所需的配置。
  • Tester

生命周期

1. 生产组件
   • Track(跟踪): 通过指定组成组件的文件，在工作空间内启动组件。在此工作区中，这是一个创作组件
   • Version(版本): 标记版本会密封该版本下的文件内容和元数据。如果组件有编译器，Bit 会构建组件并密封构建的工件（可以将其视为同时进行 git commit 和 npm publish）。
   • Export(导出): 导出组件会为该组件创建一个唯一 ID。唯一 id 是远程作用域名称和本地组件名称。export 命令将文件和元数据的副本发送到远程服务器。
2. 消费组件 (上传之后)
   • Install(安装) 使用npm i/yarn add,将组件添加到package.json中, 作为常规 npm包添加到node_modules
   • Import(导入) 将bit组件导入到工作区, package.json 指向本地文件：”@bit/user.collection.tabs”: “file:./components/tabs”. 代码修改被跟踪并可作为新版本导出。
   • Eject(弹出) 如果导出新版本，则可以恢复到已安装的组件. package.json 更新回”@bit/user.collection.tabs”: “0.0.3”

使用文档

安装bit & BVM & npm config配置

// 1. 下载 BVM  bit版本管理工具
yarn global add @teambit/bvm

// 2. 下载bit
bvm install

// 如果不下 BVM 也可以直接安装bit ( node 版本 >= 8.12 )
npm install bit-bin -g

// 更新 bit
bvm upgrade

// 更新 BVM
yarn global add @teambit/bvm

// 配置npm config 就可以直接用 npm 或者 yarn 下载组件了
npm config set @bit:registry https://node.bit.dev
复制代码

在bit.dev创建账户并创建自己的集合 (名称不可修改 需要记住)

1. 创建集合

2. 填写名称 选择需要的版本和是否公开

初始化项目 并上传项目已有组件到bit.dev

// 首次需要登录到远程 会自动弹出浏览器窗口进行验证
bit login

// 初始化 bit 环境
// --package-manager yarn 设置包管理工具 react推荐用yarn
bit init
复制代码

多种使用场景使用教程

共享现有项目的组件(上传到bit.dev)

案例: react-tutorial

// 案例项目目录
- react-tutorial
    - src
        - components
            - product-list
            - top-bar
        - app.js
        - index.js
    - package.json

1. 初始化 
    bit init --package-manager yarn  

2. 对要分享的组件进行跟踪(track)
    // bit会跟踪组件对组件的依赖进行分析
    // bit将会创建一个和文件名一样的组件
    bit add src/components/product-list
    终端:
    tracking component product-list:
    added src/components/product-list/index.js
    added src/components/product-list/product-list.css
    added src/components/product-list/products.js

3. 查看组件状态
    // bit会分析确保你已经添加了所有的必须文件
    // 这里没有显示缺少文件 如果缺少,就bit add [path][?/filename] 把依赖也添加跟踪
    bit status
    终端: 
    new components
    (use "bit tag --all [version]" to lock a version with all your changes)
    > product-list ... ok
    
4. 下载react Compiler (用来build构建组件,这里是react项目就用react编译器)
    // bit存储组件的源代码, 但是代码仍应该保留在git上
    // bit有大量开源的编译器
    // bit import的组件会在到package.json中留下信息
    // react versions <=16.x.x 使用 @1.0.30  react17 使用 @2.0.0
    bit import bit.envs/compilers/react@1.0.30 --compiler
    终端:
    the following component environments were installed
    - bit.envs/react@1.0.30
    新增项: 
    package.json
    "bit": {
      "env": {
        "compiler": "bit.envs/compilers/react@1.0.30"
      },
      "componentsDefaultDirectory": "components/{name}",
      "packageManager": "yarn"
    }
  
5. Build React Component
    // 打包后的组件可以让组件被自己或其他项目直接使用
    bit build
    
6. 确认组件的版本
   // 组件每次改动完 需要提交到bit时 都要先修改版本 支持Semver的方式 --patch 等
   bit tag --all 0.0.1
   终端:
   1 component(s) tagged
    (use "bit export [collection]" to push these components to a remote)
    (use "bit untag" to unstage versions)
    new components
    (first version for components)
     > product-list@0.0.1

7. 再次检测状态
   bit status
   终端:
   // staged 状态表示组件已经是可以上传的状态
   staged components
    (use "bit export <remote_scope> to push these components to a remote scope")
     > product-list. versions: 0.0.1 ... ok

8. 导出组件到 bit.env 平台
   // 这时候就可以在在 bit 平台看到自己上传的组件了
   bit export <username>.react-tutorial
   终端:
   exported 1 components to scope <username>.react-tutorial

复制代码

在其他项目中使用组件

// 方式一 通过 npm i /yarn add 下载组件到node_modules中 例:
yarn add @bit/<username>.react-tutorial.product-list

// 方式二 通过 bit import (需要项目先 bit init)下载组件代码到项目中 例:
bit import @bit/<username>.react-tutorial.product-list

// 使用 就和普通npm包的使用方式一致
import ProductList from '@bit/<username>.react-tutorial.product-list';

复制代码

在其他项目中修改组件并上传

// 通过 bit import (需要项目先 bit init)下载组件代码到项目中
bit import @bit/<username>.react-tutorial.product-list

// 更改组件的任意代码

// 查看bit组件状态 (modified components 表示修改的组件)
bit status
终端: 
    modified components
(use "bit tag --all [version]" to lock a version with all your changes)
(use "bit diff" to compare changes)

     > product-list ... ok

// 修改组件的版本 (会自动增加一个 --patch版本)
bit tag product-list

// 导出组件到远端集合 (这一步操作后其他项目 就能获取到最新的版本了)
bit export <username>.react-tutorial

复制代码

在现有项目中获取更新

// 比如项目中已有 product-list的0.0.1
// 如果是import导入到项目的组件更新 版本不加就默认取最新
bit import dig-ant.fancy/product-list@版本
// 如果是npm引用的组件更新
npm i @bit/dig-ant.fancy.product-list@版本
复制代码

基本常用命令

// 查看组件基本信息
bit show <id>

// 查看组件的更新日志
bit log <id>

// 查看bit组件列表 (不包含add阶段的组件)
bit list 
bit list <Collection> 查看远程集合上的组件list
bit list --outdated 比较本地和远端组价的版本

// 查看所有本地所有组件的状态
bit status

// 确定组件的版本
// 使用 semver 约定 默认是patch --patch(补丁) --minor(次版本) --major(主版本)
bit tag --all  给所有跟踪的组件(有新的修改的情况下)添加补丁版本(没有修改的组件不会添加)
bit tag <id> <version> 给单个组件添加版本
bit untag 取消版本 代码不会丢失  比如本地一个组件有0.0.2 0.0.3待提交 取消0.0.2版本 代码还在0.0.3中

// 跟踪组件
bit add <file_path> --id <component_id> 跟踪单个组件(如果组件依赖的文件没有追踪 可以把依赖文件也添加到相同组件 或者 变成新的bit组件)
bit add src/components/*  跟踪components下的所有组件

// 删除本地bit组件
bit remove <id>  本地的组件文件不会删除
bit remove dig-ant.fancy/foo/bar --remote 删除远端 dig-ant.fancy集合中的foo下的bar组件

// 本地弹出组件 删除import的组件代码 变成 npm install 导入组件
bit eject (本地是什么版本 eject出就是什么版本,如果本地版本高于远端最新版本 则无法退出)

// 冲突怎么解决
// 例: 本地代码 product-list 0.0.1  在次版本上任意改动内容
// 使用 bit merge 合并冲突  
(和git 合并不大一样 建议 手动解决)
--ours -o	如果发生冲突，请使用当前修改覆盖使用的版本
--theirs -t	如果发生冲突，使用指定版本覆盖当前修改
--manual -m	如果发生冲突，让文件处于冲突状态，以便稍后手动解决
bit merge 0.0.2 product-list --manual
// 解决完冲突定义新的版本 如果本地是比较低的版本做的更新 --ignore-newest-version
bit tag product-list

// 检出 切换版本
// 如果本地版本没有更新 会直接切换到0.0.2 
// 如果本地有更新 会把本地代码合并到 0.0.2 --ours --theirs --manual 选择合并方式(和git 合并不大一样 建议 手动解决 --manual)
bit checkout 0.0.2 product-list 

// 导入组件到本地
bit import bit.examples/foo  导入单个或多个(空格隔开 写多个id)组件
bit import "<owner>.<collection>/*" 导入整个集合下的所有组件
bit import "<owner>.<collection>/<namespace>/*" 导入集合下同一个namespace下的所有组件

// 查看本地更改的bit组件(未打tag)和当前版本的区别
bit diff <id>

// 导出本地组件到远端
bit export <Collection> 
bit export --eject 导出并弹出组件 


复制代码

常用配置

    "bit": {
	"env": {
            "compiler": "bit.envs/compilers/react@1.0.30"
	},
	"componentsDefaultDirectory": "components/{name}",
	"packageManager": "yarn",
        "resolveModules": {
          "modulesDirectories": ["src"],//添加额外的路径来解析组件
          "aliases": {
            "@": "someDir"
          }
        }
    }
复制代码