ebit - 源码复用 bit 工作流

Posted 2021-08-14 张驰Terry

本文作者：乾元，快手效率工程资深前端技术专家，拥有 10 年开发经验，熟悉 javascript 相关的开发工作，深耕于数据可视化、软件架构和前端工程化领域，深入研究 TypeScript。

源码复用

几乎所有 Web 前端项目代码都是需要经过工具编译打包之后才能运行在浏览器端，直接复用其他项目的源码是一个行之有效的、不会增加额外构建成本的手段。

在之前的「由组件复用到 bit 适用场景」文章里讲到过，Ctrl C & Ctrl V、Git Submodule、MonoRepo 都是源码复用的手段；事实上，也可以把源码以 Node Module 形式安装、复用——仅需要配置 webpack Xloader、include 特定的目录——这实际也就是 bit （可以）搞的事情。

ebit 工作流

我们 fork 了 bit 官方 repo（修复了一些 bug 并新增 feat，ebit），结合自身业务实践，明确了 bit の定位，制定了 ebit 工作流。

bit の定位

源码复用の工具

实际上先有“源码复用”业务诉求，后给的 bit 源码复用工具的定位；并因这个定位，我们实际上可以并不需要关注和引入 bit compiler、build、test 等工具、流程，生产和消费都是基于源码的。

模块管理の工具

我们通过 .bitmap 文件维护消费组件的信息，并避免将其写入到 package.json dependencies 里，如此 npm 和 bit 是完全两套独立且并行的模块管理体系和工具。

ebit 工作流

安装 ebit-bin，通过 eb 缩写调用

npm i -g ebit-bin

配置别名

以下别名配置关联，比如都有指向 src：

• 配置 tsconfig.json

{
  "compilerOptions": {
    "baseUrl": "src",
    "paths": {
      ...aliases
    }
  }
}

• 配置 webpack resolve 别名：
  • npm i -D @ekit/tsconfig-paths-webpack-plugin
  • 配置 webpack resolve

const TsconfigPathsPlugin = require("@ekit/tsconfig-paths-webpack-plugin");

{
  resolve: {
    plugins: [
      new TsconfigPathsPlugin({
        exclude: path.join(process.cwd(), "components"),
      }),
    ];
  }
}

• 配置 bit.json

{
  "resolveModules": {
    "modulesDirectories": [
      "src"
    ],
    "aliases": {
      ...aliases
    }
  }
}

• 如使用 sass，配置环境变量，需遵循：
  • 仅通过绝对路径格式引用 src 目录下其他 scss 资源，如 @import 'styles/mixins'
  • 仅通过 @import '~bootstrap/x.scss' 引用 node_modules 内 scss 资源

SASS_PATH=node_modules:src

• 如使用 less，无需特殊配置，需遵循：
  • 仅通过相对路径引用其他 less 资源，如 @import '../../styles/mixins'，不要使用别名（bit + less 的陷阱） less issue
  • 仅通过 @import '~bootstrap/x.less' 引用 node_modules 内 less 资源

生产组件准则

通过 bit export 将生产的组件源码推送到远端 bit server，并不发布到 npm

消费组件准则

通过 bit import 消费组件，跳过安装被消费组件依赖（npm install），把组件的依赖当做消费项目的 peerDependencies 处理

• 消费特定版本的指定组件

eb import --skip-npm-install --override --skip-save-dependencies my-test/namespace/id@(version)

以上命令简写为：

ebi my-test/namespace/id@(version)

• 消费最新版本的指定组件：

eb import --skip-npm-install --override --skip-save-dependencies my-test/namespace/id

以上命令简写为：

ebi my-test/namespace/id

• 切换消费组件的版本

eb checkout --skip-npm-install --skip-save-dependencies (version) ef-cp-desgin/namespace/id

以上命令简写为：

ebc (version) ef-cp-desgin/namespace/id

• 使用组件

ebi 或者 bit import 的时候，会将消费组件以 node module 的形式链接到 node_modules 目录

import XXX from "@bit/my-test.collection.id";

安装所有依赖和消费组件

先：

npm i

然后：

ebi

ebi 命令会去扫描 .bitmap 文件，遵循以下逻辑：

• 过滤出所有 origin 是 IMPORTED 的组件，消费指定的版本，使用 --override 配置拉取远端最新代码
• 过滤出所有安装目录不是 bit.json 指定的 componentsDefaultDirectory 的组件，会使用 '--merge ours' 配置合并本地和远端代码（本地覆盖远端）

ebi 大致の实现：

eb config set analytics_reporting false
eb init
eb remote add ssh://[e-mail]:/data/bit/xxxx
cps=$(node -e """
/* eslint-disable @typescript-eslint/no-var-requires */
const fs = require('fs');
const JSON5 = require('json5');

const bitmap = JSON5.parse(fs.readFileSync('./.bitmap', { encoding: 'utf-8' }));
console.log(
  Object.keys(bitmap)
    .reduce((ids, id) => {
      if (id !== 'version') {
        const { origin } = bitmap[id];
        if (origin === 'IMPORTED') {
          ids.push(id);
        }
      }
      return ids;
    }, [])
    .join(' ')
);

""")
if [[ "$cps" != "" ]]; then
  eb import --skip-npm-install --override --skip-save-dependencies $cps
fi