Dev-/prod-byggen, källkartor och miljöer
Förstå dev- och prod-byggen, vad källkartor används till och hur miljövärden styr beteendet (till exempel API-URL och felsökning).
Dev-/prod-byggen, källkartor och miljöer är en gratis lektion i React Academy på CoddyKit. Detta är lektion 1 av 3. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 3 lektioner.
Varför builds, maps och env?
Mål: Förstå skillnaden mellan development- och production-builds, vilken roll source maps har och hur env används i grunderna.
- Dev: snabb återkoppling, utförlig
- Prod: optimerad, tyst
- Source maps: felsök ursprunglig kod
Översikt över termer
- Dev build: HMR/hot reload, tydliga fel
- Prod build: minifierad, död kod borttagen
- Source map: kopplar minifierad output till källfilerna
- Env: konfigurerar API-URL och flaggor
Demo: mode-märke och dev-logg
Ett litet mode-märke; loggning som endast används i dev är tillåten när läget är development.
<div id="root"></div>Demo: felsökningsgränssnitt efter läge
Visa endast en liten debug-panel i development. I prod försvinner den.
<div id="root"></div>Demo: env-värden för beteende
Läs env-liknande värden (simulerade) för att välja API-URL och växla funktioner.
<div id="root"></div>Tips och fallgropar
- Håll loggar och debug-gränssnitt borta från prod
- Generera source maps för säker felsökning (håll dem privata)
- Använd env för att byta URL:er och funktioner
Kontroll av grunderna i prod-builds
Sammanfattning
Sammanfattning: Dev-builds är lättförståeliga och utförliga; prod-builds är optimerade. Source maps kopplar minifierad kod till originalen, och env-värden styr URL:er och feature-flaggor.
Lär dig React med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 88
- Lektioner
- 324
Vanliga frågor
Är lektionen ”Dev-/prod-byggen, källkartor och miljöer” gratis?
Ja – hela texten till ”Dev-/prod-byggen, källkartor och miljöer” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”Dev-/prod-byggen, källkartor och miljöer”?
Förstå dev- och prod-byggen, vad källkartor används till och hur miljövärden styr beteendet (till exempel API-URL och felsökning). Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Academy?
Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 3.
Hur lång tid tar lektionen ”Dev-/prod-byggen, källkartor och miljöer”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Academy-lektionen?
Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Dev-/prod-byggen, källkartor och miljöer
- Buntanalys och borttagning av oanvänd kod
- Grundläggande CI: lint → test → build