Grunderna i ESM — import/export, default kontra namngivna
Lär dig grunderna i ESM-import och -export: vad en modul är, namngivna kontra standardexporter, namespace-importer och en kort jämförelse med CommonJS.
Grunderna i ESM — import/export, default kontra namngivna är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 1 av 3. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för JavaScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i JavaScript Academy innehåller totalt 3 lektioner.
Vad är en modul?
Mål: Läsa modulesyntax med säkerhet.
- Vad en modul är
- Namngivna exporter kontra defaultexporter
- import * som namespace
- Kort jämförelse med CJS
Modul = fil + lokalt scope
En modul är en fil. Variablerna är lokala om de inte exporteras.
// A module is just a file with its own scope
// Here we simulate "module scope" by keeping variables local.
(function () {
const secret = 42; // local to this file/scope
function reveal() { return "value:" + secret; }
console.log("module-like scope:", typeof secret === "number", reveal());
})();
Namngivna exporter – idén
Namngivna exporter använder klamrar vid import: import { name }. Flera delar kan exporteras från samma fil.
// Named exports: you export multiple items by name
const exampleNamedExport = [
"export const PI = 3.14;",
"export function sum(a, b) { return a + b; }",
"import { PI, sum } from \\"./math.js\\";"
];
console.log("named export example:");
for (const line of exampleNamedExport) console.log(line);
// Tiny emulation: pretend we imported two named symbols
const PI = 3.14;
function sum(a, b) { return a + b; }
console.log("emulated use:", PI, sum(2, 3));
Defaultexport – idén
En defaultexport importeras utan klamrar: import name from "path".
// Default export: each module can have at most one default
const exampleDefault = [
"export default function greet(name) { return \\"Hi \\" + name; }",
"import greet from \\"./greet.js\\"; // no braces"
];
console.log("default export example:");
for (const line of exampleDefault) console.log(line);
// Emulation of default import usage
function greet(name) { return "Hi " + name; }
console.log("emulated default:", greet("Ayla"));
Namespaceimport
import * as ns samlar namngivna exporter i ett objekt (till exempel math.sum).
// Namespace import collects all named exports under one object
const exampleNamespace = [
"import * as math from \\"./math.js\\";",
"console.log(math.PI, math.sum(1, 2));"
];
console.log("namespace import example:");
for (const line of exampleNamespace) console.log(line);
// Emulate a namespace object
const math = { PI: 3.14, sum: function (a, b) { return a + b; } };
console.log("namespace use:", math.PI, math.sum(4, 5));
CJS-kontrast och kommentarer om upplösning
CJS kontra ESM (kort jämförelse):
- ESM: syntax med import/export (statisk). Exempel: import { x } from "./m.js".
- CJS: require/module.exports (dynamisk). Exempel: const x = require("./m.js").
- I ESM används explicita filändelser i webbläsaren och i många Node-konfigurationer (till exempel ./file.js).
Quiz om namngivna importer och defaultimporter
Snabb kontroll: Syntax för namngiven import.
Sammanfattning
Sammanfattning: En modul är en fil. Använd namngivna exporter med klamrar, en defaultexport utan klamrar och import * för ett namespace. CJS använder require och ESM använder import.
Lär dig JavaScript 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
- 59
- Lektioner
- 200
Vanliga frågor
Är lektionen ”Grunderna i ESM — import/export, default kontra namngivna” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Grunderna i ESM — import/export, default kontra namngivna”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i JavaScript Academy innehåller totalt 3 lektioner.
Vad lär jag mig i ”Grunderna i ESM — import/export, default kontra namngivna”?
Lär dig grunderna i ESM-import och -export: vad en modul är, namngivna kontra standardexporter, namespace-importer och en kort jämförelse med CommonJS. Ni övar på JavaScript 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 JavaScript Academy?
Du behöver inga förkunskaper. Utbildningen i JavaScript 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 ”Grunderna i ESM — import/export, default kontra namngivna”?
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 JavaScript Academy-lektionen?
Ja. Varje JavaScript 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
- Grunderna i ESM — import/export, default kontra namngivna
- Grunderna i CommonJS — require/module.exports och exports
- Modulupplösning i Node och webbläsarens bundlers