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

什么是dora

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

项目地址：https://github.com/hellof2e/dora （欢迎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查看帮助。

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

接入

config.json & config.ts/js

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

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


子仓库可以参考此配置：

https://github.com/hellof2e/doraAppExample/blob/23df5ef592b8c9dab8fa19d15f76ed516fd263fb/src/app.config.ts#L38

package.json

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

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


babel

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

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个仓库：

https://github.com/hellof2e/doraAppExample  父应用demo

https://github.com/hellof2e/doraSubappExample  子应用demo

版本控制

dora update

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

dora publish

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

事件通讯

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

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

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

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

子父通讯与桥接

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

setCtx

在父应用中

import useCtx from 'dora/export/useCtx';
setCtx({ moduleA: ()=>{ return '我来自父app' }})

useCtx

在子应用中

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

原理

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

团队协作流

dora推荐的团队协作流程：

The End

如果你觉得这篇内容对你挺有启发，请你轻轻点下小手指，帮我两个小忙呗：

1、点亮「在看」，让更多的人看到这篇满满干货的内容；

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

如果喜欢就点个👍喔，有您的喜欢⛽，我们会更有动力输出有价值的技术分享滴。