npm install webpack webpack-cli webpack-dev-server --save-dev
            

              
                Copy
              
            
          

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index',
 output: {
 publicPath: 'http://localhost:3000/',
 },
 devServer: {
 port: 3000,
 hot: true,
 historyApiFallback: true, // Für Single-Page-Application-Routing
 },
 module: {
  rules: [
  {
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
    }
   }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  }
 ]
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'Host',
 filename: 'remoteEntry.js',
 remotes: {
 // Remotes hier definieren, z.B. 'RemoteApp': 'RemoteApp@http://localhost:3001/remoteEntry.js'
 'RemoteApp': 'RemoteApp@http://localhost:3001/remoteEntry.js'
 },
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Andere geteilte Abhängigkeiten hier hinzufügen
 },
 }),
 // ... andere Plugins
 ],
};

            

              
                Copy
              
            
          

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index',
 output: {
 publicPath: 'http://localhost:3001/',
 },
 devServer: {
 port: 3001,
 hot: true,
 historyApiFallback: true, // Für Single-Page-Application-Routing
 },
 module: {
  rules: [
  {
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
    }
   }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  }
 ]
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'RemoteApp',
 filename: 'remoteEntry.js',
 exposes: {
 './Widget': './src/Widget',
 // Andere bereitgestellte Module hier hinzufügen
 },
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Andere geteilte Abhängigkeiten hier hinzufügen
 },
 }),
 // ... andere Plugins
 ],
};

            

              
                Copy
              
            
          

            import React from 'react';

const Widget = () => {
 return (
  

  
Remote-Widget
  
Dies ist ein Widget aus der RemoteApp.
  
 );
};

export default Widget;

            

              
                Copy
              
            
          

            import React, { useState, useEffect } from 'react';

const RemoteWidget = React.lazy(() => import('RemoteApp/Widget'));

const App = () => {
 const [isWidgetLoaded, setIsWidgetLoaded] = useState(false);

 useEffect(() => {
  setIsWidgetLoaded(true);
 }, []);

 return (
  

  
Host-Anwendung
  
Dies ist die Host-Anwendung.
  {isWidgetLoaded ? (
   Lade Widget...
}>
   
   
  ) : (
   
Wird geladen...
  )}
  

Erklärung:

• React.lazy(() => import('RemoteApp/Widget')): Dies importiert dynamisch das Widget-Modul aus der RemoteApp. Der Name RemoteApp entspricht dem Namen, der im remotes-Abschnitt der Webpack-Konfiguration des Hosts definiert ist. Widget entspricht dem Modulnamen, der im exposes-Abschnitt der Webpack-Konfiguration der Remote-Anwendung definiert ist.
• React.Suspense: Dies wird verwendet, um das asynchrone Laden des Remote-Moduls zu handhaben. Die fallback-Prop gibt eine Komponente an, die gerendert wird, während das Modul lädt.

6. Starten der Anwendungen:

Starten Sie sowohl die Host- als auch die Remote-Anwendung mit npm start (oder Ihrer bevorzugten Methode). Stellen Sie sicher, dass die Remote-Anwendung *vor* der Host-Anwendung läuft.

Sie sollten nun das Remote-Widget sehen, das innerhalb der Host-Anwendung gerendert wird.

Fortgeschrittene Module Federation-Techniken

Über die grundlegende Einrichtung hinaus bietet Module Federation mehrere fortgeschrittene Techniken zum Aufbau anspruchsvoller Micro-Frontend-Architekturen.

1. Versionsverwaltung und gemeinsames Nutzen:

Die effektive Handhabung gemeinsamer Abhängigkeiten ist entscheidend für die Aufrechterhaltung der Stabilität und die Vermeidung von Konflikten. Module Federation bietet Mechanismen zur Angabe von Versionsbereichen und Singleton-Instanzen von geteilten Modulen. Die Verwendung der Eigenschaft shared in der Webpack-Konfiguration ermöglicht es Ihnen, zu steuern, wie geteilte Module geladen und verwaltet werden.

Beispiel:

            shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 lodash: { eager: true, version: '4.17.21' }
}

            

              
                Copy
              
            
          

• singleton: true: Stellt sicher, dass nur eine Instanz des Moduls geladen wird, was Duplizierung verhindert und die Bundle-Größe reduziert. Dies ist besonders wichtig für Bibliotheken wie React und ReactDOM.
• requiredVersion: Gibt den Versionsbereich an, den die Anwendung benötigt. Webpack wird versuchen, eine kompatible Version des Moduls zu laden.
• eager: true: Lädt das Modul sofort, anstatt es verzögert (lazy) zu laden. Dies kann in einigen Fällen die Leistung verbessern, kann aber auch die anfängliche Bundle-Größe erhöhen.

