Modulupplösning i Node och webbläsarens bundlers
Lär dig hur importer löses upp: relativa kontra nakna specifierare, filändelserna (.js/.mjs/.cjs), indexfiler och enkla paketets ingångspunkter.
Modulupplösning i Node och webbläsarens bundlers är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 3 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.
Överblick
Mål: Förstå hur importsökvägar löses.
- Relativa kontra bare-speciferare
- Använd explicita .js (säkert standardval)
- index.js i mappar
- Paketens startpunkter (main/exports, i korthet)
Relativa kontra bare
Relativa importer börjar med ./ eller ../. Bare-importer pekar på installerade paket.
// Relative path imports start with ./ or ../
// Bare specifiers refer to packages installed (e.g., "lodash")
const examples = [
"import { sum } from \\"./math.js\\"; // relative, file nearby",
"import leftPad from \\"left-pad\\"; // bare, from node_modules",
"import thing from \\"../lib/thing.js\\"; // parent folder"
];
console.log("specifiers:");
for (const line of examples) console.log(line);
Filändelser spelar roll
Lägg till filändelsen .js i ESM för att undvika upplösningsfel. Ni kan också se .mjs eller .cjs.
// Include file extensions for ESM (safe beginner habit)
const extTips = [
"Good (ESM): import util from \\"./util.js\\"",
"Also seen: .mjs for ESM files, .cjs for CJS files",
"Avoid: import \\"./util\\" (may fail in Node/browsers)"
];
console.log("extensions:");
for (const t of extTips) console.log(t);
Mappar och index.js
Mappar exponerar ofta index.js. Att vara explicit (.../index.js) är tydligt för nybörjare.
// If you import a folder, many setups look for index.js inside it
const folderExample = [
"my-lib/",
" index.js",
" helpers/",
" index.js"
];
for (const l of folderExample) console.log(l);
// Typical imports
const dirImports = [
"import main from \\"./my-lib/index.js\\";",
"import alsoMain from \\"./my-lib/\\"; // some setups resolve to index.js",
"import helper from \\"./my-lib/helpers/index.js\\";"
];
console.log("imports:");
for (const l of dirImports) console.log(l);
Paketens startpunkter
Paket exponerar startpunkter via main/exports. Bare-importer väljer rätt fil för ESM eller CJS.
// Installed packages declare entry points in package.json
const pkgJson = [
"{",
" \\"name\\": \\"tiny-lib\\",",
" \\"main\\": \\"dist/cjs/index.cjs\\",",
" \\"exports\\": {",
" \\".\\": { \\"import\\": \\"./dist/esm/index.js\\", \\"require\\": \\"./dist/cjs/index.cjs\\" }",
" }",
"}"
];
console.log("package.json entry (example):");
for (const l of pkgJson) console.log(l);
// Importing a bare specifier will use these fields
console.log("import tiny-lib -> resolves to ESM or CJS entry depending on environment");
Tips och fallgropar
Tips:
- Föredra relativa sökvägar med .js för lokala filer.
- Använd bare-importer endast för installerade paket.
- Var explicit med index.js för att undvika tvetydighet.
- I webbläsaren måste importer vara giltiga URL:er (ofta med filändelser).
Quiz om importsökvägar
Snabb kontroll: Säker lokal importsökväg.
Sammanfattning
Sammanfattning: Lokala filer → ./file.js. Paket → bare-namn. Mappar löses ofta till index.js. Genom att känna till dessa regler förblir importer enkla och förutsägbara.
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 ”Modulupplösning i Node och webbläsarens bundlers” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”Modulupplösning i Node och webbläsarens bundlers”, 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 ”Modulupplösning i Node och webbläsarens bundlers”?
Lär dig hur importer löses upp: relativa kontra nakna specifierare, filändelserna (.js/.mjs/.cjs), indexfiler och enkla paketets ingångspunkter. 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 3 av 3.
Hur lång tid tar lektionen ”Modulupplösning i Node och webbläsarens bundlers”?
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