Integrieren Sie Web Component/MFE mit einfachem statischem HTML

Einführung

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 verändern (zum Besseren?).

Erste Schritte

Mithilfe der SystemJS-Bibliothek können wir eine Webkomponente oder MFE nahtlos integrieren oder sogar jedes Modul zur Laufzeit importieren.

Schritt 1: Exportieren Sie Ihr Modul als Karte

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

Schritt 2: SystemJS laden

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.

<script src="https://cdn.jsdelivr.net/npm/systemjs/dist/system.min.js"></script>

Schritt 3: Importieren Sie die Map-JSON-Datei

Importieren Sie nun 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.

<script type="systemjs-importmap" src="/path/to/module-importmap.json">

Hinweis: Verwenden Sie das Crossorigin-Attribut, wenn Sie von einem anderen Ursprung laden.

<script crossorigin type="systemjs-importmap" src="/path/to/import-map.json">

Beispiel für den Import einer Kartendatei:

{
    "imports": {
        "mfe-module": "https://super-cdn.com/entryName.12345678.js"
    }
}

Schritt 4: Laden Sie Ihr Modul
Zu diesem Zeitpunkt ist SystemJS geladen und hat das MFE-/Webkomponentenmodul importiert. Jetzt ist es an der Zeit, Ihr Modul zu laden:

<script crossorigin>
    System.import('mfe-module');
</script>

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
<mfe-module/>
//some regular HTML tag that is bootstrapped.
<div id="mfe-module" />

Abschluss

Wenn 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.

Meine anderen Blogs:

• So reduzieren Sie die Ladezeit von Seiten – Teil 1
• Vermeiden Sie die Standardimplementierung von Spring RestTemplate, um Leistungseinbußen zu vermeiden
• Meine Erfahrungen aus erster Hand mit Webkomponenten – Erkenntnisse und Einschränkungen
• Micro-Frontend Decision Framework
• Testen Sie den SOAP-Webdienst mit dem Postman Tool

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!