示例工程【免費(fèi)下載鏈接】module-federation-examplesImplementation examples of module federation , by the creators of module federation項(xiàng)目地址https://gitcode.com/gh_mirrors/mo/module-federation-examples點(diǎn)擊查看免費(fèi)下載本文基于 module-federation-examples 倉(cāng)庫(kù)中的 runtime-plugins/offline-remote 示例展開(kāi)。該示例演示了當(dāng)一個(gè)聯(lián)邦 Remoteapp2完全離線不可用時(shí)宿主應(yīng)用app1如何通過(guò) Runtime Plugin 的errorLoadRemote鉤子以 React 模塊的形式優(yōu)雅地渲染一段錯(cuò)誤提示而不是讓頁(yè)面整體崩潰。讀完本文你將掌握 Module Federation Runtime Plugin 的注冊(cè)方式、errorLoadRemote鉤子的完整簽名與返回約定以及如何在 webpack / rspack 兩套構(gòu)建體系下復(fù)現(xiàn)并驗(yàn)證這一離線容錯(cuò)方案。一、背景聯(lián)邦架構(gòu)中的遠(yuǎn)端不可用問(wèn)題在 Module Federation 的典型架構(gòu)中宿主Host應(yīng)用通過(guò)remotes聲明靜態(tài)或動(dòng)態(tài)的遠(yuǎn)程模塊地址并在運(yùn)行時(shí)按需加載remoteEntry.js。網(wǎng)絡(luò)抖動(dòng)、服務(wù)重啟、版本發(fā)布窗口、灰度流量切換任何一個(gè)環(huán)節(jié)都可能讓遠(yuǎn)端容器暫時(shí)不可用。默認(rèn)情況下如果加載 remote 失敗運(yùn)行時(shí)會(huì)把錯(cuò)誤向上拋出頁(yè)面往往表現(xiàn)為白屏或整塊組件加載失敗用戶得不到任何可解釋的反饋。module-federation-examples 倉(cāng)庫(kù)在 runtime-plugins/README.md 中把 Runtime Plugin 定義為「將產(chǎn)品策略從 Module Federation 核心中移出放進(jìn)可組合的鉤子」核心運(yùn)行時(shí)負(fù)責(zé)穩(wěn)定的加載、共享、快照與工廠執(zhí)行語(yǔ)義而 Runtime Plugin 負(fù)責(zé)定制諸如請(qǐng)求路由、fallback 模塊、共享選擇、資源加載、預(yù)加載行為與遙測(cè)等策略。其中與遠(yuǎn)程策略相關(guān)的鉤子族Remote policy包含beforeRequest、errorLoadRemote、afterLoadRemote而offline-remote正是errorLoadRemote這一鉤子的最小可運(yùn)行范例。二、示例架構(gòu)雙向聯(lián)邦但只啟動(dòng) app1offline-remote目錄下包含兩個(gè)相互引用的應(yīng)用屬于典型的雙向聯(lián)邦bi-directional結(jié)構(gòu)應(yīng)用目錄端口暴露模塊引用對(duì)方app1runtime-plugins/offline-remote/app13001./Buttonapp2http://localhost:3002/remoteEntry.jsapp2runtime-plugins/offline-remote/app23002./Buttonapp1http://localhost:3001/remoteEntry.js演示的關(guān)鍵前提是只啟動(dòng) app1app2 保持離線。當(dāng)瀏覽器訪問(wèn)http://localhost:3001時(shí)app1 嘗試從 3002 端口加載 app2 的remoteEntry.js必然失敗此時(shí)offline-remote插件捕獲錯(cuò)誤并以 React 模塊形式渲染錯(cuò)誤信息。這一結(jié)論在 runtime-plugins/offline-remote/playwright.config.ts 中可以得到印證——它的webServers只配置了{(lán) directory: app1, port: 3001 }這一個(gè)服務(wù)export default createRuntimePluginPlaywrightConfig({ webServers: [{ directory: app1, port: 3001 }], });兩個(gè)應(yīng)用的package.json還刻意制造了版本差異app1 使用react^17.0.2與lodash^4.17.21app2 使用react^16.13.0與lodash^3.10.1并在各自的shared配置中把react、react-dom聲明為singleton: true用于驗(yàn)證共享策略在不同版本依賴共存時(shí)的行為但這與離線容錯(cuò)主線無(wú)關(guān)本文不再展開(kāi)。三、核心實(shí)現(xiàn)errorLoadRemote 鉤子與 fallback 模塊整個(gè)示例的靈魂是 app1 目錄下的插件文件 runtime-plugins/offline-remote/app1/offline-remote.js。它導(dǎo)出一個(gè)工廠函數(shù)返回一個(gè)帶name與errorLoadRemote鉤子的插件對(duì)象export default function () { const getErrorMessage (id, error) remote ${id} is offline due to error: ${error}; const getModule (pg, from) { if (from build) { return () ({ __esModule: true, default: pg, }); } else { return { default: pg, }; } }; return { name: offline-remote-plugin, errorLoadRemote({ id, error, from, origin }) { console.error(id, offline); const pg function () { console.error(id, offline, error); return getErrorMessage(id, error); }; return getModule(pg, from); }, }; }3.1 鉤子簽名errorLoadRemote({ id, error, from, origin })errorLoadRemote是 Module Federation 運(yùn)行時(shí)在加載遠(yuǎn)程模塊失敗時(shí)調(diào)用的策略鉤子。從源碼參數(shù)可以看出它暴露了四個(gè)上下文信息id失敗的遠(yuǎn)程標(biāo)識(shí)。在 e2e 測(cè)試注釋中可以看到啟用asyncStartup后錯(cuò)誤鉤子可能上報(bào)完整的模塊 id例如app2/Button而不僅僅是容器名app2error底層加載錯(cuò)誤對(duì)象被拼接到最終的錯(cuò)誤文案中from加載來(lái)源標(biāo)識(shí)offline-remote.js中區(qū)分了build與非build兩種路徑直接決定了 fallback 模塊的包裝形態(tài)詳見(jiàn) 3.2origin觸發(fā)錯(cuò)誤的原始上下文。該鉤子的返回值將作為加載失敗的替代模塊交付給宿主應(yīng)用從而把「加載失敗」轉(zhuǎn)譯為「一個(gè)可渲染的兜底模塊」——這正是 Runtime Plugin 把策略從核心中剝離出來(lái)的典型體現(xiàn)。3.2from build分支兩種模塊包裝形態(tài)getModule(pg, from)根據(jù)from參數(shù)決定如何包裝兜底內(nèi)容當(dāng)from build時(shí)返回一個(gè)延遲工廠函數(shù)該函數(shù)每次被調(diào)用時(shí)生成{ __esModule: true, default: pg }形式的 ES Module 描述對(duì)象。這種形態(tài)用于構(gòu)建期/模塊描述階段需要標(biāo)記__esModule以兼容轉(zhuǎn)譯后的 ES Module 語(yǔ)義其他情況下直接返回{ default: pg }對(duì)象這是運(yùn)行時(shí)常見(jiàn)的模塊描述形態(tài)。3.3 兜底內(nèi)容本身是一個(gè)渲染時(shí)再報(bào)錯(cuò)的函數(shù)pg被設(shè)計(jì)成一個(gè)函數(shù)調(diào)用時(shí)打印console.error(id, offline, error)并返回getErrorMessage(id, error)拼出的字符串即remote ${id} is offline due to error: ${error}。由于errorLoadRemote返回的模塊會(huì)被宿主當(dāng)作 React 組件來(lái)渲染這個(gè)函數(shù)在 React 中恰好是一個(gè)無(wú)狀態(tài)函數(shù)組件——它在渲染時(shí)返回錯(cuò)誤文本。于是整個(gè)鏈路變成了app1 渲染RemoteButton來(lái)自app2/Button時(shí)觸發(fā)遠(yuǎn)程加載加載失敗 → 運(yùn)行時(shí)調(diào)用errorLoadRemote插件返回一個(gè)「渲染時(shí)才輸出錯(cuò)誤文案」的兜底組件該組件在頁(yè)面上渲染出remote app2 is offline due to error: ...的提示。這樣既繞過(guò)了「加載失敗即拋錯(cuò)」的默認(rèn)行為又保留了錯(cuò)誤信息本身讓用戶看到的是可讀的提示而非空白頁(yè)面。3.4 TypeScript 版本類型化的插件工廠倉(cāng)庫(kù)還提供了同名的 TypeScript 版本 runtime-plugins/offline-remote/app1/offline-remote.ts內(nèi)容非常精簡(jiǎn)但點(diǎn)明了插件類型體系import type { FederationRuntimePlugin } from module-federation/runtime/types; import offlineRemotePlugin from ./offline-remote.js; export default offlineRemotePlugin as () FederationRuntimePlugin;它從module-federation/runtime/types引入FederationRuntimePlugin類型并把 JS 版本的工廠函數(shù)斷言為該類型的工廠。這說(shuō)明在 TypeScript 工程中插件必須滿足FederationRuntimePlugin的結(jié)構(gòu)約束name 若干可選鉤子rspack 配置正是通過(guò)require.resolve(./offline-remote.ts)直接引用這個(gè) TS 文件作為 runtime 插件。四、插件接入webpack 與 rspack 雙配置Runtime Plugin 的接入入口是 ModuleFederationPlugin 的runtimePlugins配置項(xiàng)。該選項(xiàng)接收一組模塊解析路徑構(gòu)建時(shí)這些插件會(huì)被注入聯(lián)邦運(yùn)行時(shí)。4.1 webpack 版本legacywebpack 配置位于 runtime-plugins/offline-remote/app1/webpack.config.js核心片段如下const { ModuleFederationPlugin } require(module-federation/enhanced/webpack); new ModuleFederationPlugin({ experiments: { asyncStartup: true }, name: app1, remoteType: script, library: { type: var, name: app1 }, shareStrategy: loaded-first, filename: remoteEntry.js, remotes: { app2: app2http://localhost:3002/remoteEntry.js, }, runtimePlugins: [require.resolve(./offline-remote.js)], exposes: { ./Button: ./src/Button, }, shared: { ...deps, react: { singleton: true }, react-dom: { singleton: true }, }, }),這里有幾個(gè)關(guān)鍵配置項(xiàng)值得展開(kāi)runtimePlugins: [require.resolve(./offline-remote.js)]通過(guò)require.resolve把插件文件的絕對(duì)路徑交給運(yùn)行時(shí)是插件生效的唯一入口experiments: { asyncStartup: true }啟用異步啟動(dòng)。e2e 測(cè)試注釋專門提到「With async startup the runtime error hook may report the full module id」即異步啟動(dòng)模式下錯(cuò)誤鉤子上報(bào)的 id 粒度可能細(xì)化到app2/Button這樣的模塊級(jí)remoteType: script與library: { type: var, name: app1 }以全局變量方式暴露 remote 容器配合靜態(tài)remotes聲明確保兩應(yīng)用以經(jīng)典 script 方式互相發(fā)現(xiàn)shareStrategy: loaded-first共享依賴采用「已加載優(yōu)先」的解析策略。4.2 rspack 版本默認(rèn)rspack 配置位于 runtime-plugins/offline-remote/app1/rspack.config.js與 webpack 版本的關(guān)鍵差異體現(xiàn)在三處插件類從module-federation/enhanced/rspack導(dǎo)入HTML 插件使用rspack/core的HtmlRspackPluginruntimePlugins引用的是 TypeScript 插件文件runtimePlugins: [require.resolve(./offline-remote.ts)]模塊編譯走builtin:swc-loader.js與.ts分別配置了 JSX 與 TypeScript 解析器React 采用runtime: automatic的自動(dòng) JSX 運(yùn)行時(shí)。兩個(gè)配置在name: app1、filename: remoteEntry.js、remotes.app2、exposes[./Button]、shared策略上保持一致說(shuō)明同一份 Runtime Plugin 邏輯可以在兩套構(gòu)建體系下無(wú)差別工作。app2 的對(duì)應(yīng)配置見(jiàn) runtime-plugins/offline-remote/app2/webpack.config.js 與 runtime-plugins/offline-remote/app2/rspack.config.js其中shared.lodash被顯式聲明為{}不加 singleton 約束用于承載版本差異。4.3 插件鉤子覆蓋面速查根據(jù) runtime-plugins/README.md 的鉤子總覽offline-remote屬于「Remote policy」這一鉤子族的示例與其他示例的覆蓋關(guān)系如下Hook 族Hooks覆蓋示例Remote policybeforeRequest、errorLoadRemote、afterLoadRemoteremote-router、offline-remoteBootstrapbeforeInit、init、applycontrol-sharing、remote-control等Share policybeforeLoadShare、resolveSharecontrol-sharing、multiple-react-versions等Loader policycreateScript、afterLoadEntryremote-routerFactory executiononLoadmultiple-react-versionsPreload policybeforePreloadRemote、generatePreloadAssetsremote-router五、宿主應(yīng)用如何消費(fèi)兜底模塊5.1 組件樹(shù)與 Suspenseapp1 的入口 runtime-plugins/offline-remote/app1/src/index.js 使用經(jīng)典的ReactDOM.render掛載根組件。根組件 runtime-plugins/offline-remote/app1/src/App.js 中遠(yuǎn)程按鈕的消費(fèi)方式如下import RemoteButton from app2/Button; React.Suspense fallbackLoading Button RemoteButton / /React.Suspenseapp2/Button是聲明在remotes中的靜態(tài)遠(yuǎn)程模塊加載被包在React.Suspense中。當(dāng)遠(yuǎn)程加載失敗時(shí)errorLoadRemote返回的兜底模塊會(huì)替代真實(shí)的Button進(jìn)入 Suspense 的渲染流程——它本身是一個(gè)同步函數(shù)組件因此會(huì)立即渲染出remote app2 is offline due to error: ...文本。5.2 使用__FEDERATION__.__INSTANCES__展示在線 RemoteApp.js 中還有一段值得注意的代碼它遍歷聯(lián)邦運(yùn)行時(shí)的實(shí)例列表把當(dāng)前參與聯(lián)邦的應(yīng)用名以哈希顏色塊展示出來(lái){__FEDERATION__.__INSTANCES__.map(inst ( span style{{ padding: 10, color: #fff, background: getColorFromString(inst.name.split().reverse().join()), }} key{inst.name} {inst.name} /span ))}__FEDERATION__.__INSTANCES__是運(yùn)行時(shí)暴露的全局聯(lián)邦實(shí)例集合這一行代碼展示了如何在宿主頁(yè)面內(nèi)直接觀測(cè)運(yùn)行時(shí)注冊(cè)了哪些聯(lián)邦實(shí)例可作為排查 remote 是否被正確發(fā)現(xiàn)的輔助手段。頁(yè)面中的 Reset 按鈕會(huì)清空l(shuí)ocalStorage中的button鍵并刷新頁(yè)面用于復(fù)位 app2 按鈕此前寫入的持久化狀態(tài)見(jiàn) runtime-plugins/offline-remote/app2/src/Button.js 中的localStorage.setItem(button, green)。六、運(yùn)行方式與端到端驗(yàn)證6.1 包管理與啟動(dòng)腳本整個(gè)示例通過(guò) runtime-plugins/offline-remote/package.json 以 pnpm workspace 管理兩個(gè)應(yīng)用常用命令如下命令作用pnpm start僅啟動(dòng) app1offline-remote_app1用于演示離線場(chǎng)景pnpm start:both并行啟動(dòng) app1 與 app2pnpm build并行構(gòu)建兩個(gè)應(yīng)用pnpm serve以靜態(tài)服務(wù)器分別服務(wù)兩應(yīng)用構(gòu)建產(chǎn)物pnpm legacy:start使用 webpack 配置而非默認(rèn) rspack啟動(dòng)pnpm e2e:ci構(gòu)建后運(yùn)行 Playwright 端到端測(cè)試默認(rèn)啟動(dòng)命令為rspack serve -c rspack.config.js構(gòu)建命令為rspack build --mode production -c rspack.config.js對(duì)應(yīng)的 webpack 版本由legacy:start/legacy:build提供。演示離線場(chǎng)景只需執(zhí)行pnpm start然后訪問(wèn)http://localhost:3001頁(yè)面標(biāo)題為 Offline Remote下方會(huì)展示當(dāng)前聯(lián)邦實(shí)例名與本地按鈕而遠(yuǎn)程按鈕區(qū)域渲染的是離線錯(cuò)誤提示。6.2 e2e 測(cè)試斷言測(cè)試文件 runtime-plugins/offline-remote/e2e/checkAutomaticVendorApps.spec.ts 把離線行為固化為可回歸的斷言斷言 H1 標(biāo)題 Offline Remote 與 H2 標(biāo)題 Remotes currently in use 可見(jiàn)斷言本地按鈕App 1 Button可見(jiàn)且背景色為rgb(136, 0, 0)對(duì)應(yīng) runtime-plugins/offline-remote/app1/src/Button.js 中background: #800的樣式斷言頁(yè)面出現(xiàn)匹配/remote app2(\/Button)? is offline/i的文本這正是errorLoadRemote返回的兜底組件渲染出的錯(cuò)誤文案正則中的可選組(\/Button)?兼容了異步啟動(dòng)模式下模塊級(jí) idapp2/Button與容器級(jí) idapp2兩種上報(bào)粒度。Playwright 配置復(fù)用了 runtime-plugins/playwright.base.ts 提供的createRuntimePluginPlaywrightConfig工廠僅在webServers中聲明 app1從而保證測(cè)試環(huán)境與「app2 離線」的演示前提一致。七、生產(chǎn)實(shí)踐要點(diǎn)基于對(duì)離線容錯(cuò)插件的完整剖析可以沉淀出以下可直接遷移到生產(chǎn)項(xiàng)目的實(shí)踐要點(diǎn)把「加載失敗」轉(zhuǎn)譯為「可渲染兜底」errorLoadRemote的返回值是替代模塊最小實(shí)現(xiàn)是返回一個(gè)函數(shù)組件渲染時(shí)輸出可讀文案同時(shí)用console.error保留錯(cuò)誤現(xiàn)場(chǎng)復(fù)雜的生產(chǎn)實(shí)現(xiàn)可以在此返回更完整的占位組件、重試按鈕甚至降級(jí)數(shù)據(jù)流。兼容from的兩種加載來(lái)源插件代碼中from build分支提醒我們運(yùn)行時(shí)存在構(gòu)建期與運(yùn)行期兩種模塊獲取路徑兜底模塊的包裝形態(tài)需要分別處理否則可能出現(xiàn)__esModule語(yǔ)義或模塊工廠形態(tài)不匹配的問(wèn)題。區(qū)分容器級(jí)與模塊級(jí)的錯(cuò)誤 id啟用experiments.asyncStartup后id可能攜帶app2/Button這樣的完整模塊路徑錯(cuò)誤文案與日志統(tǒng)計(jì)的解析邏輯應(yīng)兼容兩種粒度。插件與構(gòu)建體系解耦同一個(gè)插件邏輯既可以在 webpack 的module-federation/enhanced/webpack下通過(guò)runtimePlugins: [require.resolve(./offline-remote.js)]接入也可以在 rspack 的module-federation/enhanced/rspack下通過(guò)runtimePlugins: [require.resolve(./offline-remote.ts)]接入且兩者共享相同的運(yùn)行時(shí)行為——這意味著插件代碼本身與打包器無(wú)關(guān)只需滿足FederationRuntimePlugin類型約束即可。用端到端測(cè)試固化離線行為把「遠(yuǎn)端離線時(shí)頁(yè)面渲染特定錯(cuò)誤文案」寫成 Playwright 斷言并讓測(cè)試服務(wù)只啟動(dòng)宿主應(yīng)用就能持續(xù)守護(hù)這一容錯(cuò)能力不被后續(xù)改動(dòng)破壞。如需繼續(xù)深入可對(duì)照閱讀同目錄下的其他 Runtime Plugin 示例runtime-plugins/control-sharing、runtime-plugins/remote-router、runtime-plugins/multiple-react-versions 等它們分別演示了共享解析、請(qǐng)求路由、腳本加載、預(yù)加載與多版本 React 共存等不同鉤子族可幫助你拼出 Runtime Plugin 能力的完整版圖。贊分享示例工程【免費(fèi)下載鏈接】module-federation-examplesImplementation examples of module federation , by the creators of module federation項(xiàng)目地址https://gitcode.com/gh_mirrors/mo/module-federation-examples點(diǎn)擊查看免費(fèi)下載相關(guān)推薦LeetCode算法極限性能優(yōu)化10個(gè)高效實(shí)現(xiàn)策略與多語(yǔ)言解決方案指南LeetCode算法極限性能優(yōu)化10個(gè)高效實(shí)現(xiàn)策略與多語(yǔ)言解決方案指南 LeetCode算法刷題是程序員提升編程能力的必經(jīng)之路但如何在有限時(shí)間內(nèi)實(shí)現(xiàn)最優(yōu)解示例工程Module Federation 運(yùn)行時(shí)插件實(shí)戰(zhàn)remote-control 示例中基于 Runtime Plugin 的動(dòng)態(tài)遠(yuǎn)程控制 Remote 加載Module Federation 運(yùn)行時(shí)插件實(shí)戰(zhàn)remote control 示例中基于 Runtime Plugin 的動(dòng)態(tài)遠(yuǎn)程控制 Remote 加載示例工程Module Federation 實(shí)戰(zhàn)用 Vite Angular 構(gòu)建 host/remote 微前端module-federation-vite-angular 示例解析Module Federation 實(shí)戰(zhàn)用 Vite Angular 構(gòu)建 host/remote 微前端module federation vite示例工程上一篇3個(gè)核心痛點(diǎn)為什么你的Mac多任務(wù)處理效率低下下一篇bup cat-file 深度指南從 bup 歸檔中低層提取文件內(nèi)容、元數(shù)據(jù)與 .bupm 目錄清單創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考