Módulos (ES Modules)

Los ES Modules son la forma estándar de organizar y compartir código JavaScript.

Exportaciones con Nombre

// math.js
export const PI = 3.14159;

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

export function multiplicar(a, b) {
  return a * b;
}

// main.js
import { PI, sumar, multiplicar } from './math.js';

console.log(sumar(2, 3)); // 5
console.log(PI);          // 3.14159

Exportación por Defecto

// logger.js
export default class Logger {
  constructor(prefijo) {
    this.prefijo = prefijo;
  }

  log(mensaje) {
    console.log(`[${this.prefijo}] ${mensaje}`);
  }
}

// app.js
import Logger from './logger.js';
const logger = new Logger("APP");
logger.log("Iniciado");

Importaciones Mixtas

import formatear, { VERSION, debounce } from './utils.js';

Renombrar al Importar / Exportar

import { sumar as suma, multiplicar as producto } from './math.js';
export { PI as pi, sumar as suma };

Re-exportaciones (Barrel Exports)

// index.js — agregar todas las exportaciones
export { sumar, multiplicar, PI } from './math.js';
export { default as Logger } from './logger.js';
export * from './utils.js';

// Los consumidores importan desde un solo lugar
import { sumar, Logger, debounce } from './lib/index.js';

Importaciones Dinámicas

// Cargar un módulo de forma perezosa (retorna una Promise)
async function cargarGrafico() {
  const { Grafico } = await import('./grafico.js');
  return new Grafico(document.getElementById("canvas"));
}

// Carga condicional
if (usuario.esAdmin) {
  const { PanelAdmin } = await import('./admin.js');
  PanelAdmin.init();
}

Los módulos son singletons — si múltiples archivos importan el mismo módulo, todos comparten la misma instancia. Esto los hace ideales para gestionar estado compartido.