Resolución de módulos en Node y bundlers del navegador
Aprenda cómo se resuelven los imports: specifiers relativos frente a bare, extensiones de archivo (.js/.mjs/.cjs), archivos index y puntos de entrada sencillos de paquetes.
Resolución de módulos en Node y bundlers del navegador es una lección gratuita de JavaScript Academy en CoddyKit. Esta es la lección 3 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de JavaScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de JavaScript Academy incluye 3 lecciones en total.
Visión general
Objetivo: sepa cómo se resuelven las rutas de importación.
- Especificadores relativos frente a bare
- Use .js explícitamente (opción predeterminada segura)
- index.js en las carpetas
- Puntos de entrada de los paquetes (main/exports, visión general)
Relativas frente a bare
Las importaciones relativas comienzan por ./ o ../. Las importaciones bare apuntan a paquetes instalados.
// 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);
Las extensiones importan
Añada la extensión .js en ESM para evitar errores de resolución. También puede encontrar .mjs o .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);
Carpetas e index.js
Las carpetas suelen exponer index.js. Ser explícito (.../index.js) resulta claro para principiantes.
// 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);
Puntos de entrada de los paquetes
Los paquetes exponen puntos de entrada mediante main/exports. Las importaciones bare eligen el archivo adecuado para ESM o 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");
Consejos y dificultades
Consejos:
- Prefiera rutas relativas con .js para los archivos locales.
- Use importaciones bare solo para paquetes instalados.
- Sea explícito con index.js para evitar ambigüedades.
- En el navegador, las importaciones deben ser URL válidas (a menudo con extensiones).
Cuestionario sobre conceptos básicos de resolución
Comprobación rápida: ruta de importación local segura.
Repaso
Repaso: archivos locales → ./file.js. Paquetes → nombres bare. Las carpetas suelen resolverse en index.js. Conocer estas reglas mantiene las importaciones sencillas y predecibles.
Preguntas frecuentes
¿La lección «Resolución de módulos en Node y bundlers del navegador» es gratis?
Sí — el texto completo de «Resolución de módulos en Node y bundlers del navegador» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de JavaScript Academy, actualiza a CoddyKit PRO. El curso de JavaScript Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Resolución de módulos en Node y bundlers del navegador»?
Aprenda cómo se resuelven los imports: specifiers relativos frente a bare, extensiones de archivo (.js/.mjs/.cjs), archivos index y puntos de entrada sencillos de paquetes. Practicas JavaScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar JavaScript Academy?
No se requiere experiencia previa. JavaScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 3.
¿Cuánto tiempo toma la lección «Resolución de módulos en Node y bundlers del navegador»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de JavaScript Academy?
Sí. Cada lección de JavaScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Fundamentos de ESM: import/export, default frente a named
- Fundamentos de CommonJS: require/module.exports y exports
- Resolución de módulos en Node y bundlers del navegador