Eigenaardigheden van de ESM-loader, verschillen tussen paden en URL's
Los URL's veilig op, begrijp relatieve versus kale specifiers en bekijk hoe file-URL's verschillen van web-URL's. Kleine, uitvoerbare demo's
Eigenaardigheden van de ESM-loader, verschillen tussen paden en URL's is een gratis JavaScript Academy-les op CoddyKit. Dit is les 2 van 3. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 3 lessen.
Overzicht
Doel: Paden veilig oplossen in verschillende omgevingen.
- Gebruik de constructor van URL om relatieve paden op te lossen
- Ken het verschil tussen relatieve en kale aanduidingen
- Zie de verschillen tussen file: en https:
- Vermijd kwetsbare tekenreekssamenvoegingen voor paden
Relatief ten opzichte van de basis
new URL(relative, base) verwerkt padonderdelen en schuine strepen correct.
// 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);
Normaliseren met ..
De constructor verwijdert ../ correct, zodat je geen handmatige bewerkingen op tekenreeksen nodig hebt.
// URL resolves "../" segments
const u = new URL("../assets/a.txt", "https://x.com/app/views/page/");
console.log("normalized:", u.href);
Gebruik van file:-URL's
file:-URL's verwijzen in Node-achtige omgevingen naar lokale bestanden; browsers kunnen ze niet rechtstreeks lezen zonder actie van de gebruiker.
// 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);
Typen aanduidingen
ESM-laders behandelen kale aanduidingen anders dan relatieve of absolute URL's. Het helpt als je het type kent.
// 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"));
Goede gewoonten voor beginners
Tips:
- Geef de voorkeur aan URL(relative, base) boven het samenvoegen van tekenreeksen.
- Begrijp het verschil tussen kale en relatieve aanduidingen.
- Ga er niet van uit dat bestanden in de browser bestaan.
- Houd paden kort en leesbaar voor beginners.
Kennistoets over de basis van URL-oplossing
Korte controle: veilig een URL opbouwen.
Samenvatting
Samenvatting: Gebruik de constructor van URL om relatieve paden (./, ../) op te lossen, herken het verschil tussen kale en relatieve aanduidingen en onthoud dat file:-URL's anders zijn dan web-URL's.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 59
- Lessen
- 200
Veelgestelde vragen
Is de les “Eigenaardigheden van de ESM-loader, verschillen tussen paden en URL's” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Eigenaardigheden van de ESM-loader, verschillen tussen paden en URL's”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 3 lessen.
Wat leer ik in “Eigenaardigheden van de ESM-loader, verschillen tussen paden en URL's”?
Los URL's veilig op, begrijp relatieve versus kale specifiers en bekijk hoe file-URL's verschillen van web-URL's. Kleine, uitvoerbare demo's Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met JavaScript Academy te beginnen?
Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 3.
Hoe lang duurt de les “Eigenaardigheden van de ESM-loader, verschillen tussen paden en URL's”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?
Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Globals, beschikbaarheid van fetch en bestands-/netwerk-API's
- Eigenaardigheden van de ESM-loader, verschillen tussen paden en URL's
- Omgevingsvariabelen en configuratiepatronen