Módulos ESM: import y export

Hasta ahora todo tu código ha vivido en un solo archivo. Las aplicaciones reales viven en DECENAS, y necesitan una regla de juego para compartirse cosas sin pisarse: los módulos ES (ESM) — el sistema de import y export que ya usan Node, los navegadores y todos los frameworks que aprenderás. Este módulo entero va de organizar piezas; esta lección pone el piso.

La bodega con ventanilla

Tu primer proyecto multi-archivo

Este playground tiene DOS archivos (mira las pestañas): la lógica de dinero vive en su módulo, y index.js la importa:

La gramática esencial: export delante de lo que prestas (constantes, funciones, clases — lo que sea), e import { etiquetas } from "./ruta" para pedirlo. Los nombres deben coincidir EXACTOS — son etiquetas, no posiciones. Y la función redondear demuestra el premio silencioso: es detalle interno, mañana la renombras o la eliminas y NINGÚN otro archivo puede haberse acoplado a ella. Encapsulación a nivel de archivo — la misma idea del # del módulo 11, un piso más arriba.

export default: la pieza principal

Además de la ventanilla con etiquetas, un módulo puede declarar UNA pieza estrella sin nombre fijo:

// UNA sola por módulo: la exportación por defecto
export default class Bolsillo {
// ...la clase del módulo 11
}

// quien importa la nombra como quiera (sin llaves):
// import Bolsillo from "./bolsillo.js";
// import LoQueSea from "./bolsillo.js";   ← también válido

¿Cuál usar? Regla de oficio: exports con nombre casi siempre — el autocompletado te ayuda, los nombres son consistentes en todo el proyecto y renombrar es seguro. El default es idiomático cuando el archivo ES una sola cosa (un componente de React, una clase principal) — lo verás así en los supercursos de frameworks. Y tres datos de contexto que te ahorrarán confusiones: los módulos son SIEMPRE estrictos (el modo laxo del módulo 11 no existe aquí), cada módulo se carga UNA sola vez por muchas veces que se importe (esto es ORO y es la próxima lección), y en el navegador se activan con <script type="module" src="app.js"> — en este curso el playground hace de empaquetador, como harán Vite y compañía en tus proyectos.

Mini-reto

Reorganiza como arquitecto: parte el motor de reportes del módulo 12 en tres archivos — pipe.js (exporta pipe), estaciones.js (exporta filtrar, totalizar, enCOP; con alguna auxiliar PRIVADA sin export) e index.js que importa de ambos y arma un reporte. Agrega pestañas con el botón de archivo del playground o reutiliza los dos existentes. Remate: intenta importar la auxiliar privada y lee el error con calma — es de los mensajes que más verás en tu carrera.

Qué sigue

Dijimos algo enorme de pasada: un módulo se evalúa UNA sola vez, sin importar cuántos archivos lo importen — todos reciben LA MISMA copia. Esa propiedad convierte a cada módulo en un "único ejemplar" natural… que es exactamente el primer patrón de diseño del módulo: el singleton. Próxima lección.