ES Modules: cómo dividir código en JavaScript

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.

{
  "name": "tu-proyecto",
  "version": "1.0.0",
  "type": "module"
}

¿Cómo usar import y export con 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.js
export const PI = 3.14159;

export function sumar(a, b) {
  return a + b;
}

export function restar(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.

// 17-module.js
import { PI, sumar, restar } from './mat';

console.log(PI);
console.log(sumar(4, 4)); // 8
console.log(restar(4, 2)); // 2

• Si después no necesitas PI, impórtalo menos: import { sumar, restar } from './mat'.
• Con type: module activado, Node.js reconocerá ESM y ejecutará sin conflictos.

¿Cómo aplicar módulos a un proyecto con opiniones y contacto?

La lógica del formulario se separa en dos archivos: opinions.js y contact.js, ambos inicializados desde app.

¿Cómo extraer e inicializar opiniones con un único punto de entrada?

• Mantén internas funciones como renderOpinions o utilidades que se llaman entre sí.
• Exporta solo el inicializador.

// opinions.js
// funciones internas: renderOpinions, crearElementos, etc.
export function initOpinions(list = opinions) {
  renderOpinions(list);
}

• Ventaja: encapsulamiento y API mínima. El resto del proyecto solo conoce initOpinions.

¿Cómo encapsular la lógica de contacto?

• Igual patrón: encapsula y exporta el inicializador.

// contact.js
// funciones internas: saveMessage, validar, render, etc.
export function initContact() {
  // inicialización de eventos y render.
}

• Beneficio: separación de responsabilidad y claridad de propósito.

¿Cómo orquestar desde app con imports claros?

• Importa los inicializadores y ejecútalos.

// app.js
import { initOpinions } from './opinions';
import { initContact } from './contact';

initContact();
initOpinions();

• 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.