2. Dynamische Module Federation:

Anstatt die URLs von Remote-Anwendungen fest zu codieren, können Sie sie dynamisch aus einer Konfigurationsdatei oder einem API-Endpunkt laden. Dies ermöglicht es Ihnen, die Micro-Frontend-Architektur zu aktualisieren, ohne die Host-Anwendung neu bereitzustellen.

Beispiel:

Erstellen Sie eine Konfigurationsdatei (z.B. remote-config.json), die die URLs der Remote-Anwendungen enthält:

            {
 "RemoteApp": "http://localhost:3001/remoteEntry.js",
 "AnotherRemoteApp": "http://localhost:3002/remoteEntry.js"
}

            

              
                Copy
              
            
          

In der Host-Anwendung rufen Sie die Konfigurationsdatei ab und erstellen dynamisch das remotes-Objekt:

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');
const fs = require('fs');

module.exports = {
 // ... andere Konfigurationen
 plugins: [
 new ModuleFederationPlugin({
 name: 'Host',
 filename: 'remoteEntry.js',
 remotes: new Promise(resolve => {
  fs.readFile(path.resolve(__dirname, 'remote-config.json'), (err, data) => {
  if (err) {
  console.error('Fehler beim Lesen von remote-config.json:', err);
  resolve({});
  } else {
  try {
  const remotesConfig = JSON.parse(data.toString());
  resolve(remotesConfig);
  } catch (parseError) {
  console.error('Fehler beim Parsen von remote-config.json:', parseError);
  resolve({});
  }
  }
  });
 }),
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Andere geteilte Abhängigkeiten hier hinzufügen
 },
 }),
 // ... andere Plugins
 ],
};

            

              
                Copy
              
            
          

Wichtiger Hinweis: Erwägen Sie die Verwendung einer robusteren Methode zum Abrufen der Remote-Konfiguration in einer Produktionsumgebung, wie z.B. einen API-Endpunkt oder einen dedizierten Konfigurationsdienst. Das obige Beispiel verwendet fs.readFile der Einfachheit halber, was jedoch im Allgemeinen nicht für Produktionsbereitstellungen geeignet ist.

3. Benutzerdefinierte Ladestrategien:

Module Federation ermöglicht es Ihnen, das Laden von Remote-Modulen anzupassen. Sie können benutzerdefinierte Ladestrategien implementieren, um die Leistung zu optimieren oder spezifische Szenarien zu behandeln, wie z.B. das Laden von Modulen von einem CDN oder die Verwendung eines Service Workers.

Webpack stellt Hooks zur Verfügung, mit denen Sie den Modulladeprozess abfangen und ändern können. Dies ermöglicht eine feinkörnige Kontrolle darüber, wie Remote-Module abgerufen und initialisiert werden.

4. Umgang mit CSS und Stilen:

Das Teilen von CSS und Stilen zwischen Micro-Frontends kann knifflig sein. Module Federation unterstützt verschiedene Ansätze für den Umgang mit Stilen, darunter:

• CSS Modules: Verwenden Sie CSS Modules, um Stile innerhalb jedes Micro-Frontends zu kapseln, Konflikte zu vermeiden und Konsistenz zu gewährleisten.
• Styled Components: Nutzen Sie Styled Components oder andere CSS-in-JS-Bibliotheken, um Stile innerhalb der Komponenten selbst zu verwalten.
• Globale Stile: Laden Sie globale Stile von einer gemeinsamen Bibliothek oder einem CDN. Seien Sie bei diesem Ansatz vorsichtig, da er zu Konflikten führen kann, wenn Stile nicht ordnungsgemäß mit Namensräumen versehen sind.

Beispiel mit CSS Modules:

Konfigurieren Sie Webpack für die Verwendung von CSS Modules:

            module: {
 rules: [
 {
 test: /\.module\.css$/,
 use: [
 'style-loader',
 {
 loader: 'css-loader',
 options: {
 modules: {
 localIdentName: '[name]__[local]--[hash:base64:5]',
 },
 importLoaders: 1,
 },
 },
 'postcss-loader',
 ],
 },
 // ... andere Regeln
],
}

            

              
                Copy
              
            
          

Importieren Sie CSS Modules in Ihren Komponenten:

            import React from 'react';
