Singleton-moduler og versjonering
Forstå hvordan du sikrer at bare én instans av en modul lastes inn, og håndterer versjonskonflikter.
Singleton-moduler og versjonering er en gratis leksjon i Mikrofrontend-arkitektur med Module Federation på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Mikrofrontend-arkitektur med Module Federation, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Mikrofrontend-arkitektur med Module Federation inneholder totalt 4 leksjoner.
Hva er singleton-moduler?
I Micro Frontend-arkitekturer er en singleton-modul en kodebit eller et bibliotek som bare skal finnes som én enkelt instans i hele applikasjonen, selv om flere Micro Frontends prøver å laste den inn.
Se på den som en unik ressurs som alle delene av systemet må dele på en konsekvent måte.
- Sikrer én enkelt kilde til sannheten.
- Hindrer motstridende tilstander eller oppførsel.
Hvorfor singleton-moduler er viktige for MFE-er
Se for deg at flere Micro Frontends (MFE-er) alle laster inn sin egen kopi av et UI-bibliotek som React eller et bibliotek for tilstandshåndtering som Redux.
Uten singleton-moduler kan du ende opp med:
- Flere instanser av React Context, noe som bryter kommunikasjonen mellom komponenter.
- Separate Redux-lagre, som fører til en inkonsekvent applikasjonstilstand.
- Større pakkestørrelse på grunn av duplisert kode.
Singleton-moduler løser disse problemene ved å garantere én felles avhengighet.
Implementere singleton-moduler med MF
Module Federation gjør det enkelt å erklære delte moduler som singleton-moduler ved å bruke alternativet singleton: true i Webpack-konfigurasjonen.
Når dette er angitt, sørger Webpack for at bare én versjon av den angitte modulen lastes inn og brukes av alle federerte applikasjoner (verter og remoter) under kjøring.
Kode: Konfigurere en singleton-modul
Slik konfigurerer du en delt modul, for eksempel react, som en singleton-modul i 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',
},
},
}),
],
};Forstå versjonering av delte moduler
I tillegg til å sikre én enkelt *instans* (singleton) må du også håndtere hvilken *versjon* av en delt modul som lastes inn.
Hva om én MFE trenger React v17 og en annen trenger React v18? Module Federation har mekanismer for å håndtere slike versjonskonflikter og sikre kompatibilitet, eller mislykkes på en kontrollert måte.
`requiredVersion` for spesifisering
Alternativet requiredVersion i konfigurasjonen shared lar Dem angi området for den semantiske versjonen (semver) som applikasjonen forventer for en delt modul.
Webpack prøver å finne en kompatibel versjon blant vertsapplikasjonen og de eksterne applikasjonene. Hvis en kompatibel versjon blir funnet, brukes den. Hvis ikke, kan Webpack laste inn en reserveversjon eller utløse en feil, avhengig av andre innstillinger.
Kode: Angi påkrevde versjoner
Slik kan De angi requiredVersion for et delt bibliotek:
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` for streng håndheving
Mens requiredVersion styrer valg av versjon, håndhever strictVersion: true dette strengt.
Hvis strictVersion: true er aktivert og en ekstern modul ber om en versjon som ikke er kompatibel med vertens requiredVersion (eller versjonen som allerede er lastet inn), utløser Module Federation en feil og hindrer applikasjonen i å lastes inn. Dette forhindrer uventet atferd som følge av versjonskonflikter.
Kode: Håndhev streng versjonering
Kombiner singleton, requiredVersion og strictVersion for kritiske avhengigheter:
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
},
}),
],
};Beste praksis for delte avhengigheter
Slik administrerer De singleton-moduler og versjonering på en effektiv måte:
- Bruk semantisk versjonering (SemVer): Følg formatet major.minor.patch for alle delte moduler.
- Kommuniser: Sørg for at teamene kjenner til oppdateringer av delte moduler og versjonskrav.
- Test kompatibilitet: Test de fødererte applikasjonene regelmessig for å sikre at delte moduler fungerer på tvers av alle eksterne applikasjoner og verter.
- Vær strategisk: Ikke alle delte moduler trenger å være singletons eller ha streng versjonering. Bruk disse innstillingene med omtanke, basert på hvor kritisk modulen er.
Rask sjekk: Singleton og versjonering
Ved konfigurering av delte moduler i Module Federation, hva er de viktigste fordelene ved å bruke singleton: true og strictVersion: true?
Oppsummering og neste trinn
De har nå lært om singleton-moduler og versjonering i Module Federation!
- Singleton-moduler sikrer at det bare finnes én instans av en delt avhengighet i den fødererte applikasjonen, noe som er avgjørende for tilstandsfulle biblioteker.
- Alternativene
requiredVersionogstrictVersionbidrar til å håndtere kompatibilitet og forhindre problemer som skyldes motstridende modulversjoner.
Disse teknikkene er avgjørende for å bygge robuste og forutsigbare Micro Frontend-applikasjoner.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 12
- Leksjoner
- 48
Ofte stilte spørsmål
Er leksjonen «Singleton-moduler og versjonering» gratis?
Ja – hele teksten i «Singleton-moduler og versjonering» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Mikrofrontend-arkitektur med Module Federation-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Mikrofrontend-arkitektur med Module Federation inneholder totalt 4 leksjoner.
Hva lærer jeg i «Singleton-moduler og versjonering»?
Forstå hvordan du sikrer at bare én instans av en modul lastes inn, og håndterer versjonskonflikter. Du øver på Mikrofrontend-arkitektur med Module Federation med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med Mikrofrontend-arkitektur med Module Federation?
Ingen tidligere erfaring er nødvendig. Mikrofrontend-arkitektur med Module Federation på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.
Hvor lang tid tar leksjonen «Singleton-moduler og versjonering»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne Mikrofrontend-arkitektur med Module Federation-leksjonen?
Ja. Alle Mikrofrontend-arkitektur med Module Federation-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Bruke delte avhengigheter
- Singleton-moduler og versjonering
- Dynamisk lasting av moduler
- Dele tilstand og verktøy på tvers av remotes