MorJS 小程序形態(tài)一體化 小程序轉(zhuǎn)分包

1、在項(xiàng)目根目錄創(chuàng)建 subpackage.json 文件?

將需要轉(zhuǎn)換為分包的頁面填寫進(jìn)去，如:

{
  "root": "takeout_delicious_food",
  "pages": ["index/index"]
}

注意：當(dāng)前需要業(yè)務(wù)方手動添加該文件，如果需要轉(zhuǎn)換的小程序 app.json 已存在分包配置，需要將分包中的頁面也添加至 subpackage.json 的 pages 中，注意頁面路徑為分包名稱＋路徑，不要寫錯。

2、在 mor.config.ts 文件中增加分包編譯配置?

import { defineConfig } from '@morjs/cli'

export default defineConfig([
  // ?????? 重點(diǎn)看這里：分包編譯配置 ??????
  {
    // 編譯名稱，可隨意修改
    name: 'wechat_subpackage',
    // 源碼類型, 這里以支付寶小程序 DSL 為例
    sourceType: 'alipay',
    target: 'wechat',
    // 指定編譯類型為分包!
    compileType: 'subpackage',
    // 分包只能使用 bundle 打包模式
    compileMode: 'bundle',
    // 如果分包需要使用宿主的 npm 依賴，且不希望該依賴參與打包
    // 可以在 externals 中指定 npm 包的名稱，在項(xiàng)目中正常引用即可
    // 注意：微信環(huán)境下需要自行觸發(fā) 構(gòu)建 NPM 操作
    externals: []
  }
])

完成以上配置后，即可執(zhí)行對應(yīng)的分包編譯，編譯完成后，將對應(yīng)編譯產(chǎn)物文件夾直接放到對應(yīng)的宿主中即可。

3、接入注意事項(xiàng)?

• 分包的打包模式默認(rèn)會查找 mor.subpackage.app.js，如果該文件不存在，則會直接使用 app.js，故小程序轉(zhuǎn)分包如無特別需求可以不使用 mor.subpackage.app.js，如果配置了 mor.subpackage.app.js 則將使用該文件，并忽略 app.js。如果需要兩個文件并存，那么可以考慮把公共邏輯抽象到一個單獨(dú)文件中
• 分包的打包方式，僅提供直接將完整小程序編譯為可直接作為分包運(yùn)行的文件夾，業(yè)務(wù)方接入到微信還有一些內(nèi)容需要適配，差異無法全部抹平，具體參見文檔：《多端差異性總結(jié)》
• 小程序轉(zhuǎn)分包后， app.onLaunch 會在首次打開分包頁面時調(diào)用，app.onShow 以及其他方法如 onError 等 不會被調(diào)用，這塊兒的差異需要業(yè)務(wù)方自行處理
• 分包模式會對 getApp 方法進(jìn)行兜底處理，分包模式下通過 getApp 調(diào)用獲得的 app 為宿主和分包的混合產(chǎn)物，宿主的屬性和方法可以通過 app.$host 獲取，具體邏輯可以查看產(chǎn)物中的 mor.subpackage.global.js 文件
• 分包模式下如果會將 app.acss 注入到各個頁面和組件的樣式中作為引用，原因?yàn)椴糠謽I(yè)務(wù)團(tuán)隊(duì)重度依賴全局樣式
• 業(yè)務(wù)中如有用到自有封裝的 npm package，這部分需要自行確保多端支持
• 如果需要使用宿主已提供的 npm package，可以將對應(yīng)的包名添加到上述配置示例的 externals 中，然后在項(xiàng)目中正常引用即可。如項(xiàng)目中出現(xiàn)此類需求，建議抽象出來一個單獨(dú)的 js 文件，可以通過文件或源代碼緯度的條件編譯來為不同端提供支持，避免造成對業(yè)務(wù)代碼的污染
• 風(fēng)險點(diǎn): 分包沒有固定初始化入口，故為了能夠正常初始化項(xiàng)目代碼，編譯時在每個頁面和組件的 JS 文件頂部引入了初始化的文件，用于確保分包的初始化