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

【问题标题】：single-spa Micro front End application to be consumed in legacy web application which is not based on single-spa and root configsingle-spa 微前端应用程序将在不基于 single-spa 和 root 配置的遗留 Web 应用程序中使用
【发布时间】：2022-01-23 14:02:31
【问题描述】：

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

【问题讨论】：

请提供足够的代码，以便其他人更好地理解或重现问题。

标签： reactjs micro-frontend single-spa

【解决方案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。但在某些用例中，它可能会帮助您注意缺点。

【讨论】：