ESM-laddarens egenheter och skillnader mellan sökvägar och URL:er
Lös URL:er säkert, förstå relativa kontra nakna specifierare och se hur fil-URL:er skiljer sig från webbläsar-URL:er. Små körbara demonstrationer.
ESM-laddarens egenheter och skillnader mellan sökvägar och URL:er är en gratis lektion i JavaScript Academy på CoddyKit. Detta är lektion 2 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: Lösa sökvägar säkert i olika miljöer.
- Använd URL-konstruktorn för att lösa relativa sökvägar
- Lär dig skillnaden mellan relativa och bare-specifiers
- Förstå skillnaden mellan file: och https:
- Undvik sköra strängsammanslagningar för sökvägar
Relativ sökväg mot bas
new URL(relative, base) hanterar sökvägsdelar och snedstreck 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);
Normalisera med ..
Konstruktorn tar bort ../ korrekt, så du behöver inga manuella stränglösningar.
// URL resolves "../" segments
const u = new URL("../assets/a.txt", "https://x.com/app/views/page/");
console.log("normalized:", u.href);
file:-URL:er i praktiken
file:-URL:er pekar på lokala filer i Node-liknande miljöer. Webbläsare kan inte läsa dem direkt utan en åtgärd från användaren.
// 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);
Olika typer av specifiers
ESM-laddare behandlar bare-specifiers annorlunda än relativa eller absoluta URL:er. Det är bra att känna till typen.
// 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"));
Nybörjarvänliga vanor
Tips:
- Föredra URL(relative, base) framför strängkonkatenering.
- Förstå skillnaden mellan bare- och relativa specifiers.
- Anta inte att filer finns i webbläsaren.
- Håll sökvägar korta och lättlästa för nybörjare.
Quiz: grunderna i URL-upplösning
Snabb kontroll: Bygg en URL på ett säkert sätt.
Sammanfattning
Sammanfattning: Använd URL-konstruktorn för att lösa relativa sökvägar (./, ../), skilj mellan bare- och relativa specifiers och kom ihåg att file:-URL:er skiljer sig från webbadresser.
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 ”ESM-laddarens egenheter och skillnader mellan sökvägar och URL:er” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen JavaScript Academy, inklusive ”ESM-laddarens egenheter och skillnader mellan sökvägar och URL:er”, 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 ”ESM-laddarens egenheter och skillnader mellan sökvägar och URL:er”?
Lös URL:er säkert, förstå relativa kontra nakna specifierare och se hur fil-URL:er skiljer sig från webbläsar-URL:er. Små körbara demonstrationer. 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 2 av 3.
Hur lång tid tar lektionen ”ESM-laddarens egenheter och skillnader mellan sökvägar och URL:er”?
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
- Globala objekt, tillgänglighet för fetch, fil- och nätverks-API:er
- ESM-laddarens egenheter och skillnader mellan sökvägar och URL:er
- Miljövariabler och konfigurationsmönster