angularjs - 在独立托管微前端的同时开发微前端 Web 应用程序的最佳方法是什么

Question

我努力了，

1. 单人SPA
2. 网页组件

但是在这两种方式中，我都找不到一种方法来单独开发和部署微前端，然后将那些部署的微前端引用到包装器网络应用程序中。
在我尝试使用上述方法的示例中，微前端在包装器 Web 应用程序中呈现，但是当独立服务时，它们没有按预期呈现。

Answer 1

您无法使用普通的静态站点解决方案来做到这一点。您必须使用一些后端. 问题是您需要动态提供微前端应用程序 (mfa) 的列表，因此您必须至少更改一些内容。

实现这一目标的最简单方法是：

1. 创建一个知道如何动态加载脚本的脚本（我们将其命名为 Loader）（请参阅 参考资料document.createElement）。
2. 创建一个 API 端点，该端点将返回应加载的脚本列表。（这里出现后端）
3. 更新 Loader 以使用 API 获取您要加载的微前端列表。

现在，您的架构应该是这样的：

--> Index.html started
  --> Loader do fetch for the list of the mfa scripts
    --> Loader adds listed scripts dynamically
      --> Applications start working

当您需要更改应用程序列表时，您无需重新部署任何内容。只需更改 API 响应（通过更新数据库、配置或任何您想要的），它就会起作用。

这并不理想（从性能角度来看非常不理想，但适用于普通静态站点）。

更好的方法（如果您有后端）是动态生成页面并将脚本与应用程序动态嵌入服务器端。它更简单并且可能更快，因为您无需等待调用 API 即可获取 mfa 列表。

希望这可以帮助。

PS 使用动态脚本加载可能很危险。如果您决定采用第一种方式，请不要忘记验证所有脚本是否受信任。例如，您可以使用Content-Security-Policy。