Det grundlæggende i ESM — import/export, default kontra named
Lær det grundlæggende i ESM-import og -eksport: hvad et modul er, named kontra default exports, namespace imports og en kort sammenligning med CommonJS.
Det grundlæggende i ESM — import/export, default kontra named er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 1 af 3. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 3 lektioner i alt.
Hvad er et modul?
Mål: Læs moduls syntaks med sikkerhed.
- Hvad et modul er
- Navngivne kontra standard-eksporter
- import * som navneområde
- Kort sammenligning med CJS
Modul = fil + lokalt gyldighedsområde
Et modul er en fil. Dets variabler er lokale, medmindre du exporterer dem.
// 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());
})();
Navngivne eksporter – idéen
Navngivne eksporter bruger klammer ved import: import { name }. Du kan eksportere flere elementer fra én 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));
Standardeksport – idéen
En standardeksport importeres uden klammer: 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"));
Import af navneområde
import * as ns samler navngivne eksporter i ét objekt (f.eks. 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));
Kontrast mellem CJS og ESM samt bemærkninger om opløsning
CJS kontra ESM (kort sammenligning):
- ESM: import/export-syntaks (statisk). Eksempel: import { x } from "./m.js".
- CJS: require/module.exports (dynamisk). Eksempel: const x = require("./m.js").
- I ESM skal du bruge eksplicitte filendelser i browseren og i mange Node-opsætninger (f.eks. ./file.js).
Quiz om navngiven kontra standardimport
Hurtigt tjek: Syntaks for navngiven import.
Opsamling
Opsamling: Et modul er en fil. Brug navngivne eksporter med klammer, én standardeksport uden klammer og import * til et navneområde. CJS bruger require, og ESM bruger import.
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
- 59
- Lektioner
- 200
Ofte stillede spørgsmål
Er lektionen “Det grundlæggende i ESM — import/export, default kontra named” gratis?
Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “Det grundlæggende i ESM — import/export, default kontra named”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 3 lektioner i alt.
Hvad lærer jeg i “Det grundlæggende i ESM — import/export, default kontra named”?
Lær det grundlæggende i ESM-import og -eksport: hvad et modul er, named kontra default exports, namespace imports og en kort sammenligning med CommonJS. Du øver dig i JavaScript Academy 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å JavaScript Academy?
Der kræves ingen tidligere erfaring. JavaScript Academy 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 1 af 3.
Hvor lang tid tager lektionen “Det grundlæggende i ESM — import/export, default kontra named”?
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 JavaScript Academy-lektion?
Ja. Alle JavaScript Academy-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
- Det grundlæggende i ESM — import/export, default kontra named
- Det grundlæggende i CommonJS — require/module.exports og exports
- Modulopløsning i Node og browserbundlere