TL;DR： 使用 single-spa 构建微前端可以更轻松地将大型应用程序拆分为小的独立部分，以便不同的团队可以在不影响其他团队的情况下处理各个部分。本博客展示了如何创建 Angular 和 React 微前端、将它们连接到根配置并进行部署。

微前端已成为扩展前端应用程序的流行架构风格，特别是当多个团队在用户界面的不同部分工作时。通过将整体前端分解为更小的独立模块，团队可以单独部署、更新和扩展应用程序的各个部分。本文将讨论如何使用 single-spa 创建和连接不同框架的微前端。

单水疗中心简介

Single-spa是一个基于JavaScript的框架，专为微前端架构设计。它允许您使用 Angular、React 和 Vue 等框架构建微前端，并将它们作为单个应用程序提供服务。它维护连接的应用程序的注册并使用路由将用户重定向到不同的应用程序。

使用单SPA框架有很多好处，例如为应用程序的不同部分选择不同的语言、微前端的独立开发和部署以及可扩展性。那么，让我们开始创建一个单一的 Spa。

创建单一水疗中心

先决条件

要实现单一spa，安装Node.js和npm非常重要。要安装它们，请访问 Node.js 网站并下载适合您的操作系统的最新版本。运行安装程序以完成安装。

然后，通过在命令提示符中执行以下命令来验证node.js和npm安装。

npm - version
node - version

第 1 步：设置项目

在此示例中，将使用 Angular 和 React 创建两个简单的微前端。根配置将为两个微前端提供服务。

创建一个应用程序

我们可以通过执行以下命令来创建一个简单的 Angular 微前端应用程序。

ng new angular-spa-frontend

创建项目后，执行下一个命令来安装 single-spa 库。

ng add single-spa-angular

正确安装库后，将在 Angular 项目中创建一个名为 main.single-spa.ts 的文件，其中包含与 single-spa 相关的所有配置。

参考配置代码。

if (environment.production) {
 enableProdMode();
}

const lifecycles = singleSpaAngular({
 bootstrapFunction: (singleSpaProps) => {
  singleSpaPropsSubject.next(singleSpaProps);

  const extraProviders = [
   ...getSingleSpaExtraProviders(),
   { provide: APP_BASE_HREF, useValue: '/' }
  ];

  return platformBrowserDynamic(extraProviders).bootstrapModule(AppModule);
 },
 template: '',
 Router,
 NavigationStart,
 NgZone,
});

export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;

需要提供APP_BASE_HREF值才能作为单个spa工作。

此外，添加单 Spa 库后，package.json 将包含两个附加脚本。

"scripts": {
  "ng": "ng",
  "start": "ng serve",
  "build": "ng build",
  "watch": "ng build --watch --configuration development",
  "test": "ng test",
  "build:single-spa:angular-spa-frontend": "ng build angular-spa-frontend --prod",
  "serve:single-spa:angular-spa-frontend": "ng s --project angular-spa-frontend --disable-host-check --port 4200 --live-reload false"
 }

angular.json 文件将使用以下配置进行修改。

"build": {
   "builder": "@angular-builders/custom-webpack:browser",
   "options": {
      "outputPath": "dist/angular-spa-frontend",
      "index": "src/index.html",
      "main": "src/main.single-spa.ts",
      "polyfills": "src/polyfills.ts",
      "tsConfig": "tsconfig.app.json",
      "inlineStyleLanguage": "scss",
      "assets": [
       "src/favicon.ico",
       "src/assets"
      ],
      "styles": [
       "src/styles.scss"
      ],
      "scripts": [],
      "customWebpackConfig": {
       "path": "extra-webpack.config.js",
       "libraryName": "angular-spa-frontend",
       "libraryTarget": "umd"
      },
      "deployUrl": "http://localhost:4200/"
     },

}

“main”: “src/main.ts” 将替换为 “main”: “src/main.single-spa.ts”。新的构建配置将作为 JavaScript 模块添加。

配置完成并验证后，我们可以使用以下命令提供 Angular 应用程序。

npm run serve:single-spa:angular-spa-frontend

