哈啰開源Dora：解析Taro多業務線小程式協作建構工具與前端協作流

什麼是dora

dora是一個哈啰的開源的taro小程式微前端內建架構，具有把多頁業務拆分并內建編譯與通訊的能力，解耦了業務與業務，降低了總體的複雜度與多業務線合作難度，有輕量化擴充性強等特點。

項目位址： （歡迎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 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": "[email protected]:gjc9620/dora-subapp-example.git",
      "subAppName": "doraSubappExample", 
      "tag": "1.0.0-release/1.0.0-1689675708545"
    }
  }
}

           

子倉庫可以參考此配置：

package.json

在接入的子倉庫的package.json中編寫subappname屬性。

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

           

babel

增加babel插件 執行npm i [email protected]，随後在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

子應用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推薦的團隊協作流程：

作者:顧嘉成

來源:微信公衆号:哈啰技術

出處:https://mp.weixin.qq.com/s/j3Ze6dYaVIJsU4E3dv7dIg