【第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
这期前端早读课
对你有帮助,帮” 赞 “一下,
期待下一期,帮” 在看” 一下 。