將 Web Component/MFE 與純靜態 HTML 集成-js教程-PHP中文網

Integrate Web Component/MFE with plain static HTML

介紹

在理想的世界中，我們永遠不需要現代化技術堆疊與遺留系統整合的混合解決方案。但我們真的活在一個理想的世界嗎？我經常發現自己需要實施混合方法。我相信你們大多數人都聽說過微前端 (MFE) 以及模組聯合如何成為一個出色的解決方案。但是您知道如何將 MFE 與純靜態 HTML 頁面集成，而不用擔心動態版本更新嗎？換句話說，如何避免每次 MFE 變更時更新消費者 HTML 頁面？我將引導您完成一些簡單的程式碼更改，這些更改可能會改變您的生活（變得更好？）。

入門

使用 SystemJS 函式庫，我們可以無縫整合 Web 元件或 MFE，甚至可以在執行時間匯入任何模組。

第 1 步：將模組匯出為地圖

首先，使用像 Webpack 這樣的模組打包器，將模組匯出為 JSON 格式的對應。 webpack-import-map-plugin 可以輕鬆產生導入映射檔。

雷雷

注意：以上程式碼片段源自 webpack-import-map-plugin 儲存庫

步驟2：載入SystemJS

接下來，透過將 SystemJS 檔案作為常規 JavaScript 檔案匯入來載入它。您可以在自己的 CDN 上託管 s.min.js 的檔案版本或使用現有的託管。

雷雷

步驟 3：匯入地圖 JSON 文件

現在，導入地圖 JSON 文件，以便您的模組可以整合到 HTML 頁面中。導入映射消除了硬編碼 JS 檔案路徑的需要，允許更新導入的模組，而無需更改消費者代碼。

雷雷

注意：如果從不同的來源加載，請使用 crossorigin 屬性。

雷雷

導入地圖檔案範例：

雷雷

第 4 步：載入模組
至此，SystemJS 已加載，並匯入了 MFE/Web 元件模組。現在，是時候載入你的模組了：

雷雷

導入後，您可以根據其類型呼叫模組 - 無論是 Web 元件還是引導的常規 HTML 標籤：

雷雷

結論

透過遵循這些步驟，您可以將微前端或 Web 元件無縫整合到遺留系統中，而無需擔心頻繁更新或版本管理。使用 SystemJS 和導入映射可讓您動態載入和管理模組，確保您的靜態 HTML 頁面以最小的努力保持最新。這種方法提供了一種可擴展且高效的解決方案，用於橋接現代微前端與現有系統，從而使您的架構實現更平穩的過渡和持續的靈活性。