Erstellen Sie Micro-Frontends mit Single-Spa: Eine Anleitung

TL;DR: Die Verwendung von Single-Spa zum Erstellen von Mikro-Frontends erleichtert die Aufteilung einer großen App in kleine, unabhängige Teile, sodass verschiedene Teams an Teilen arbeiten können, ohne andere zu beeinträchtigen. Dieser Blog zeigt, wie man Angular- und React-Micro-Frontends erstellt, sie mit einer Root-Konfiguration verbindet und bereitstellt.

Micro Frontends sind zu einem beliebten Architekturstil für die Skalierung von Frontend-Apps geworden, insbesondere wenn mehrere Teams an verschiedenen Teilen einer Benutzeroberfläche arbeiten. Durch die Aufteilung monolithischer Frontends in kleinere, unabhängige Module können Teams Teile einer App separat bereitstellen, aktualisieren und skalieren. In diesem Artikel wird erläutert, wie Sie mithilfe von Single-Spa Mikro-Frontends verschiedener Frameworks erstellen und verbinden.

Einführung in das Single-Spa

Single-spa ist ein JavaScript-basiertes Framework, das für die Mikro-Frontend-Architektur entwickelt wurde. Es ermöglicht Ihnen, Mikro-Frontends mit Frameworks wie Angular, React und Vue zu erstellen und diese als eine einzige App bereitzustellen. Es verwaltet ein Register verbundener Apps und verwendet Routen, um Benutzer zu verschiedenen Apps umzuleiten.

Die Verwendung eines Single-SPA-Frameworks bietet viele Vorteile, z. B. die Auswahl verschiedener Sprachen für verschiedene Teile der App, die unabhängige Entwicklung und Bereitstellung von Mikro-Frontends sowie die Skalierbarkeit. Beginnen wir also mit der Erstellung eines Single-Spa.

Erstellen eines Single-Spa

Voraussetzungen

Um ein Single-Spa zu implementieren, ist es wichtig, dass Node.js und npm installiert sind. Um sie zu installieren, gehen Sie zur Node.js-Website und laden Sie die neueste Version für Ihr Betriebssystem herunter. Führen Sie das Installationsprogramm aus, um die Installation abzuschließen.

Überprüfen Sie dann die Installation von node.js und npm, indem Sie die folgenden Befehle in der Eingabeaufforderung ausführen.

npm - version
node - version

Schritt 1: Einrichten des Projekts

In diesem Beispiel werden zwei einfache Micro-Frontends mit Angular und React erstellt. Eine Root-Konfiguration wird die beiden Mikro-Frontends bedienen.

Erstellen Sie eine App

Wir können eine einfache Angular-Micro-Frontend-App erstellen, indem wir den folgenden Befehl ausführen.

ng new angular-spa-frontend

Sobald das Projekt erstellt wurde, führen Sie den nächsten Befehl aus, um die Single-Spa-Bibliothek zu installieren.

ng add single-spa-angular

Sobald die Bibliothek ordnungsgemäß installiert wurde, wird im Angular-Projekt eine Datei mit dem Namen main.single-spa.ts erstellt, die alle Konfigurationen im Zusammenhang mit single-spa.

Beziehen Sie sich auf den Konfigurationscode.

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;

Es ist erforderlich, einen APP_BASE_HREF-Wert bereitzustellen, um als Einzel-Spa zu arbeiten.

Darüber hinaus enthält package.json beim Hinzufügen der Single-Spa-Bibliothek zwei zusätzliche Skripte.

npm - version
node - version

Die Datei angular.json wird mit den folgenden Konfigurationen geändert.

ng new angular-spa-frontend

„main“: „src/main.ts“ wird ersetzt durch „main“: „src/main.single-spa.ts“. Eine neue Build-Konfiguration wird als JavaScript-Modul hinzugefügt.

Sobald die Konfigurationen abgeschlossen und überprüft sind, können wir die Angular-App mit dem folgenden Befehl bereitstellen.

ng add single-spa-angular

Nachdem wir die Micro-Frontend-App erfolgreich erstellt haben, schauen wir uns an, wie die Root-Konfiguration implementiert wird.

Root-Konfiguration

