Los módulos en JavaScript te permiten dividir tu código en archivos separados y reutilizarlos donde los necesites usando import y export. Aprenderás cómo configurarlos en JavaScript Vanilla, qué palabras reservadas usar y cómo evitar los errores típicos al ejecutarlos con Node.

¿Qué son los módulos en JavaScript y por qué importan?

Antes de ECMAScript 6, JavaScript no tenía una forma nativa de trabajar con módulos. Tu código vivía en archivos sueltos sin una manera oficial de comunicarse entre sí. Con ES6 llegaron las palabras reservadas import y export, y aquí viene lo interesante: cada archivo puede convertirse en un módulo independiente que expone su lógica al resto del proyecto.

Esto cambia la forma en la que organizas tu código. Puedes separar funciones, objetos, clases o utilerías en archivos distintos y traerlos solo cuando los necesites.

¿Qué es un módulo en JavaScript? Es un archivo .js que exporta su lógica (funciones, clases u objetos) para que otros archivos la importen y la reutilicen.

¿Cómo creo un módulo con export default?

La idea es simple: defines tu lógica en un archivo y la expones con export. En el ejemplo de la clase, creamos un archivo module.js con una función flecha que imprime un mensaje.

js const hello = () => { console.log('hello!'); };

export default hello;

La palabra export default marca a hello como la exportación principal del módulo. No importa qué retorne la función: lo que exportas es la referencia.

¿Cómo importo ese módulo en otro archivo?

En un segundo archivo, llamado 08-module.js, traes la función con import. La sintaxis se lee casi como una frase: importa hello desde module.

js import hello from './module.js';

hello();

Fíjate en el ./ al inicio. Esa ruta relativa indica que el archivo está en la misma carpeta. Si necesitas subir un nivel, usas ../, y Visual Studio Code te ayuda con autocompletado para no perderte entre carpetas.

¿Por qué falla mi import en JavaScript Vanilla?

Al ejecutar el código por primera vez, lo más probable es que aparezca un syntax error. Node, por defecto, no sabe que tu archivo es un módulo. Necesitas decírselo de forma explícita.

La solución vive en tu package.json. Después de la licencia, agregas una coma y defines el tipo del proyecto:

{ "type": "module" }

Con ese flag, Node entiende que aceptará la sintaxis de import y export sin quejarse. Es el primer paso para que tu proyecto reconozca módulos nativos.

¿Para qué sirve "type": "module" en package.json? Le dice a Node que tu proyecto usa módulos ES6, así puedes usar import y export sin errores de sintaxis.

¿Por qué tengo que poner la extensión .js al importar?

Después de configurar el type, puede aparecer un segundo error: Cannot find module. Esto pasa porque, en JavaScript Vanilla, Node no infiere la extensión del archivo. Tienes que escribirla tal cual.

• Mal: import hello from './module'.
• Bien: import hello from './module.js'.

En herramientas más robustas como Webpack o Vite, esa extensión se puede omitir porque ya vienen configuradas para resolverla automáticamente. Pero cuando trabajas con JavaScript puro, ser explícito te evita dolores de cabeza.

¿Cuándo conviene separar mi código en módulos?

La respuesta corta: casi siempre. Trabajar con módulos te permite construir utilerías, componentes y recursos reutilizables. En lugar de un archivo gigante con toda la lógica, tienes piezas pequeñas que puedes mantener y probar por separado.

• Funciones auxiliares como formatos de fecha o validaciones.
• Objetos de configuración del proyecto.
• Clases que representan entidades de tu dominio.
• Componentes visuales reutilizables.

Cada módulo se vuelve una pieza independiente que importas donde haga falta, manteniendo tu proyecto ordenado y escalable.

¿Qué herramientas facilitan trabajar con módulos?

Mientras avanzas, te vas a encontrar con bundlers y build tools que automatizan toda esta configuración. Webpack y Vite son dos de los más comunes: resuelven extensiones, optimizan tus archivos y manejan rutas complejas sin que tengas que pensarlo.

Por ahora, dominar import, export default y la configuración de package.json te da la base para entender cómo funcionan esas herramientas por dentro. Cuéntame en los comentarios cómo estás organizando los módulos en tu proyecto actual.