Kørsel og fejlfinding af Deres federerede app lokalt
Lær at starte host- og remote-apps sammen, inspicere federerede moduler i browseren og fejlfinde almindelige problemer under lokal udvikling.
Kørsel og fejlfinding af Deres federerede app lokalt er en gratis Mikrofrontendarkitektur med Module Federation-lektion på CoddyKit. Dette er lektion 4 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.
Opsætning af lokal udvikling
En fødereret app består reelt af flere apps. Under udviklingen kører du hver remote og værten samtidig, hver på sin egen port.
Tildeling af porte
Giv hver app en fast port til udviklingsserveren, så værten pålideligt kan referere til hver remote under udviklingen.
devServer: { port: 3001 } // remote
devServer: { port: 3000 } // hostKør alt på én gang
Det er besværligt manuelt at åbne mange terminaler. Et værktøj som concurrently starter alle udviklingsservere med én kommando.
"scripts": {
"dev": "concurrently \"npm:dev:host\" \"npm:dev:remote\""
}Peg værten på remotes
Under udviklingen refererer værten til hver remote via dens URL til udviklingsserveren samt den eksponerede entry-fil.
remotes: {
cart: "cart@http://localhost:3001/remoteEntry.js"
}Undersøgelse af remoteEntry.js
Hver remote eksponerer et remoteEntry.js-manifest. Åbn det direkte i browseren for at bekræfte, at remoten kører, og se, hvilke moduler den eksponerer.
Brug af browserens udviklerværktøjer
Hold øje med indlæsningen af remoteEntry.js og chunks for de eksponerede moduler i fanen Netværk. En 404-fejl her er den mest almindelige fejl i føderering.
Almindelig fejl: Modul ikke fundet
Fejlen Cannot find module cart/Widget betyder normalt, at den eksponerede sti i remotens konfiguration ikke stemmer overens med det, værten importerer. Navnene skal stemme nøjagtigt overens.
exposes: { "./Widget": "./src/Widget" } // remote
import Widget from "cart/Widget"; // hostAlmindelig fejl: Dobbelt indlæsning af React
Hvis React-hooks udløser Invalid hook call, indlæses der to kopier af React. Bekræft, at singleton: true er angivet for React i alle app-konfigurationer.
Begrænsninger ved hot reload
Ændringer i en remote bliver muligvis ikke automatisk genindlæst i værten. Opdater værten, eller genstart remotens udviklingsserver, efter redigering af eksponerede moduler.
Logning af fødereringsopløsning
Aktivér detaljeret webpack-statistik, eller tilføj konsollogge i din bootstrap for at bekræfte, hvilken remote og hvilke delte versioner der blev opløst under kørsel.
console.log("loading remote cart...");
import("cart/Widget").then(m => mount(m.default));En lokal fejlfindingsliste
Når noget går i stykker, skal du kontrollere følgende i rækkefølge:
- Kører alle udviklingsservere?
- Indlæses
remoteEntry.jsuden 404-fejl? - Stemmer de eksponerede navne overens med importerne?
- Er React en singleton overalt?
Hurtigt tjek
Test din viden om lokal fejlfinding.
Opsummering
Du har lært at køre og fejlfinde fødererede apps lokalt:
- Kør vært og remotes sammen på faste porte
- Brug
concurrentlytil opstart med én kommando - Undersøg
remoteEntry.jsog fanen Netværk - Ret fejl med manglende moduler og fejl med dobbelt indlæsning af React
- Følg en hurtig fejlfindingsliste
Problemfri lokal fejlfinding gør MFE-udviklingen hurtigere.
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 “Kørsel og fejlfinding af Deres federerede app lokalt” gratis?
Ja — hele teksten til “Kørsel og fejlfinding af Deres federerede app lokalt” 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 “Kørsel og fejlfinding af Deres federerede app lokalt”?
Lær at starte host- og remote-apps sammen, inspicere federerede moduler i browseren og fejlfinde almindelige problemer under lokal udvikling. 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 4 af 4.
Hvor lang tid tager lektionen “Kørsel og fejlfinding af Deres federerede app lokalt”?
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
- Projektopsætning og konfiguration
- Deling af moduler og komponenter
- Opbygning af en simpel federeret app
- Kørsel og fejlfinding af Deres federerede app lokalt