Führen Sie den folgenden Befehl aus, um die Root-Konfiguration zu erstellen.

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;

Bei der Eingabe dieses Befehls wird eine Reihe von Konfigurationen angezeigt, um die Root-Konfiguration zu erstellen.

Nach Auswahl der vorherigen Konfigurationen wird die Root-Konfiguration erstellt, um mehrere Frontends zu bedienen.

Um das erstellte Micro-Frontend mit der Root-Konfiguration zu verbinden, müssen wir die Dateien root-config.ts und index.ejs ändern.

"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"
 }

Wie im vorherigen Codeblock erwähnt, sollte das erstellte Micro-Frontend in die Datei root-config.ts importiert werden.

"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/"
     },

}

Die folgenden Skripte sollten zur Datei index.ejs hinzugefügt werden.

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

Erstelltes Mikro-Frontend ( @org/angular-spa-frontend ), zusammen mit der URL ( http://localhost:4200/main.js ), in der sich das Mikro befindet Frontend wurde gehostet, muss in der Import-Map hinzugefügt werden.

Führen Sie dann den folgenden Befehl aus, um die App auszuführen.

npx create-single-spa

Vorausgesetzt, diese Schritte werden korrekt ausgeführt, sollten wir in der Ansicht das endgültige Einzel-Spa sehen können, ähnlich dem folgenden Bild.

Schritt 2: Bereitstellung in der Produktion

Bei der Bereitstellung dieser Mikro-Frontends in der Produktion wird empfohlen, jede Mikro-Frontend-App als unabhängige, eigenständige App bereitzustellen. Die Root-Konfiguration wird vermutlich jede App dynamisch laden, abhängig von den App-Routen, die in der registerApplication.

Schritt 3: Weitere Mikro-Frontends hinzufügen

Um weitere Mikro-Frontends hinzuzufügen, wiederholen Sie die zuvor genannten Schritte. Schauen wir uns an, wie man ein React-Micro-Frontend in dieselbe Root-Konfiguration integriert.

Erstellen Sie mit dem folgenden Befehl ein neues React-Micro-Frontend.

npm - version
node - version

Navigieren Sie dann in das erstellte Projekt und installieren Sie single-spa-react.

ng new angular-spa-frontend

Ändern Sie die Eintragsdatei, um Lebenszyklusmethoden zu exportieren, um die App mit Single-Spa kompatibel zu machen.

ng add single-spa-angular

Sobald die Konfigurationen abgeschlossen sind, können wir das React-Micro-Frontend mit dem folgenden Befehl bereitstellen.

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;

Um das erstellte Micro-Frontend in die vorhandene root-config zu integrieren, implementieren Sie die folgenden Änderungen an den Dateien in 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"
 }

Sie müssen außerdem die Datei index.ejs mit dem Hauptpaketpfad der React-App aktualisieren.

"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-Referenz

Sehen Sie sich das vollständige Codebeispiel dieser Single-Spa-Anwendung in dieser GitHub-Demo an.

Abschluss

Die Verwendung von Single-Spa zum Erstellen von Mikro-Frontends erleichtert die Aufteilung einer großen App in kleine, unabhängige Teile. Auf diese Weise können verschiedene Teams an ihren Aufgaben arbeiten, ohne andere zu beeinträchtigen, und die von ihnen bevorzugten Frameworks wie Angular oder React verwenden. Wenn Sie die Schritte in dieser Anleitung befolgen, können Sie ein Einzel-Spa-Projekt einrichten, mehrere Mikro-Frontends verbinden und den Benutzern ein reibungsloses Erlebnis bieten. Mit Single-Spa können Sie Ihre App ganz einfach im Laufe der Zeit erweitern und bei Bedarf neue Funktionen hinzufügen.

Verwandte Blogs

• Beherrschen Sie asynchrones JavaScript mit RxJS
• Axios und Fetch API? Auswahl des richtigen HTTP-Clients
• TypeScript-Dienstprogrammtypen: Eine vollständige Anleitung
• Sicherer JWT-Speicher: Best Practices

Das obige ist der detaillierte Inhalt vonErstellen Sie Micro-Frontends mit Single-Spa: Eine Anleitung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!