Frontend Academy · Lección

Módulos: import y export

Módulos: import y export es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

¿Por qué usar módulos?

Antes de los módulos, todo JavaScript se ejecutaba en el ámbito global. Las variables entraban en conflicto. El orden del código era importante. Los archivos tenían que cargarse en secuencia. Los módulos ES proporcionan a cada archivo su propio ámbito, imports explícitos y exports que se pueden eliminar mediante tree shaking.

Exports con nombre

Exporte valores específicos con la palabra clave export. Un archivo puede tener varios exports con nombre. Los consumidores importan exactamente lo que necesitan.

// utils.js
export const PI = 3.14159;

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

export class Vector {
  constructor(x, y) { this.x = x; this.y = y; }
}

Imports con nombre

Importe exports con nombre mediante llaves. Puede importar varios exports de un mismo módulo en una sola instrucción.

import { PI, add, Vector } from './utils.js';

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

Exports predeterminados

Cada módulo puede tener un único export predeterminado, normalmente el elemento principal que proporciona el módulo. Impórtelo sin llaves y asígnele cualquier nombre.

// Button.js
export default function Button({ label }) {
  return `<button>${label}</button>`;
}

// Importing:
import Button from './Button.js';
import MyButton from './Button.js'; // any name works

Volver a exportar

Un módulo puede volver a exportar elementos de otros módulos para crear un archivo barrel: un único punto de entrada que vuelve a exportar varios elementos.

// components/index.js
export { default as Button } from './Button.js';
export { default as Input } from './Input.js';
export { default as Modal } from './Modal.js';

// Consumer:
import { Button, Input, Modal } from './components';

Imports de espacio de nombres

Importe todo el contenido de un módulo en un objeto de espacio de nombres con import * as name. Resulta útil cuando necesita muchos exports o quiere hacer explícito su origen.

import * as utils from './utils.js';

console.log(utils.PI);        // 3.14159
console.log(utils.add(1, 2)); // 3

Imports solo por efectos secundarios

Algunos módulos se importan exclusivamente por sus efectos secundarios (polyfills o registro de controladores de eventos). Impórtelos sin crear un binding.

import './polyfills.js'; // runs the code, imports nothing

import() dinámico — División de código

La función import() dinámica devuelve una Promise. Úsela para cargar un módulo de forma diferida, únicamente cuando sea necesario. Los bundlers crean automáticamente un chunk independiente para los módulos importados dinámicamente.

// Load a heavy module only when the button is clicked:
button.addEventListener('click', async () => {
  const { processFile } = await import('./fileProcessor.js');
  processFile(data);
});

import.meta

import.meta es un objeto especial disponible dentro de los módulos. import.meta.url es la URL del módulo. Vite utiliza import.meta.env para las variables de entorno.

// Vite environment variables:
console.log(import.meta.env.VITE_API_URL);
console.log(import.meta.env.MODE); // 'development' or 'production'

Resolución de módulos

Los bundlers como Vite resuelven módulos desde el sistema de archivos (rutas relativas como './utils'), node_modules ('lodash') o alias de rutas ('@/components' configurados en vite.config.js).

CommonJS frente a módulos ES

Node.js utilizaba originalmente CommonJS (require / module.exports). El navegador utiliza módulos ES (import / export). Las versiones modernas de Node.js también admiten módulos ES con type: "module" en package.json.

// CommonJS (Node.js, older tooling):
const fs = require('fs');
module.exports = { myFunc };

// ES Modules (modern):
import fs from 'fs';
export { myFunc };

Comprobación rápida

¿Cuál es la principal ventaja de utilizar dynamic import() en lugar de un import estático?

Resumen: módulos ES

Exports e imports con nombre para varios valores. Export e import predeterminados para el elemento principal. Los re-exports crean archivos barrel. import() dinámico permite la carga diferida y la división de código. import.meta proporciona metadatos del módulo. Los bundlers resuelven alias, node_modules y rutas relativas.

Preguntas frecuentes

¿La lección «Módulos: import y export» es gratis?

Sí — el texto completo de «Módulos: import y export» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Módulos: import y export»?

Divida el código en módulos ES con exportaciones con nombre y predeterminadas, importe elementos de forma selectiva y comprenda cómo los empaquetadores de módulos resuelven el grafo de dependencias. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Módulos: import y export»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Métodos de arrays: map filter reduce find
Desestructuración y spread de objetos
Template literals y encadenamiento opcional
Módulos: import y export

← Volver a Frontend Academy