在理想的世界中，我们永远不需要现代化技术堆栈与遗留系统集成的混合解决方案。但我们真的生活在一个理想的世界吗？我经常发现自己需要实施混合方法。我相信你们大多数人都听说过微前端 (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中文网其他相关文章！
