Eigenheiten des ESM-Loaders, Unterschiede zwischen Pfad und URL
URLs sicher auflösen, relative und bare Specifier verstehen und sehen, wie sich Datei-URLs von Web-URLs unterscheiden. Kleine, ausführbare Demos
Eigenheiten des ESM-Loaders, Unterschiede zwischen Pfad und URL ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 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: Pfade sicher über verschiedene Umgebungen hinweg auflösen.
- Verwenden Sie den URL-Konstruktor, um relative Pfade aufzulösen
- Unterscheiden Sie relative und bare Spezifizierer
- Erkennen Sie die Unterschiede zwischen file: und https:
- Vermeiden Sie fragile String-Verkettungen für Pfade
Relativ zu einer Basis
new URL(relative, base) verarbeitet Pfadbestandteile und Schrägstriche korrekt.
// Use URL to resolve "./" against a base
const base = "https://site.com/app/screens/";
const img = new URL("./images/icon.png", base);
console.log("resolved:", img.href);
Mit .. normalisieren
Der Konstruktor entfernt ../ korrekt, sodass Sie keine manuellen String-Tricks benötigen.
// URL resolves "../" segments
const u = new URL("../assets/a.txt", "https://x.com/app/views/page/");
console.log("normalized:", u.href);
file:-URLs in der Praxis
file:-URLs verweisen in Node-ähnlichen Umgebungen auf lokale Dateien; Browser können sie ohne Benutzeraktion nicht direkt lesen.
// You can also work with file: URLs (no actual file I/O here)
const baseFile = "file:///home/user/project/src/";
const file = new URL("./data/sample.txt", baseFile);
console.log("file url:", file.href);
Arten von Spezifizierern
ESM-Lader behandeln bare Spezifizierer anders als relative oder absolute URLs. Es hilft, die jeweilige Art zu kennen.
// Tiny helper: categorize a module specifier
function specKind(s) {
if (typeof s !== "string") return "unknown";
if (s.startsWith("./") || s.startsWith("../") || s.startsWith("/")) return "relative-or-absolute";
if (s.startsWith("http://") || s.startsWith("https://") || s.startsWith("file://")) return "url";
return "bare"; // like "lodash" or "fs"
}
console.log("kind ./util.js:", specKind("./util.js"));
console.log("kind lodash :", specKind("lodash"));
console.log("kind https:// :", specKind("https://cdn.site/x.js"));
Anfängerfreundliche Gewohnheiten
Tipps:
- Bevorzugen Sie URL(relative, base) gegenüber String-Verkettungen.
- Verstehen Sie den Unterschied zwischen bare und relative Spezifizierern.
- Gehen Sie nicht davon aus, dass Dateien im Browser vorhanden sind.
- Halten Sie Pfade für Anfänger kurz und gut lesbar.
Quiz zu den Grundlagen der URL-Auflösung
Kurzer Test: Eine URL sicher erstellen.
Zusammenfassung
Zusammenfassung: Verwenden Sie den URL-Konstruktor, um relative Pfade (./, ../) aufzulösen, unterscheiden Sie bare und relative Spezifizierer und denken Sie daran, dass file:-URLs sich von Web-URLs unterscheiden.
Häufig gestellte Fragen
Ist die Lektion „Eigenheiten des ESM-Loaders, Unterschiede zwischen Pfad und URL“ kostenlos?
Ja — der vollständige Text von „Eigenheiten des ESM-Loaders, Unterschiede zwischen Pfad und URL“ 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 „Eigenheiten des ESM-Loaders, Unterschiede zwischen Pfad und URL“?
URLs sicher auflösen, relative und bare Specifier verstehen und sehen, wie sich Datei-URLs von Web-URLs unterscheiden. Kleine, ausführbare Demos 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 2 von 3.
Wie lange dauert die Lektion „Eigenheiten des ESM-Loaders, Unterschiede zwischen Pfad und URL“?
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
- Globale Objekte, fetch-Verfügbarkeit, Datei- und Netzwerk-APIs
- Eigenheiten des ESM-Loaders, Unterschiede zwischen Pfad und URL
- Umgebungsvariablen und Konfigurationsmuster