La modularización en JavaScript alcanzó madurez con ES modules (ESM), hoy estándar en navegador y Node.js. Con import y export, tu código gana separación de responsabilidad, reutilización, mantenibilidad y encapsulamiento. Aquí verás cómo migrar mentalmente desde CommonJS y organizar archivos como mat.js, opinions.js y contact.js, incluidos los ajustes en package.json para que Node.js ejecute ESM sin errores.
¿Por qué ES modules es el estándar moderno en JavaScript?
ES modules unifica el sistema de módulos en navegador y Node.js. Aunque te toparás con proyectos antiguos, la recomendación actual es usar ESM para nuevas implementaciones y migraciones graduales.
¿Qué pasó con CommonJS, AMD y UMD?
CommonJS: ampliamente usado en Node.js; hoy en estado legacy. Se reemplaza por ESM con soporte nativo en Node.js.
AMD (Asynchronous Module Definition): basado en require; quedó obsoleto y ya no se implementa en código moderno.
UMD (Universal Module Definition): patrón envoltorio para varios entornos; también obsoleto.
En lectura de código antiguo, te los encontrarás, pero no son el estándar moderno.
¿Qué ventajas ofrece la modularidad?
Separación de responsabilidad: cada módulo hace una cosa.
Reutilización: importas solo lo necesario.
Mantenibilidad: localizar errores y cambios es más simple.
Encapsulamiento: expones solo lo que el resto necesita.
¿Cómo indicar type: module en Node.js?
Al ejecutar ESM en Node.js puede aparecer un error si el proyecto no define el tipo de módulo.
Solución: en package.json usa type: module para habilitar ES modules.
Trabajaremos desde un archivo principal (por ejemplo, 17-module.js) y un módulo matemático (mat.js). Exporta lo que necesites y luego impórtalo donde corresponda.
¿Cómo exportar constantes y funciones?
En mat.js define y exporta constantes y funciones.
// mat.jsexportconstPI=3.14159;exportfunctionsumar(a, b){return a + b;}exportfunctionrestar(a, b){return a - b;}
Idea clave: solo exporta lo que otros módulos deben usar. El resto puede quedar interno.
¿Cómo importar y ejecutar lo necesario?
En tu archivo de módulos, importa y usa lo que requieras.
Consejo práctico: cuida los nombres de archivos y funciones para evitar typos que rompan los imports.
No temas tener múltiples archivos: herramientas modernas pueden unirlos en uno para ejecución, mientras tú ganas orden y mantenibilidad.
¿Tienes dudas o mejoras sobre tu estructura modular con ES modules? Comparte tu reto y solución en comentarios: la conversación ayuda a afinar patrones y detectar casos reales.
Me surgio un error en el navegador al importar los modules(Uncaught SyntaxError: Cannot use import statement outside a module), pero se solucinó al añadir la etiqueta type="module" al script que llamamos en html para cargar app.js:
<script type="module" src="app.js"></script>
Comparto mis notas de esta clase:
El uso de los ES Modules trae ventajas al programar, como la separación de responsabilidades; la reutilización del código al importar solo lo que vas a necesitar, según sea el caso; la mantenibilidad se hace más fácil al poder identificar los errores rápidamente; también aplica el encapsulamiento de lógica interna al exponer solo lo necesario.
El ejercicio realizado en la clase consistió en dividir el código del forms creado anteriormente. Se creó un módulo de opiniones y otro de datos de contacto.
Se exportaron las funciones al añadir 'export' al inicio de todas ellas.
Se creó y exportó la función initContact() que contenía contactForm, su if, el evento submit y el rendersavedMessage.
Finalmente, en el archivo app.js se importó añadiendo: import {initOpinions} from "./opinions"; y se inicializó con initOpinions()
Después, para poder hacer el import de manera exitosa, se abrió el archivo 'package.json', donde se cambió "type":"commonjs" a "type":"module".
ESM — Estándar oficial de JavaScript. Usa import/export, es estático y asíncrono. Para navegadores y Node.js moderno.
CommonJS — Sistema de Node.js. Usa require/module.exports, es síncrono y dinámico. Muy común en proyectos backend.
AMD — Diseñada para el navegador, carga módulos de forma asíncrona. Usa define(). Prácticamente obsoleta.
UMD — Intenta ser compatible con todos los anteriores. Un solo archivo funciona en cualquier entorno. También obsoleta.