将 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 页面以最小的努力保持最新。这种方法提供了一种可扩展且高效的解决方案，用于桥接现代微前端与现有系统，从而使您的架构实现更平稳的过渡和持续的灵活性。