Introduktion til Module Federation
Forstå hovedideen bag Module Federation, og hvordan det gør det muligt for applikationer dynamisk at eksponere og anvende moduler.
Introduktion til Module Federation er en gratis Mikrofrontendarkitektur med Module Federation-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Mikrofrontendarkitektur med Module Federation, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Mikrofrontendarkitektur med Module Federation-kurset indeholder 4 lektioner i alt.
Hvad er Module Federation?
Velkommen! I denne lektion dykker vi ned i Module Federation, en effektiv funktion i Webpack, som er central for at bygge moderne Micro Frontends.
Den gør det muligt for forskellige JavaScript-applikationer dynamisk at dele og bruge kode fra hinanden under kørsel.
Problemet med monolitten
Traditionelt bygges store webapplikationer som én enorm kodebase – en monolit. Det kan føre til:
- Langsomme udviklingscyklusser
- Vanskeligheder med at skalere teams
- Tæt kobling mellem dele
Module Federation hjælper med at overvinde disse udfordringer ved at muliggøre en mere modulær tilgang.
Dynamisk kodedeling
Kerneideen i Module Federation er dynamisk kodedeling. I stedet for at samle al kode ved byggetid lader det applikationer indlæse dele af koden fra andre applikationer under kørsel.
Tænk på det som en app, der siger: "Jeg skal bruge denne komponent, og jeg ved, hvor jeg kan hente den fra en anden kørende app!"
De vigtigste aktører: Host og Remote
I en Module Federation-opsætning har vi to hovedtyper af applikationer:
- Remote Application: Denne app eksponerer sin kode (komponenter og funktioner), så andre kan bruge den.
- Host Application: Denne app bruger den kode, som en remote-applikation har eksponeret.
En app kan samtidig være både host og remote!
Eksponering af moduler: Remote-apps
En fjernapplikation bruger Webpacks ModuleFederationPlugin til at angive, hvilke dele af dens kode den vil eksponere. Disse eksponerede moduler bliver tilgængelige, så andre applikationer kan bruge dem.
Her er et forenklet eksempel på, hvordan en fjernapp kan eksponere en Button-komponent:
/* webpack.config.js (Remote App) */
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
// ... other webpack config
plugins: [
new ModuleFederationPlugin({
name: 'remoteApp',
filename: 'remoteEntry.js',
exposes: {
'./Button': './src/Button.js',
},
}),
],
};Brug af moduler: værtsapps
En værtsapplikation bruger også ModuleFederationPlugin til at angive, hvilke fjernapplikationer den vil hente moduler fra. Den angiver en URL, hvor fjernapplikationens entry-fil (f.eks. remoteEntry.js) kan findes.
Sådan kan en værtsapp angive, at den vil bruge remoteApp:
/* webpack.config.js (Host App) */
const { ModuleFederationPlugin } = require('webpack').container;
module.exports = {
// ... other webpack config
plugins: [
new ModuleFederationPlugin({
name: 'hostApp',
remotes: {
remoteApp: 'remoteApp@http://localhost:8081/remoteEntry.js',
},
}),
],
};Sådan fungerer det: Entry-filen
Når en værtsapplikation starter, indlæser den ikke straks al fjernkode. I stedet indlæser den først en lille fil fra fjernapplikationen, der hedder remoteEntry.js.
Denne fil fungerer som et manifest, der fortæller værten, hvilke moduler fjernapplikationen eksponerer, og hvordan de indlæses dynamisk, hvis det bliver nødvendigt. Koden hentes først, når der bliver anmodet om den!
Fordelen ved uafhængige udrulninger
En af de største fordele ved Module Federation er muligheden for uafhængige udrulninger.
Teams kan udvikle, teste og udrulle deres mikrofrontends separat uden at koordinere en stor, synkroniseret udgivelse af hele applikationen. Det gør leveringen hurtigere og mindsker risikoen.
Deling af mere end brugergrænsefladen
Module Federation bruges ikke kun til at dele UI-komponenter. Du kan eksponere og bruge forskellige typer kode:
- Hjælpefunktioner
- Datatjenester
- React-hooks eller tilsvarende logik
- Delte typografier eller temaer
Det giver mulighed for effektiv genbrug af kode på tværs af dine fødererede applikationer.
Test din viden
Module Federation introducerer nye måder, hvorpå applikationer kan interagere. Hvilke af følgende udsagn beskriver kernekoncepterne korrekt?
Opsummering af Module Federation
Godt gået! Du har forstået den grundlæggende idé bag Module Federation.
- Det er en Webpack-funktion til deling af kode dynamisk.
- Apps kan være værter (der bruger moduler) eller fjernapplikationer (der eksponerer moduler).
- Det muliggør uafhængige udrulninger og effektiv genbrug af kode.
Derefter ser vi nærmere på, hvordan værts- og fjernapplikationer sættes op!
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 12
- Lektioner
- 48
Ofte stillede spørgsmål
Er lektionen “Introduktion til Module Federation” gratis?
Ja — hele teksten til “Introduktion til Module Federation” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Mikrofrontendarkitektur med Module Federation-kurset, skal du opgradere til CoddyKit PRO. Mikrofrontendarkitektur med Module Federation-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Introduktion til Module Federation”?
Forstå hovedideen bag Module Federation, og hvordan det gør det muligt for applikationer dynamisk at eksponere og anvende moduler. Du øver dig i Mikrofrontendarkitektur med Module Federation med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Mikrofrontendarkitektur med Module Federation?
Der kræves ingen tidligere erfaring. Mikrofrontendarkitektur med Module Federation på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “Introduktion til Module Federation”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Mikrofrontendarkitektur med Module Federation-lektion?
Ja. Alle Mikrofrontendarkitektur med Module Federation-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Gennemgang af Webpack-grundlaget
- Introduktion til Module Federation
- Host- og remote-applikationer
- Konfiguration af delte afhængigheder