将 Web Component/MFE 与纯静态 HTML 集成

介绍

在理想的世界中，我们永远不需要现代化技术堆栈与遗留系统集成的混合解决方案。但我们真的生活在一个理想的世界吗？我经常发现自己需要实施混合方法。我相信你们大多数人都听说过微前端 (MFE) 以及模块联合如何成为一个出色的解决方案。但您知道如何将 MFE 与纯静态 HTML 页面集成，而不用担心动态版本更新吗？换句话说，如何避免每次 MFE 更改时都更新消费者 HTML 页面？我将引导您完成一些简单的代码更改，这些更改可能会改变您的生活（变得更好？）。

入门

使用 SystemJS 库，我们可以无缝集成 Web 组件或 MFE，甚至可以在运行时导入任何模块。

第 1 步：将模块导出为地图

首先，使用像 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 存储库

第2步：加载SystemJS

接下来，通过将 SystemJS 文件作为常规 JavaScript 文件导入来加载它。您可以在自己的 CDN 上托管 s.min.js 的文件版本或使用现有托管。

<script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.min.js"></script>

步骤 3：导入地图 JSON 文件

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

如果您已经到达这里，那么我已尽了令人满意的努力让您继续阅读。请留下任何评论或要求更正。

我的其他博客：

• 如何减少页面加载时间 - 第 1 部分
• 避免 Spring RestTemplate 默认实现以防止性能影响
• 我对 Web 组件的第一手经验 - 学习和限制
• 微前端决策框架
• 使用 Postman 工具测试 SOAP Web 服务

以上是将 Web Component/MFE 与纯静态 HTML 集成的详细内容。更多信息请关注PHP中文网其他相关文章！