在理想的世界中,我們永遠不需要現代化技術堆疊與遺留系統整合的混合解決方案。但我們真的活在一個理想的世界嗎?我經常發現自己需要實施混合方法。我相信你們大多數人都聽說過微前端 (MFE) 以及模組聯合如何成為一個出色的解決方案。但您知道如何將 MFE 與純靜態 HTML 頁面集成,而不用擔心動態版本更新嗎?換句話說,如何避免每次 MFE 變更時更新消費者 HTML 頁面?我將引導您完成一些簡單的程式碼更改,這些更改可能會改變您的生活(變得更好?)。
使用 SystemJS 函式庫,我們可以無縫整合 Web 元件或 MFE,甚至可以在執行時間匯入任何模組。
首先,使用像 Webpack 這樣的模組打包器,將模組匯出為 JSON 格式的對應。 webpack-import-map-plugin 可以輕鬆產生導入映射檔。
// with a Webpack 4 config like: config.entry = { entryName: 'entry-file.js' }; config.output.filename = '[name].[contenthash:8].js'; // Add to plugins new ImportMapWebpackPlugin({ filter: x => { return ['entryName.js'].includes(x.name); }, transformKeys: filename => { if (filename === 'entryName.js') { return 'mfe-module/out-file'; } }, fileName: 'import-map.json', baseUrl: 'https://super-cdn.com/' }); // output import-map.json { "imports": { "mfe-module": "https://super-cdn.com/entryName.12345678.js" } }
注意:以上程式碼片段源自 webpack-import-map-plugin 儲存庫
接下來,透過將 SystemJS 檔案作為常規 JavaScript 檔案匯入來載入它。您可以在自己的 CDN 上託管 s.min.js 的檔案版本或使用現有託管。
<script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.min.js"></script>
現在,匯入地圖 JSON 文件,以便您的模組可以整合到 HTML 頁面中。導入映射消除了硬編碼 JS 檔案路徑的需要,允許更新導入的模組,而無需更改消費者代碼。
<script type="systemjs-importmap" src="/path/to/module-importmap.json">
注意:如果從不同的來源載入,請使用 crossorigin 屬性。
<script crossorigin type="systemjs-importmap" src="/path/to/import-map.json">
匯入地圖檔案範例:
{ "imports": { "mfe-module": "https://super-cdn.com/entryName.12345678.js" } }
第 4 步:載入模組
至此,SystemJS 已加載,並匯入了 MFE/Web 元件模組。現在,是時候載入您的模組了:
<script crossorigin> System.import('mfe-module'); </script>
匯入後,您可以根據其類型呼叫模組 - 無論是 Web 元件還是引導的常規 HTML 標籤:
//web component <mfe-module/> //some regular HTML tag that is bootstrapped. <div id="mfe-module" />
透過遵循這些步驟,您可以將微前端或 Web 元件無縫整合到舊系統中,而無需擔心頻繁更新或版本管理。使用 SystemJS 和匯入映射可讓您動態載入和管理模組,確保您的靜態 HTML 頁面以最少的努力保持最新狀態。這種方法提供了一種可擴展且高效的解決方案,用於橋接現代微前端與現有系統,從而使您的架構實現更平穩的過渡和持續的靈活性。
如果您已經到達這裡,那麼我已盡了令人滿意的努力讓您繼續閱讀。請留下任何評論或要求更正。
以上是將 Web Component/MFE 與純靜態 HTML 集成的詳細內容。更多資訊請關注PHP中文網其他相關文章!