TL;DR: 使用单 Spa 构建微前端可以更轻松地将大型应用程序拆分为小的独立部分，以便不同的团队可以在不影响其他团队的情况下处理各个部分。本博客展示了如何创建 Angular 和 React 微前端、将它们连接到根配置并进行部署。
微前端已成为扩展前端应用程序的流行架构风格，特别是当多个团队在用户界面的不同部分工作时。通过将整体前端分解为更小的独立模块，团队可以单独部署、更新和扩展应用程序的各个部分。本文将讨论如何使用 single-spa 创建和连接不同框架的微前端。
Single-spa 是一个基于 JavaScript 的框架，专为微前端架构设计。它允许您使用 Angular、React 和 Vue 等框架构建微前端，并将它们作为单个应用程序提供服务。它维护连接的应用程序的注册并使用路由将用户重定向到不同的应用程序。
使用单SPA框架有很多好处，例如为应用程序的不同部分选择不同的语言、微前端的独立开发和部署以及可扩展性。那么，让我们开始创建一个单一的水疗中心。
要实现单 Spa，安装 Node.js 和 npm 非常重要。要安装它们，请访问 Node.js 网站并下载适合您的操作系统的最新版本。运行安装程序完成安装。
然后，通过在命令提示符中执行以下命令来验证 node.js 和 npm 安装。
npm - version node - version
在此示例中，将使用 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: '<app-root />',
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 将包含两个额外的脚本。
npm - version node - version
angular.json 文件将使用以下配置进行修改。
ng new angular-spa-frontend
“main”: “src/main.ts” 将替换为 “main”: “src/main.single-spa.ts”。新的构建配置将作为 JavaScript 模块添加。
配置完成并验证后，我们可以使用以下命令提供 Angular 应用程序。
ng add single-spa-angular
现在我们已经成功创建了微前端应用程序，让我们看看如何实现root-config。
执行以下命令来创建根配置。
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: '<app-root />',
Router,
NavigationStart,
NgZone,
});
export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;
输入此命令后，将出现一系列配置来创建根配置。 
选择之前的配置后，将创建根配置来服务多个前端。
要将创建的微前端连接到 root-config，我们需要修改 root-config.ts 和 index.ejs 文件。
"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"
}
如前面的代码块中所述，创建的微前端应导入到 root-config.ts 文件中。
"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/"
},
}
以下脚本应添加到 index.ejs 文件中。
npm run serve:single-spa:angular-spa-frontend
创建了微前端 ( @org/angular-spa-frontend )，以及微前端的 URL ( http://localhost:4200/main.js )前端已托管，必须添加到导入映射中。
然后，执行以下命令来运行应用程序。
npx create-single-spa
假设这些步骤正确完成，我们应该能够在视图中看到最终的单 Spa，类似于下图。
在生产中部署这些微前端时，建议将每个微前端应用程序部署为独立的应用程序。根配置可能会动态加载每个应用程序，具体取决于 registerApplication.
中设置的应用程序路由要添加更多微前端，请重复前面提到的步骤。让我们看看如何将 React 微前端集成到同一个根配置中。
使用以下命令创建一个新的 React 微前端。
npm - version node - version
然后，导航到创建的项目并安装 single-spa-react。
ng new angular-spa-frontend
修改入口文件导出生命周期方法，使应用兼容single-spa。
ng add single-spa-angular
配置完成后，我们可以使用以下命令为 React 微前端提供服务。
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: '<app-root />',
Router,
NavigationStart,
NgZone,
});
export const bootstrap = lifecycles.bootstrap;
export const mount = lifecycles.mount;
export const unmount = lifecycles.unmount;
要将创建的微前端与现有的 root-config 集成，请对 root-config 中的文件进行以下修改。
"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"
}
您还需要使用 React 应用程序的主包路径更新 index.ejs 文件。
"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/"
},
}
在此 GitHub 演示中查看此单 Spa 应用程序的完整代码示例。
使用 single-spa 构建微前端可以更轻松地将大型应用程序拆分为小的独立部分。这样，不同的团队就可以在不影响其他团队的情况下工作，并使用他们喜欢的框架，例如 Angular 或 React。按照本指南中的步骤，您可以设置单 SPA 项目，连接多个微前端，并为用户提供流畅的体验。 Single-spa 让您可以轻松地随着时间的推移扩展您的应用程序并根据需要添加新功能。
以上是使用单 Spa 构建微前端：指南的详细内容。更多信息请关注PHP中文网其他相关文章！
