Singleton-modules en versiebeheer
Begrijp hoe u ervoor zorgt dat slechts één exemplaar van een module wordt geladen en hoe u versieconflicten beheert.
Singleton-modules en versiebeheer is een gratis Architectuur van micro-frontends met Module Federation-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Architectuur van micro-frontends met Module Federation. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Architectuur van micro-frontends met Module Federation bevat in totaal 4 lessen.
Wat zijn singletonmodules?
In Micro Frontend-architecturen is een singletonmodule een stuk code of een bibliotheek dat maar één keer mag bestaan binnen je volledige toepassing, ook als meerdere Micro Frontends het proberen te laden.
Je kunt het zien als een unieke bron die alle onderdelen van je systeem consistent moeten delen.
- Zorgt voor één bron van waarheid.
- Voorkomt conflicterende toestanden of gedragingen.
Waarom singletons belangrijk zijn voor MFE's
Stel je voor dat meerdere Micro Frontends (MFE's) elk hun eigen kopie laden van een UI-bibliotheek zoals React of een bibliotheek voor statusbeheer zoals Redux.
Zonder singletons kun je het volgende krijgen:
- Meerdere instanties van React Context, waardoor communicatie tussen componenten wordt verbroken.
- Afzonderlijke Redux-opslagplaatsen, wat leidt tot een inconsistente toepassingsstatus.
- Een grotere bundel door dubbele code.
Singletons lossen deze problemen op door één uniforme afhankelijkheid te garanderen.
Singletons implementeren met MF
Met Module Federation kun je gedeelde modules eenvoudig als singletons declareren met de optie singleton: true in je Webpack-configuratie.
Wanneer dit is ingesteld, zorgt Webpack ervoor dat tijdens runtime slechts één versie van de opgegeven module wordt geladen en gebruikt door alle gefedereerde toepassingen (hosts en externe toepassingen).
Code: een singleton configureren
Zo configureer je een gedeelde module, zoals react, als singleton in je webpack.config.js:
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
// ... other Webpack config
plugins: [
new ModuleFederationPlugin({
name: 'host_app',
remotes: {},
shared: {
react: {
singleton: true, // Only one React instance allowed
requiredVersion: '^18.0.0',
},
'react-dom': {
singleton: true, // Only one ReactDOM instance allowed
requiredVersion: '^18.0.0',
},
},
}),
],
};Versiebeheer van gedeelde modules begrijpen
Naast het garanderen van één enkele *instantie* (singleton), moet je ook beheren welke *versie* van een gedeelde module wordt geladen.
Wat gebeurt er als de ene MFE React v17 nodig heeft en een andere React v18? Module Federation beschikt over mechanismen om deze versieconflicten af te handelen en compatibiliteit te garanderen of gecontroleerd te falen.
<code>requiredVersion</code> voor specificiteit
Met de optie requiredVersion in de configuratie van shared kun je het semantischeversiebereik (semver) opgeven dat je toepassing verwacht voor een gedeelde module.
Webpack probeert een compatibele versie te vinden tussen de host- en externe toepassingen. Als er een compatibele versie wordt gevonden, wordt die gebruikt. Zo niet, dan wordt er mogelijk een terugvaloptie geladen of een fout gegenereerd, afhankelijk van andere instellingen.
Code: vereiste versies opgeven
Zo kun je een requiredVersion voor een gedeelde bibliotheek definiëren:
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
// ...
plugins: [
new ModuleFederationPlugin({
// ...
shared: {
lodash: {
singleton: false,
requiredVersion: '^4.17.21', // Any version compatible with 4.17.21
},
moment: {
singleton: true,
requiredVersion: '2.29.1', // Exactly version 2.29.1
},
},
}),
],
};`strictVersion: true` voor strikte versiecontrole
Terwijl requiredVersion de versieselectie stuurt, dwingt strictVersion: true deze strikt af.
Als strictVersion: true is ingeschakeld en een externe module een versie aanvraagt die niet compatibel is met de requiredVersion van de host (of met de al geladen versie), genereert Module Federation een fout en voorkomt het dat de toepassing wordt geladen. Zo voorkom je onverwacht gedrag door versieverschillen.
Code: strikte versiecontrole afdwingen
singleton, requiredVersion en strictVersion combineren voor kritieke afhankelijkheden:
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
// ...
plugins: [
new ModuleFederationPlugin({
// ...
shared: {
react: {
singleton: true,
requiredVersion: '^18.0.0',
strictVersion: true, // Fail if versions are incompatible
},
// ... other shared modules
},
}),
],
};Aanbevolen werkwijzen voor gedeelde afhankelijkheden
Om singletonmodules en versiebeheer effectief te beheren:
- Gebruik semantische versiebeheer (SemVer): Houd je voor alle gedeelde modules aan major.minor.patch.
- Communiceer: Zorg dat teams op de hoogte zijn van updates van gedeelde modules en versievereisten.
- Test de compatibiliteit: Test je gefedereerde toepassingen regelmatig om te controleren of gedeelde modules in alle externe toepassingen en hosts werken.
- Maak strategische keuzes: Niet alle gedeelde modules hoeven singletons te zijn of strikte versiecontrole te hebben. Pas deze instellingen zorgvuldig toe op basis van het belang van de module.
Korte controle: singleton en versiebeheer
Wat zijn bij het configureren van gedeelde modules in Module Federation de belangrijkste voordelen van singleton: true en strictVersion: true?
Samenvatting en volgende stappen
Je hebt nu geleerd over singletonmodules en versiebeheer in Module Federation!
- Singletonmodules zorgen ervoor dat er binnen je gefedereerde toepassing maar één exemplaar van een gedeelde afhankelijkheid bestaat, wat essentieel is voor bibliotheken met status.
- De opties
requiredVersionenstrictVersionhelpen de compatibiliteit te beheren en problemen door conflicterende moduleversies te voorkomen.
Deze technieken zijn essentieel voor het bouwen van robuuste en voorspelbare micro-frontendtoepassingen.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 12
- Lessen
- 48
Veelgestelde vragen
Is de les “Singleton-modules en versiebeheer” gratis?
Ja — de volledige tekst van “Singleton-modules en versiebeheer” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Architectuur van micro-frontends met Module Federation wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Architectuur van micro-frontends met Module Federation bevat in totaal 4 lessen.
Wat leer ik in “Singleton-modules en versiebeheer”?
Begrijp hoe u ervoor zorgt dat slechts één exemplaar van een module wordt geladen en hoe u versieconflicten beheert. Je oefent met Architectuur van micro-frontends met Module Federation door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Architectuur van micro-frontends met Module Federation te beginnen?
Ervaring vooraf is niet nodig. Architectuur van micro-frontends met Module Federation op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Singleton-modules en versiebeheer”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Architectuur van micro-frontends met Module Federation?
Ja. Elke les over Architectuur van micro-frontends met Module Federation bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Gedeelde dependencies gebruiken
- Singleton-modules en versiebeheer
- Modules dynamisch laden
- State en hulpprogramma's delen tussen remotes