哈啰开源Dora：深度解析Taro多业务线小程序协作构建工具与前端协作流

什么是dora

dora是一个哈啰的开源的taro小程序微前端集成框架，具有把多页业务拆分并集成编译与通讯的能力，解耦了业务与业务，降低了总体的复杂度与多业务线合作难度，有轻量化扩展性强等特点。

项目地址：github.com/hellof2e/do... （欢迎star～）

为什么要编写dora

市面上的多仓库协作比如git submoudle，它的使用比较晦涩偏向基础能力直接暴露，业务线同学理解比较困难，比如lerna适合基础库的维护和发布，dora作为多业务线协作工具使用简单，原理清晰，可扩展性强，业务线同学理解容易，也包含了发布代码必须包含master等检测功能，更偏向业务线的场景，所以dora就这样诞生了。

概念定义

dora在父应用根目录创建config.json来管理多个子应用, json内容如下：

subAppName - 子业务的称呼

path - 子仓库在仓库中的位置

tag - git hash

repository - 仓库地址

dora可以创建在项目不同的位置中。

基本使用

安装

$ npm i -g @hellobikefe/dora

指令

使用dora -h查看帮助。

bash 复制代码

命令
Options:
  -V, --version     output the version number
  -h, --help        display help for command
Commands:
  publish           发布子应用代码至父应用
  update [options]  更新子应用
  help [command]    display help for command

接入

config.json & config.ts/js

配置config.json在父应用与子应用中，子应用包含路由和event，父config记录子应用tag path等。在项目初始化的时候可以手动clone子仓库到想要的目录，随后在子应用根目录执行dora publish。

json 复制代码

//父亲仓库config.json
{
  "apps": {
    "doraSubappExample": {
      "configPath": "./src/doraSubappExample/config.ts",
      "path": "./src",
      "repository": "git@github.com:gjc9620/dora-subapp-example.git",
      "subAppName": "doraSubappExample", 
      "tag": "1.0.0-release/1.0.0-1689675708545"
    }
  }
}

子仓库可以参考此配置

package.json

在接入的子仓库的package.json中编写subappname属性。

json 复制代码

{
  "version": "1.0.0",
  "subAppName": "doraSubappExample"
}

babel

增加babel插件执行npm i babel-plugin-macros@3.1.0，随后在config/index中添加如下代码。

javascript 复制代码

const macros = (chain) => chain.merge({
  module : {
    rule : {
      myloader : {
        test : /(node_modules|src).*.(ts|tsx|js|jsx)$/,
        use : [{
          loader : 'babel-loader',
          options : {
            plugins : [
              'macros',
            ],
          },
        }],
      },
    },
  },
});

//增加
webpackChain(chain) {
  macros(chain)
},

到这里配置就完成了。

具体可以参考这2个仓库：

github.com/hellof2e/do... 父应用demo

github.com/hellof2e/do... 子应用demo

版本控制

dora update

dora update把所有subapp的版本切换为父应用中的版本。

dora publish

dora publish在子应用根目录执行dora publish会把当前目录publish到父仓库中去，请确定你拥有父仓库与子仓库的push权限。

事件通讯

dora使用事件通讯来解耦业务线与业务线之间的关系，在subapp的config中可以定义事件来监听整个app的运行周期与自定义事件。

css 复制代码

componentDidShow () {
    doraEvent.emit({
      eventName : 'app:componentDidShow',
      args : {},
    });
  }

javascript 复制代码

event : {
    'app:componentDidShow' : (arg) => {
      console.log('subapp 启动');
      console.log('持续检测用户当前订单是否偏离导航，触发安全机制。');
    },
    'app:componentDidHide' : (arg) => {
      console.log('subapp 启动');
      console.log('推入后台暂停检测');
    },
  },

在小程序componentDidShow时候就会打印以下信息。

子父通讯与桥接

dora使用ctx来桥接父与子仓库的通讯。

setCtx

在父应用中

javascript 复制代码

import useCtx from 'dora/export/useCtx';

setCtx({
  moduleA: ()=>{
    return '我来自父app'
  }
})

useCtx

在子应用中

sql 复制代码

<View className='index'>
  我是subapp的页面
  <View >
    {useCtx().moduleA()}
  </View>
</View>

按业务线编译

dora可以在编译点的时候设置环境变量 process.env.COMPILE_SUB_APP_NAMES来按照需求编译业务线，如果dora启动时有此环境变量那么dora只会集成此变量的业务线，以节约编译打包时间，每个业务线可以只编译自己开发的部分，在大型项目中非常实用，例如

perl 复制代码

//父亲仓库config.json
{
  "apps": {
    "subAppA": {
      "configPath": "./src/doraSubappExample/config.ts",
      "path": "./src",
      "repository": "git@github.com:gjc9620/dora-subapp-example.git",
      "subAppName": "subAppA", 
      "tag": "1.0.0-release/1.0.0-1689675708545"
    },
    "subAppB": {
      "configPath": "./src/doraSubappExample/config.ts",
      "path": "./src",
      "repository": "git@github.com:gjc9620/dora-subapp-example.git",
      "subAppName": "subAppB", 
      "tag": "1.0.0-release/1.0.0-1689675708545"
    },
    "subAppC": {
      "configPath": "./src/doraSubappExample/config.ts",
      "path": "./src",
      "repository": "git@github.com:gjc9620/dora-subapp-example.git",
      "subAppName": "subAppC", 
      "tag": "1.0.0-release/1.0.0-1689675708545"
    }
  }
}

如 process.env.COMPILE_SUB_APP_NAMES ='subAppA,subAppB', dora只会集成subAppA、subAppB的业务线config，subAppC中的路由与config都会被忽略。

原理

dora使用git的tag功能，每次执行publish后就会执行git tag，生产一个tag后会记录在config.json中。当执行update时候，会把所有subapp的版本切换为父应用中的tag版本。

团队协作流

dora推荐的团队协作流程：

（本文作者：顾嘉成）

关注公众号「哈啰技术」，第一时间收到最新技术推文。