【第3023期】哈啰Dora：深度解析Taro多业务线小程序协作构建工具与前端协作流
前言
主要介绍了哈啰开源的 Dora 工具，它是一个 Taro 小程序微前端集成框架，能够将多个业务拆分并集成编译与通讯。Dora 的特点包括轻量化扩展性强，能够降低业务之间的耦合，简化多业务线合作难度。今日前端早读课文章由 @顾嘉成分享，公号：哈啰技术授权。
正文从这开始～～
什么是 dora
dora 是一个哈啰的开源的 taro 小程序微前端集成框架，具有把多页业务拆分并集成编译与通讯的能力，解耦了业务与业务，降低了总体的复杂度与多业务线合作难度，有轻量化扩展性强等特点。
项目地址：https://github.com/hellof2e/dora
为什么要编写 dora
市面上的多仓库协作比如 git submoudle，它的使用比较晦涩偏向基础能力直接暴露，业务线同学理解比较困难，比如 lerna 适合基础库的维护和发布，dora 作为多业务线协作工具使用简单，原理清晰，可扩展性强，业务线同学理解容易，也包含了发布代码必须包含 master 等检测功能，更偏向业务线的场景，所以 dora 就这样诞生了。
【第2980期】Quark，再起航！哈啰 Quarkc 正式开源，低成本构建跨技术栈前端组件！
概念定义
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 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。
//父亲仓库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"
}
}
}子仓库可以参考此配置：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 个仓库：
父应用 demo：https://github.com/hellof2e/doraAppExample
子应用 demo：https://github.com/hellof2e/doraSubappExample
版本控制
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 推荐的团队协作流程：
关于本文
作者：@顾嘉成
原文：https://mp.weixin.qq.com/s/j3Ze6dYaVIJsU4E3dv7dIg
这期前端早读课
对你有帮助，帮” 赞 “一下，
期待下一期，帮” 在看” 一下 。