Modulauflösung in Node und Browser-Bundlern
Lernen, wie Imports aufgelöst werden: relative und bare Specifier, Dateiendungen (.js/.mjs/.cjs), index-Dateien und einfache Package-Einstiegspunkte
Modulauflösung in Node und Browser-Bundlern ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 3 Lektionen.
Überblick
Ziel: Verstehen Sie, wie Importpfade aufgelöst werden.
- Relative und bare Spezifizierer
- Verwenden Sie explizit .js (sichere Standardeinstellung)
- index.js in Ordnern
- Paketeinstiegspunkte (main/exports, kurzer Einblick)
Relativ und bare
Relative Importe beginnen mit ./ oder ../. Bare Importe verweisen auf installierte Pakete.
// 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);
Endungen sind wichtig
Fügen Sie in ESM die Endung .js hinzu, um Auflösungsfehler zu vermeiden. Sie sehen möglicherweise auch .mjs oder .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);
Ordner und index.js
Ordner stellen häufig index.js bereit. Die explizite Angabe (.../index.js) ist für Einsteiger verständlich.
// 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);
Paketeinstiegspunkte
Pakete stellen über main/exports Einstiegspunkte bereit. Bare Importe wählen die passende Datei für ESM oder 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");
Tipps und Fallstricke
Tipps:
- Bevorzugen Sie für lokale Dateien relative Pfade mit .js.
- Verwenden Sie bare Importe nur für installierte Pakete.
- Geben Sie index.js explizit an, um Mehrdeutigkeiten zu vermeiden.
- Im Browser müssen Importe gültige URLs sein (häufig mit Endungen).
Quiz zu den Grundlagen der Auflösung
Kurztest: Sicherer lokaler Importpfad.
Zusammenfassung
Zusammenfassung: Lokale Dateien → ./file.js. Pakete → bare Namen. Ordner werden häufig zu index.js aufgelöst. Wenn Sie diese Regeln kennen, bleiben Importe einfach und vorhersehbar.
Häufig gestellte Fragen
Ist die Lektion „Modulauflösung in Node und Browser-Bundlern“ kostenlos?
Ja — der vollständige Text von „Modulauflösung in Node und Browser-Bundlern“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 3 Lektionen.
Was lerne ich in „Modulauflösung in Node und Browser-Bundlern“?
Lernen, wie Imports aufgelöst werden: relative und bare Specifier, Dateiendungen (.js/.mjs/.cjs), index-Dateien und einfache Package-Einstiegspunkte Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um JavaScript Academy zu starten?
Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 3.
Wie lange dauert die Lektion „Modulauflösung in Node und Browser-Bundlern“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?
Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- ESM-Grundlagen – import/export, default vs. named
- CommonJS-Grundlagen – require/module.exports und exports
- Modulauflösung in Node und Browser-Bundlern