Résolution des modules dans Node et les outils de regroupement du navigateur
Découvrez comment les importations sont résolues : spécificateurs relatifs ou nus, extensions de fichiers (.js/.mjs/.cjs), fichiers index et points d’entrée simples des paquets
Résolution des modules dans Node et les outils de regroupement du navigateur est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 3 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 : comprendre comment les chemins d’importation sont résolus.
- Spécificateurs relatifs et nus
- Utilisez explicitement .js (valeur par défaut sûre)
- index.js dans les dossiers
- Points d’entrée des paquets (main/exports, aperçu)
Relatifs et nus
Les imports relatifs commencent par ./ ou ../. Les imports nus désignent des paquets installés.
// 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);
Les extensions sont importantes
Ajoutez l’extension .js avec ESM pour éviter les erreurs de résolution. Vous pouvez également voir .mjs ou .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);
Dossiers et index.js
Les dossiers exposent souvent index.js. Être explicite (.../index.js) est plus clair pour les débutants.
// 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);
Points d’entrée des paquets
Les paquets exposent leurs points d’entrée via main/exports. Les imports nus choisissent le fichier adapté à ESM ou 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");
Conseils et pièges
Conseils :
- Préférez les chemins relatifs avec .js pour les fichiers locaux.
- Utilisez les imports nus uniquement pour les paquets installés.
- Soyez explicite avec index.js pour éviter toute ambiguïté.
- Dans le navigateur, les imports doivent être des URL valides, souvent avec leurs extensions.
Quiz sur les bases de la résolution
Vérification rapide : chemin d’importation local sûr.
Récapitulatif
Récapitulatif : fichiers locaux → ./file.js. Paquets → noms nus. Les dossiers sont souvent résolus vers index.js. La connaissance de ces règles rend les imports simples et prévisibles.
Questions Fréquemment Posées
La leçon « Résolution des modules dans Node et les outils de regroupement du navigateur » est-elle gratuite ?
Oui — le texte complet de « Résolution des modules dans Node et les outils de regroupement du navigateur » 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 « Résolution des modules dans Node et les outils de regroupement du navigateur » ?
Découvrez comment les importations sont résolues : spécificateurs relatifs ou nus, extensions de fichiers (.js/.mjs/.cjs), fichiers index et points d’entrée simples des paquets 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 3 sur 3.
Combien de temps prend la leçon « Résolution des modules dans Node et les outils de regroupement du navigateur » ?
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
- Notions de base d’ESM — import/export, exportation par défaut ou nommée
- Notions de base de CommonJS — require/module.exports et exports
- Résolution des modules dans Node et les outils de regroupement du navigateur