Moduloppløsning i Node og nettleserbundlere
Lær hvordan importer løses: relative kontra bare specifiers, filendelser (.js/.mjs/.cjs), index-filer og enkle pakkeinnganger.
Moduloppløsning i Node og nettleserbundlere er en gratis leksjon i JavaScript Academy på CoddyKit. Dette er leksjon 3 av 3. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i JavaScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i JavaScript Academy inneholder totalt 3 leksjoner.
Det store bildet
Mål: Forstå hvordan importbaner løses.
- Relative og bare specifiers
- Bruk eksplisitt .js (trygt standardvalg)
- index.js i mapper
- Inngangspunkter for pakker (main/exports, kort innføring)
Relative og bare
Relative importer starter med ./ eller ../. Bare importer peker til installerte pakker.
// 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);
Filendelser er viktige
Legg til filendelsen .js i ESM for å unngå feil ved oppløsning. De kan også 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);
Mapper og index.js
Mapper eksponerer ofte index.js. Det er tydelig for nybegynnere å være eksplisitt (.../index.js).
// 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);
Inngangspunkter for pakker
Pakker eksponerer inngangspunkter via main/exports. Bare importer velger riktig fil for 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 og fallgruver
Tips:
- Foretrekk relative baner med .js for lokale filer.
- Bruk bare importer bare for installerte pakker.
- Vær eksplisitt med index.js for å unngå tvetydighet.
- I nettleseren må importer være gyldige URL-er (ofte med filendelser).
Quiz om grunnleggende oppløsning
Hurtigsjekk: Trygg lokal importbane.
Oppsummering
Oppsummering: Lokale filer → ./file.js. Pakker → bare navn. Mapper løses ofte til index.js. Når De kjenner disse reglene, blir importer enkle og forutsigbare.
Lær deg JavaScript med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 59
- Leksjoner
- 200
Ofte stilte spørsmål
Er leksjonen «Moduloppløsning i Node og nettleserbundlere» gratis?
Ja – du kan lese valgfritt 3 av leksjonene i læringsstien JavaScript Academy, inkludert «Moduloppløsning i Node og nettleserbundlere», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i JavaScript Academy inneholder totalt 3 leksjoner.
Hva lærer jeg i «Moduloppløsning i Node og nettleserbundlere»?
Lær hvordan importer løses: relative kontra bare specifiers, filendelser (.js/.mjs/.cjs), index-filer og enkle pakkeinnganger. Du øver på JavaScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med JavaScript Academy?
Ingen tidligere erfaring er nødvendig. JavaScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 3.
Hvor lang tid tar leksjonen «Moduloppløsning i Node og nettleserbundlere»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne JavaScript Academy-leksjonen?
Ja. Alle JavaScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- Det grunnleggende om ESM — import/export, default kontra named
- Det grunnleggende om CommonJS — require/module.exports og exports
- Moduloppløsning i Node og nettleserbundlere