import styles from './Widget.module.css';

const Widget = () => {
 return (
  

  
Remote-Widget
  
Dies ist ein Widget aus der RemoteApp.
  
 );
};

export default Widget;

            

              
                Copy
              
            
          

5. Kommunikation zwischen Micro-Frontends:

Micro-Frontends müssen oft miteinander kommunizieren, um Daten auszutauschen oder Aktionen auszulösen. Es gibt mehrere Möglichkeiten, dies zu erreichen:

• Geteilte Events: Verwenden Sie einen globalen Event-Bus, um Events zu veröffentlichen und zu abonnieren. Dies ermöglicht es Micro-Frontends, asynchron ohne direkte Abhängigkeiten zu kommunizieren.
• Benutzerdefinierte Events: Nutzen Sie benutzerdefinierte DOM-Events für die Kommunikation zwischen Micro-Frontends auf derselben Seite.
• Geteiltes Zustandsmanagement: Setzen Sie eine gemeinsame Zustandsmanagement-Bibliothek (z.B. Redux, Zustand) ein, um den Zustand zu zentralisieren und den Datenaustausch zu erleichtern.
• Direkte Modulimporte: Wenn Micro-Frontends eng gekoppelt sind, können Sie Module direkt voneinander mit Module Federation importieren. Dieser Ansatz sollte jedoch sparsam verwendet werden, um Abhängigkeiten zu vermeiden, die die Vorteile von Micro-Frontends untergraben.
• APIs und Dienste: Micro-Frontends können über APIs und Dienste miteinander kommunizieren, was eine lose Kopplung und größere Flexibilität ermöglicht. Dies ist besonders nützlich, wenn Micro-Frontends auf unterschiedlichen Domains bereitgestellt werden oder unterschiedliche Sicherheitsanforderungen haben.

Vorteile der Verwendung von Module Federation für Micro-Frontends

• Verbesserte Skalierbarkeit: Micro-Frontends können unabhängig skaliert werden, sodass Sie Ressourcen dort zuweisen können, wo sie am dringendsten benötigt werden.
• Erhöhte Wartbarkeit: Kleinere Codebasen sind leichter zu verstehen und zu warten, was das Fehlerrisiko verringert und die Entwicklerproduktivität verbessert.
• Schnellere Bereitstellungszyklen: Micro-Frontends können unabhängig voneinander bereitgestellt werden, was schnellere Iterationszyklen und eine raschere Veröffentlichung neuer Funktionen ermöglicht.
• Technologische Vielfalt: Teams können die Technologien und Frameworks wählen, die ihren Bedürfnissen am besten entsprechen, was Innovationen fördert und den Einsatz spezialisierter Fähigkeiten ermöglicht.
• Gesteigerte Teamautonomie: Jedes Micro-Frontend gehört einem dedizierten Team, was Eigenverantwortung und Rechenschaftspflicht fördert.
• Vereinfachtes Onboarding: Neue Entwickler können sich schnell in kleinere, besser überschaubare Codebasen einarbeiten.

Herausforderungen bei der Verwendung von Module Federation

• Erhöhte Komplexität: Micro-Frontend-Architekturen können komplexer sein als traditionelle monolithische Architekturen und erfordern sorgfältige Planung und Koordination.
• Verwaltung gemeinsamer Abhängigkeiten: Die Verwaltung gemeinsamer Abhängigkeiten kann eine Herausforderung sein, insbesondere wenn verschiedene Micro-Frontends unterschiedliche Versionen derselben Bibliothek verwenden.
• Kommunikations-Overhead: Die Kommunikation zwischen Micro-Frontends kann zusätzlichen Aufwand und Latenz verursachen.
• Integrationstests: Das Testen der Integration von Micro-Frontends kann komplexer sein als das Testen einer monolithischen Anwendung.
• Anfänglicher Einrichtungsaufwand: Die Konfiguration von Module Federation und die Einrichtung der anfänglichen Infrastruktur können erheblichen Aufwand erfordern.

Praxisbeispiele und Anwendungsfälle

Module Federation wird von einer wachsenden Zahl von Unternehmen eingesetzt, um große, komplexe Webanwendungen zu erstellen. Hier sind einige Praxisbeispiele und Anwendungsfälle:

• E-Commerce-Plattformen: Große E-Commerce-Plattformen verwenden oft Micro-Frontends, um verschiedene Teile der Website zu verwalten, wie den Produktkatalog, den Warenkorb und den Checkout-Prozess. Zum Beispiel könnte ein deutscher Einzelhändler ein separates Micro-Frontend zur Anzeige von Produkten auf Deutsch verwenden, während ein französischer Händler ein anderes Micro-Frontend für französische Produkte nutzt, die beide in eine einzige Host-Anwendung integriert sind.
• Finanzinstitute: Banken und Finanzinstitute nutzen Micro-Frontends, um komplexe Bankanwendungen zu erstellen, wie z.B. Online-Banking-Portale, Investmentplattformen und Handelssysteme. Eine globale Bank könnte Teams in verschiedenen Ländern haben, die Micro-Frontends für verschiedene Regionen entwickeln, die jeweils auf lokale Vorschriften und Kundenpräferenzen zugeschnitten sind.
• Content-Management-Systeme (CMS): CMS-Plattformen können Micro-Frontends verwenden, um Benutzern die Anpassung des Erscheinungsbilds und der Funktionalität ihrer Websites zu ermöglichen. Beispielsweise könnte ein kanadisches Unternehmen, das CMS-Dienste anbietet, Benutzern erlauben, verschiedene Micro-Frontends (Widgets) zu ihrer Website hinzuzufügen oder zu entfernen, um deren Funktionalität anzupassen.
• Dashboards und Analyseplattformen: Micro-Frontends eignen sich gut für den Aufbau von Dashboards und Analyseplattformen, bei denen verschiedene Teams unterschiedliche Widgets und Visualisierungen beisteuern können.
• Gesundheitswesen-Anwendungen: Gesundheitsdienstleister verwenden Micro-Frontends, um Patientenportale, elektronische Gesundheitsaktensysteme (EHR) und Telemedizin-Plattformen zu erstellen.

Best Practices für die Implementierung von Module Federation

Um den Erfolg Ihrer Module-Federation-Implementierung sicherzustellen, befolgen Sie diese Best Practices:

• Sorgfältig planen: Planen Sie Ihre Micro-Frontend-Architektur sorgfältig, bevor Sie beginnen, und definieren Sie klare Grenzen zwischen den verschiedenen Anwendungen.
• Klare Kommunikationskanäle etablieren: Etablieren Sie klare Kommunikationskanäle zwischen den Teams, die für die verschiedenen Micro-Frontends verantwortlich sind.
• Bereitstellung automatisieren: Automatisieren Sie den Bereitstellungsprozess, um sicherzustellen, dass Micro-Frontends schnell und zuverlässig bereitgestellt werden können.
• Leistung überwachen: Überwachen Sie die Leistung Ihrer Micro-Frontend-Architektur, um Engpässe zu identifizieren und zu beheben.
• Robuste Fehlerbehandlung implementieren: Implementieren Sie eine robuste Fehlerbehandlung, um kaskadierende Ausfälle zu verhindern und sicherzustellen, dass die Anwendung widerstandsfähig bleibt.
• Einen konsistenten Codestil verwenden: Erzwingen Sie einen konsistenten Codestil über alle Micro-Frontends hinweg, um die Wartbarkeit zu verbessern.
• Alles dokumentieren: Dokumentieren Sie Ihre Architektur, Abhängigkeiten und Kommunikationsprotokolle, um sicherzustellen, dass das System gut verstanden und wartbar ist.
• Sicherheitsaspekte berücksichtigen: Berücksichtigen Sie sorgfältig die Sicherheitsaspekte Ihrer Micro-Frontend-Architektur und implementieren Sie geeignete Sicherheitsmaßnahmen. Stellen Sie die Einhaltung globaler Datenschutzbestimmungen wie DSGVO und CCPA sicher.

Fazit

JavaScript Module Federation mit Webpack 5 bietet eine leistungsstarke und flexible Möglichkeit, Micro-Frontend-Architekturen zu erstellen. Indem Sie große Anwendungen in kleinere, unabhängig voneinander bereitstellbare Einheiten aufteilen, können Sie die Skalierbarkeit, Wartbarkeit und Teamautonomie verbessern. Obwohl mit der Implementierung von Micro-Frontends Herausforderungen verbunden sind, überwiegen die Vorteile oft die Kosten, insbesondere bei komplexen Webanwendungen. Indem Sie die in diesem Leitfaden beschriebenen Best Practices befolgen, können Sie Module Federation erfolgreich nutzen, um robuste und skalierbare Micro-Frontend-Architekturen zu erstellen, die den Anforderungen Ihres Unternehmens und Ihrer Benutzer weltweit gerecht werden.