In einer idealen Welt bräuchten wir nie eine Hybridlösung, bei der ein modernisierter Tech-Stack in ein Legacy-System integriert wird. Aber leben wir wirklich in einer idealen Welt?! In den meisten Fällen musste ich einen hybriden Ansatz implementieren. Ich bin mir sicher, dass die meisten von Ihnen schon von Micro-Frontends (MFE) gehört haben und dass die Modulföderation eine fantastische Lösung ist. Aber wissen Sie, wie Sie MFE in eine einfache statische HTML-Seite integrieren können, ohne sich um dynamische Versionsaktualisierungen kümmern zu müssen? Mit anderen Worten: Wie können Sie vermeiden, dass die Verbraucher-HTML-Seite jedes Mal aktualisiert wird, wenn sich das MFE ändert? Ich werde Sie durch einige einfache Codeänderungen führen, die möglicherweise Ihr Leben (zum Besseren?) verändern.
Mit der SystemJS-Bibliothek können wir eine Webkomponente oder MFE nahtlos integrieren oder sogar jedes Modul zur Laufzeit importieren.
Exportieren Sie zunächst das Modul mit einem Modul-Bundler wie Webpack als Karte im JSON-Format. Das Webpack-Import-Map-Plugin erleichtert das Generieren der Import-Map-Datei.
// with a Webpack 4 config like: config.entry = { entryName: 'entry-file.js' }; config.output.filename = '[name].[contenthash:8].js'; // Add to plugins new ImportMapWebpackPlugin({ filter: x => { return ['entryName.js'].includes(x.name); }, transformKeys: filename => { if (filename === 'entryName.js') { return 'mfe-module/out-file'; } }, fileName: 'import-map.json', baseUrl: 'https://super-cdn.com/' }); // output import-map.json { "imports": { "mfe-module": "https://super-cdn.com/entryName.12345678.js" } }
Hinweis: Das obige Code-Snippet stammt aus dem Webpack-Import-Map-Plugin-Repository
Als nächstes laden Sie die SystemJS-Datei, indem Sie sie als reguläre JavaScript-Datei importieren. Sie können die Dateiversion von s.min.js auf Ihrem eigenen CDN hosten oder ein vorhandenes gehostetes verwenden.
Jetzt importieren Sie die Karten-JSON-Datei, damit Ihr Modul in die HTML-Seite integriert werden kann. Durch die Importzuordnung entfällt die Notwendigkeit, JS-Dateipfade fest zu codieren, sodass Aktualisierungen Ihres importierten Moduls möglich sind, ohne dass Änderungen am Verbrauchercode erforderlich sind.
Nach dem Import können Sie Ihr Modul basierend auf seinem Typ aufrufen – unabhängig davon, ob es sich um eine Webkomponente oder ein normales HTML-Tag mit Bootstrapping handelt:
//web component//some regular HTML tag that is bootstrapped.
Indem Sie diese Schritte befolgen, können Sie Micro-Frontends oder Webkomponenten nahtlos in ein Legacy-System integrieren, ohne sich um häufige Updates oder Versionsverwaltung kümmern zu müssen. Mit SystemJS und Import Maps können Sie Module dynamisch laden und verwalten und so sicherstellen, dass Ihre statischen HTML-Seiten mit minimalem Aufwand auf dem neuesten Stand bleiben. Dieser Ansatz bietet eine skalierbare und effiziente Lösung für die Verbindung moderner Mikro-Frontends mit vorhandenen Systemen und ermöglicht so einen reibungsloseren Übergang und anhaltende Flexibilität in Ihrer Architektur.
Wenn Sie hier angekommen sind, habe ich mich zufriedenstellend bemüht, Sie weiterzulesen. Bitte hinterlassen Sie Kommentare oder bitten Sie um Korrekturen.
Das obige ist der detaillierte Inhalt vonIntegrieren Sie Web Component/MFE mit einfachem statischem HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