现在我们已经成功创建了微前端应用程序，让我们看看如何实现root-config.

根配置

执行以下命令创建root-config。

npx create-single-spa

输入此命令后，将出现一系列配置来创建根配置。

选择之前的配置后，将创建根配置来服务多个前端。

要将创建的微前端连接到root-config，我们需要修改root-config.ts和index.ejs文件。

registerApplication({
 name: "@org/angular-spa-frontend",
 app: () =>
  System.import("@org/angular-spa-frontend")
   .then((module: LifeCycles) => ({
    bootstrap: module.bootstrap,
    mount: module.mount,
    unmount: module.unmount,
   }))
   .catch((error) => {
    console.error("Failed to load micro-frontend:", error);
    return Promise.reject(error);
   }),
  activeWhen: ['/'],
});

start({
 urlRerouteOnly: true,
});

如前面的代码块中所述，创建的微前端应导入到root-config.ts文件中。

name: "@org/angular-spa-frontend",

以下脚本应添加到index.ejs文件中。

创建了微前端 ( @org/angular-spa-frontend )，以及 URL ( http://localhost:4200/main.js )，其中微前端前端已托管，必须添加到导入映射中。

然后，执行以下命令来运行应用程序。

npm run start

假设这些步骤正确完成，我们应该能够在视图中看到最终的单 Spa，类似于下图。

第 2 步：生产中部署

在生产中部署这些微前端时，建议将每个微前端应用程序部署为独立的应用程序。根配置可能会动态加载每个应用程序，具体取决于 registerApplication.

第 3 步：添加更多微前端

要添加更多微前端，请重复前面提到的步骤。让我们看看如何将 React 微前端集成到同一个根配置中。

使用以下命令创建一个新的 React 微前端。

npx create-single-spa --module-type react

然后，在创建的项目中导航并安装 single-spa-react。

npm install single-spa-react

修改入口文件导出生命周期方法，使应用兼容single-spa。

import React from "react";
import ReactDOM from "react-dom";
import singleSpaReact from "single-spa-react";
import App from "./App";

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: App,
  errorBoundary(err, info, props) {
    return 
Error loading React micro-frontend
;
  },
});

export const { bootstrap, mount, unmount } = lifecycles;

配置完成后，我们可以使用以下命令为React微前端提供服务。

npm start

要将创建的微前端与现有的 root-config 集成，请对 root-config 中的文件进行以下修改。

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

registerApplication({
  name: "@org/angular-spa-frontend",
  app: () =>
    System.import("@org/angular-spa-frontend")
      .then((module) => ({
        bootstrap: module.bootstrap,
        mount: module.mount,
        unmount: module.unmount,
      }))
      .catch((error) => {
        console.error("Failed to load Angular micro-frontend:", error);
        return Promise.reject(error);
      }),
  activeWhen: ["/"],
});

registerApplication({
  name: "@org/react-spa-frontend",
  app: () =>
    System.import("@org/react-spa-frontend")
      .then((module) => ({
        bootstrap: module.bootstrap,
        mount: module.mount,
        unmount: module.unmount,
      }))
      .catch((error) => {
        console.error("Failed to load React micro-frontend:", error);
        return Promise.reject(error);
      }),
  activeWhen: ["/react"], 
});

start({
  urlRerouteOnly: true,
});

您还需要使用 React 应用程序的主包路径更新 index.ejs 文件。

GitHub 参考

在此 GitHub 演示中查看此单 Spa 应用程序的完整代码示例。

结论

使用 single-spa 构建微前端可以更轻松地将大型应用程序拆分为小的独立部分。这样，不同的团队就可以在不影响其他团队的情况下工作，并使用他们喜欢的框架，例如 Angular 或 React。按照本指南中的步骤，您可以设置单 SPA 项目，连接多个微前端，并为用户提供流畅的体验。 Single-spa 让您可以轻松地随着时间的推移扩展您的应用程序并根据需要添加新功能。

相关博客

• 使用 RxJS 掌握异步 JavaScript
• Axios 和 Fetch API？选择正确的 HTTP 客户端
• TypeScript 实用程序类型：完整指南
• 安全 JWT 存储：最佳实践