Particularités du chargeur ESM, différences entre chemins et URL
Résolvez les URL en toute sécurité, comprenez les spécificateurs relatifs ou nus et observez les différences entre les URL de fichiers et les URL Web. Petites démonstrations exécutables
Particularités du chargeur ESM, différences entre chemins et URL est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 3 leçons au total.
Vue d’ensemble
Objectif : résoudre les chemins en toute sécurité dans différents environnements.
- Utilisez le constructeur URL pour résoudre les références relatives
- Faites la distinction entre les spécificateurs relatifs et les spécificateurs nus
- Observez les différences entre file: et https:
- Évitez les concaténations de chaînes fragiles pour les chemins
Relatif par rapport à base
new URL(relative, base) gère correctement les éléments de chemin et les barres obliques.
// 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);
Normaliser avec ..
Le constructeur supprime correctement ../ ; vous n’avez donc pas besoin d’astuces manuelles sur les chaînes.
// URL resolves "../" segments
const u = new URL("../assets/a.txt", "https://x.com/app/views/page/");
console.log("normalized:", u.href);
Aperçu des URL file:
Les URL file: pointent vers des fichiers locaux dans les contextes de type Node ; les navigateurs ne peuvent pas les lire directement sans action de l’utilisateur.
// 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);
Types de spécificateurs
Les chargeurs ESM traitent les spécificateurs nus différemment des URL relatives ou absolues. Il est utile de connaître leur type.
// 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"));
Bonnes habitudes pour débuter
Conseils :
- Préférez URL(relative, base) à la concaténation de chaînes.
- Comprenez la différence entre les spécificateurs nus et relatifs.
- Évitez de supposer que des fichiers existent dans le navigateur.
- Gardez les chemins courts et lisibles pour les débutants.
Quiz sur les bases de la résolution d’URL
Vérification rapide : construire une URL en toute sécurité.
Récapitulatif
Récapitulatif : utilisez le constructeur URL pour résoudre les références relatives (./, ../), faites la distinction entre les spécificateurs nus et relatifs et souvenez-vous que les URL file: diffèrent des URL web.
Questions Fréquemment Posées
La leçon « Particularités du chargeur ESM, différences entre chemins et URL » est-elle gratuite ?
Oui — le texte complet de « Particularités du chargeur ESM, différences entre chemins et URL » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 3 leçons au total.
Qu'est-ce que j'apprendrai dans « Particularités du chargeur ESM, différences entre chemins et URL » ?
Résolvez les URL en toute sécurité, comprenez les spécificateurs relatifs ou nus et observez les différences entre les URL de fichiers et les URL Web. Petites démonstrations exécutables Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer JavaScript Academy ?
Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 3.
Combien de temps prend la leçon « Particularités du chargeur ESM, différences entre chemins et URL » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?
Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Variables globales, disponibilité de fetch, API de fichiers et de réseau
- Particularités du chargeur ESM, différences entre chemins et URL
- Variables d’environnement et modèles de configuration