single-spa 微前端应用程序将在不基于 single-spa 和根配置的遗留 Web 应用程序中使用

Question

我已经基于 single-spa React 创建了一个微前端应用程序。它在独立模式和根配置模式下都运行良好。由于此微前端应用程序将在企业内的多个其他应用程序中 used/consumed。我想知道一种标准方法，使用普通 JavaScript 实例化 MFE，以便现有容器 Web 应用程序（例如 ASP .NET Web 应用程序）可以嵌入此 MFE 并安装相同的使用它的功能。

Answer 1

我不知道 ASP.Net 应用程序的技术细节，因为我自己没有遇到过。所以我的回答会更笼统一些。

所以一般来说，将 Single-SPA 集成到现有应用程序中是相当容易的。烘焙食谱是这样的：

将所需的脚本标记添加到 index.html。 SystemJs、SingleSPA 和您的个人 Importmap。
在您的应用程序中的某处添加 single-spa 启动脚本。它应该看起来像这样：

import { registerApplication, start } from "single-spa";

registerApplication({
  name: "@single-spa/welcome",
  app: () =>
    System.import(
      "@single-spa/welcome"
    ),
  activeWhen: ["/"],
});

start({
  urlRerouteOnly: true,
});

这与您的根配置完全相同。

您可以在申请中的任何时候执行此操作。例如，如果您的“遗留”应用程序是 Angular 应用程序，您可以根据需要在单个组件中启动 single-spa。对于 Angular 我在 here 上写了一个例子。

更大的问题是你应该这样做吗？ single-spa recommended Setup 不推荐使用脚本框架作为父App。但可能会有一些用例，它可以帮助您注意缺点。

single-spa 微前端应用程序将在不基于 single-spa 和根配置的遗留 Web 应用程序中使用

single-spa Micro front End application to be consumed in legacy web application which is not based on single-spa and root config

reactjs

micro-frontend

single-spa