Monorepo und Micro-Frontends mit Module Federation Vite

✨Einleitung✨:

Monorepo

Ein Monorepo ist ein einzelnes Repository, das mehrere verwandte, aber unabhängige Projekte verwaltet. Es rationalisiert die Entwicklung, indem es die Wiederverwendung von Code ermöglicht, Abhängigkeiten vereinfacht und eine bessere Teamzusammenarbeit im Vergleich zu separaten Repositorys fördert.

Mikro-Frontend

Eine Webanwendungsarchitektur eines Frontends, die es in kleinere, unabhängige Einheiten zerlegt, die einzeln bereitgestellt werden können. Ein Mikro-Frontend kann unabhängig von anderen Codebasen erstellt und bereitgestellt werden, was bedeutet, dass sie flexibler und skalierbarer sind.

Modul Federation und Vite

Modulverbund: Es handelt sich um eine sehr leistungsstarke Funktion in Webpack, die das dynamische Laden von Code von einem entfernten Standort aus ermöglicht.

Vite: Dies ist ein moderneres Frontend-Build-Tool, das schnelle Starts von Entwicklungsservern und den sofortigen Austausch von Hot-Modulen ermöglicht, mit hervorragender Unterstützung für moderne JavaScript-Funktionen und einer Erweiterung seiner Funktionalität durch das Plugin-System .

Probleme, die diese Tools lösen können?:

• Teams skalieren
• Abhängigkeiten verwalten
• Verbesserung der Entwicklungsgeschwindigkeit

Durch die Kombination dieser Muster und Tools können skalierbare, wartbare und leistungsstarke Front-End-Anwendungen erstellt werden, die den Anforderungen der modernen Webentwicklung gerecht werden.

Kombination von Monorepos, Micro-Frontends, Module Federation und Vite ??:

Auswirkungen

Durch die Kombination dieser Technologien erstellen Sie eine leistungsstarke und flexible Architektur für die Erstellung umfangreicher, komplexer Webanwendungen. Hier ist eine Aufschlüsselung der wichtigsten Auswirkungen:

• Verbesserte Skalierbarkeit: Unabhängige Bereitstellung und Aktualisierung von Mikro-Frontends innerhalb eines Monorepo.
• Verbesserte Entwicklererfahrung:Schnellere Entwicklung mit Vite und optimierte Arbeitsabläufe.
• Optimierte Leistung: Das On-Demand-Laden von Code mit Module Federation reduziert die anfänglichen Ladezeiten.
• Bessere Wartbarkeit:Modulare Mikro-Frontends verbessern die Codeorganisation und reduzieren die Kopplung.

?? Genug dieser Theorie, lasst uns etwas Action sehen! ??

Wie geht das?

1: Monorepo einrichten

Wählen Sie ein Monorepo-Management-Tool wie Lerna oder Nx. (Wählen wir Nx für dieses Demoprojekt)

• Lassen Sie uns einen Ordner erstellen und dort den Nx-Arbeitsbereich initialisieren.

mkdir my-monorepo
cd my-monorepo

2: Nx CLI installieren:

• Installieren Sie Nx CLI global in Ihrem System

npm add --global nx@latest 

• Nx Arbeitsbereich initialisieren

npx create-nx-workspace@latest

• Verwenden Sie die Nx CLI, um neue Anwendungen und Bibliotheken in Ihrem Arbeitsbereich zu generieren

nx g @nx/next:application host-app
.
.
.
nx g @nx/react:application my-remote-app
.
.
.
nx g @nx/react:library my-utils

3: Konfigurieren Sie Vite und implementieren Sie den Modulverbund:

• Installieren Sie das Plugin @originjs/vite-plugin-federation in der vite.config.js jedes Micro-Frontends.

npm i @originjs/vite-plugin-federation -D

• Erstellen Sie eine vite.config.js (falls nicht von Nx erstellt) und konfigurieren Sie sie.
• Modul-Föderationspaket implementieren.

Host-App Vite-Konfiguration:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
     react(),
     federation({
      name: 'host-app',
      remoteApp: {},  // add Urls of your remote apps here
     shared: {
        react: {
          singleton: true,
          requiredVersion: '18.2.0',
        },
        'react-dom': {
          singleton: true,
          requiredVersion: '18.2.0',
        },
      },
    }),
  ],
});

Remote-App Vite-Konfiguration:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
     react(),
     name: 'my-remote-app', // unique app name for your remote module
     filename: 'remoteEntry.js',
     exposes: {}, // add the path of any components you want to expose to the host app
     shared: {
       react: {
         singleton: true,
         requiredVersion: '18.2.0',
       },
       'react-dom': {
         singleton: true,
         requiredVersion: '18.2.0',
       },
     },
    }),
  ],
});

Ihre Projektstruktur sollte so aussehen

my-monorepo/
├── apps/
│   ├── host-app/
│   │   ├── package.json
│   │   ├── vite.config.js
│   │   ├── src/
│   │   └── ...
│   ├── my-utils/
│   │   ├── package.json
│   │   ├── src/
│   │   └── ...
│   └── my-remote-app/
│       ├── package.json
│       ├── vite.config.js
│       ├── src/
│       └── ...
└── nx.json

? Herzlichen Glückwunsch, Ihre App ist jetzt konfiguriert. ?
Erstellen Sie nun eine Komponente und stellen Sie sie der Host-App zur Verfügung.

Wie füge ich eine Remote-Komponente zum Host hinzu?

Angenommen, Sie haben eine Komponente als „AppComponent“ verfügbar gemacht und Ihr Remote-Name ist „remoteApp“

const RemoteComponent = React.lazy(() => import('remoteApp/AppComponent'));

<suspense fallback="{<">Loading....>}>
  <remotecomponent></remotecomponent>
</suspense>

*HINWEIS: * Stellen Sie sicher, dass Sie der Datei vite.config.js des Hosts eine Remote-URL hinzufügen.

Szenarien aus der realen Welt ???:

Große E-Commerce-Plattformen: Dasselbe Team kann unabhängig voneinander an Produktseiten, Checkout-Prozessen und Benutzerkonten arbeiten.
Unternehmensanwendungen:Funktionen können von verschiedenen Abteilungen innerhalb einer gemeinsamen Plattform verwaltet werden.
Verschiedene Teams können individuelle Widgets oder Dashboards erstellen und verwalten.

? Schauen Sie sich hier meinen Demo-Projektcode an ??: Monorepo-Projekt

Abschluss

Monorepos, Micro-Frontends, Module Federation und Vite nutzen die Stärken aller oben genannten Technologien und können Unternehmen dabei helfen, skalierbare, wartbare und leistungsstarke Webanwendungen zu erstellen, die den Anforderungen moderner Entwicklungs- und Geschäftsanforderungen gerecht werden.

Zusätzliche Ressourcen:

Nx-Dokumentation
Vite-Dokumentation
Webpack-Modul-Föderation
Micro-Frontend-Architektur

Wenn Sie Fragen haben oder Hilfe bei der Implementierung dieses Setups für Ihr Projekt benötigen, können Sie sich gerne an uns wenden. Lasst uns etwas Erstaunliches bauen! ?

Das obige ist der detaillierte Inhalt vonMonorepo und Micro-Frontends mit Module Federation Vite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!