Módulos ES6
Cuando una aplicación crece, poner todo el código en un solo archivo se vuelve imposible de mantener. Los módulos permiten dividirlo en archivos pequeños con responsabilidades claras. Cada archivo exporta lo que otros necesitan e importa solo lo que usa.
export default exporta el elemento principal del archivo (una clase, función u objeto). export sin default permite exportar múltiples cosas con nombre. Al importar, los named exports van entre llaves: import { calcular, validar } from "./utils", mientras el default no las necesita.
Los módulos son la base de cualquier framework moderno. React, Vue, Angular y React Native están construidos completamente con sistema de módulos. Dominar export/import es prerequisito para trabajar con cualquiera de ellos.
// --- matematicas.js ---
// Named exports (múltiples por archivo)
export const PI = 3.14159;
export function suma(a, b) { return a + b; }
export function resta(a, b) { return a - b; }
// Default export (uno por archivo)
export default function calcular(op, a, b) {
if (op === "+") return suma(a, b);
if (op === "-") return resta(a, b);
}
// --- app.js ---
// Importar named exports
import { suma, resta, PI } from "./matematicas.js";
// Importar default export
import calcular from "./matematicas.js";
// Importar todo con alias
import * as Mat from "./matematicas.js";
console.log(Mat.PI); // 3.14159
// Importar con alias
import { suma as sumar } from "./matematicas.js";
console.log(suma(2, 3)); // 5
console.log(calcular("+", 10, 5)); // 15
Practica esta lección
Resuelve los ejercicios del curso de JavaScript en la app, gratis y con corrección automática.
Empezar a practicar