2020-04-10 teambit / bit 介绍

缘起

项目组用到了vue angularjs angular 等多种js框架，一些组件零散的分布在各个子项目中。有些项目是从别的部门收编过来的，现在统一维护，如何去管理这些零散的组件，做到组件的复用。项目组当前的解决方案如下：

1. webpack配置成多入口，需要复用的组件单独打成入口chunk。app中使用动态的script标签插入到页面中，暴露全局变量在window下。（传统的js包的用法）
2. iframe嵌套webpack插件html-webpack-plugin打出来的html使用。可以防止命名冲突

在现有的基础上我能想到的一些优化

• 暴露到全局的变量名的优化。统一命名规则 子系统_包名_方法名
• 使用npm私服verdaccio，把组件发布成node_modules包（使用webpack 打包成umd）npm发布的包名不能重复，可以有效控制组件重名问题

直到我看到teambit / bit这个项目

• github源码
• 文档
• 官网

他说

Bit is an open-source cli tool for collaborating on isolated components across projects and repositories.
Use Bit to distribute discrete components from a design library or a project into a standalone reusable package and utilize it across applications.
You can set up your own server for components collaboration, or use the bit.dev cloud hosting for private and public components sharing.
（翻译：bit是开源的命令行工具，用来解决跨项目和跨仓库的组件协作。使用它可以将分散在各个项目中组件分发到独立的可重用的包中，您可以设置自己的服务器来进行组件协作，也可以使用bit.dev云托管进行私有和公共组件共享。
）

这跟我在工作中遇到的问题一致

1. 组件在各个子项目中分散，代码库分散
2. 没有统一管理
3. 没有分发成独立的组件库
4. 界面风格领导要求各项目统一
5. 能跟各种框架ts js vue angularjs react融合

他可以聚合管理组件，且跟我当前的理念一致

1. 组件不是无中生有，暗度陈仓，凭空想象，凭空捏造的
2. 项目还没启动，搞个UI小组专门做组件，强制各个子项目使用他的组件，做出来的组件质量不高，没人敢用，谁用谁是小白鼠。让你改个BUG，不如我重写来的快，子项目组件对业务有高度定制化，在设计的时候根本考虑不到，你来适配组件就不通用，组件通用后我需要搞一堆参数来配置。在巨大的人力财力投入下（写组件的一般都是三年开发经验起步的工程师，比较贵），又造了个类似于iview,elementUI之类的轮子，关键还没人家质量高，气不气！！！（吐槽下我之前的项目组）
3. 组件化，是在需要重用的时候不写第二遍，不Ctrl+C V,而是封装抽象出来

盘他

1.安装bit(客户端)

npm install bit-bin --global
yarn global add bit-bin

2.bit git??

我猜这工具作者参考了git的设计，组件有版本管理，不然干嘛取这个名字

3.bit 如何工作

• bit 分为服务器跟客户端，跟git类似，协作嘛，总是要个服务器的。
• bit 组件由三个部分组成。源代码（包含文档与资源），依赖树，工具与配置。
• bit 组件需要制定一个唯一的入口

4.bit生命周期

• 创建组件

初始化bit空间：bit init
添加组件bit add ./src/components/*

• 打包编译

安装编译器 bit import bit.envs/compilers/babel --compiler
--compiler 命令代表安装的这个bit包作为编译器使用
bit build [my-component-name]

• 发布版本

打版本号：bit tag [my-component-name] [version]
不加版本号，是自增。不写组件名是全部组件。这个命令会重新编译bit build的。

• 导出到远程服务器

bit export [remote-server]不加remote-server 默认是发布到bit.dev

• 安装组件
  作为node_modules依赖安装 npm install @bit/owner.collection.namespace.namespace.comp-id
• 导入组件 bit import
  导入后可以修改。此时package.json中的组件指向的是本地文件，而不是node_modules中。
  修改然后再发布新版本，此时远程服务器上的组件就有新版本了。
  这里达到了多个项目同时管理一个组件了

5.bit.dev

这个是bitteam提供的一个组件托管服务器，可以理解成git跟github的关系
可惜bit暂不支持私有化部署
也就是说没有类似于gitlab的bitlab项目可以提供给咱们使用，看不到组件聚合展示
但是bit支持自己的远程仓库一个启动ssh协议的服务器就可以了（win10自带SSH客户端,SSH服务要单独安装，下一篇文章写《win10下安装OpenSSH服务器》），有linux系统会方便些
添加远程仓库 bit remote add ssh://bit-username@bit-server:/opt/bit/first-scope
导出bit组件到远程仓库 bit export first-scope

说这么多的概念不如整个例子

1. 下载 https://github.com/teambit/bit-vue-tutorial 这个项目
2. 安装项目依赖npm i
   
   image.png
3. 初始化 bit工作空间bit init，提问是否帮助bit改进，是否发送错误日志，我这里都选的否
   
   image.png
4. bit add跟踪我们的组件
   
   image.png
   
   报错了，没成功，说是没有找不到组件的入口，实际上我们要导出的是两个组件，一个 product-list 一个top-bar，将这些文件当一个组件处理肯定是不对的，咱们这么处理下

bit add ./src/components/ProductList/* --id product-list --main ProductList.vue

image.png

5. 看下状态bit status
   
   image.png
   
   6.编译打包bit tag，这里是vue单文件，官方提供了编译器给我们用，我们搞了两个组件，要告诉bit打包哪一个，否则加上--all全部打版本。
   
   image.png
   
   没有去安装vue的编译器，是因为他这DEMO已经帮我们配置了编译器，否则我们需要执行 bit import bit.envs/compilers/vue --compiler
   
   image.png
   
   
   image.png

7.发布组件bit export这里要在https://bit.dev/上注册用户，并创建组件集合。我这里alasq是用户名alasq-ui是集合名称，也可以叫namespace 。注册好用户 先bit login一下，后面去export就不用输入账号密码了。

image.png

8. 看下成果

image.png

image.png

总结

bit这个项目的创意确实能解决项目中的实际问题，但是我在公司内网的环境下，基本上无法正常使用它的功能。主要原因是@bit/XXX 下面包是部署在他们自己的bit.dev服务上的，而不是托管在npm服务上，而内网下不能访问他们的服务。如果能访问到他们的网络也需要设置下npm config set @bit:registry https://node.bit.dev

Bit距离推广开来还差一个BitLab

bit适用于前端项目集群，适合体量很大的公司（BAT之类的）
但是这种公司用的工具都是需要能私有化部署的。
而小型企业总共就那么几个前端项目,没必要用他。