Módulos de JavaScript
Los módulos dividen JavaScript en archivos. export expone valores y import los consume. La línea visible del ejemplo es lida / tea / mint.
Exportaciones con nombre
Una exportación con nombre conserva un identificador explícito y un módulo puede ofrecer varias.
export const drink = "tea";
export function label(name) {
return `${name} / ${drink} / mint`;
}
drink y label cruzan el límite porque se exportan; lo demás queda dentro del archivo.
Importar nombres
Los imports con nombre usan llaves y los mismos identificadores exportados.
import { drink, label } from "./math.js";
console.log(drink);
console.log(label("lida"));
El import enlaza los valores exportados, no crea una definición independiente. En el navegador necesitas HTTP o HTTPS.
Exportación predeterminada
La exportación predeterminada suele ser el valor principal. Al importarla eliges el nombre local sin llaves.
export default function greet(name) {
return `Hello, ${name}!`;
}
import greet from "./greeting.js";
console.log(greet("lida"));
Los nombres usan { drink, label }; el valor predeterminado usa greet. Un archivo solo puede tener una exportación predeterminada.
Ámbito e importación dinámica
Una declaración superior no se convierte en propiedad de window. import() carga después y devuelve una Promise.
const secret = "not global";
export const items = ["tea", "mint"];
import("./menu.js").then((menu) => console.log(menu.items.join(" / ")));
console.log(window.secret); // undefined
Solo items cruza la frontera. El resultado dinámico es un objeto namespace con los exports como propiedades.
Demo autocontenida
Esta página crea el código en memoria, genera una Blob URL y lo importa; no depende de archivos del proyecto.
<p id="result"></p>
<script type="module">
const source = `export const drink = "tea"; export function label(name) { return name + " / " + drink + " / mint"; }`;
const url = URL.createObjectURL(new Blob([source], { type: "text/javascript" }));
const module = await import(url);
document.querySelector("#result").textContent = module.label("lida");
URL.revokeObjectURL(url);
</script>
La página muestra exactamente lida / tea / mint. type="module" activa la sintaxis y la Blob URL evita una petición de red.
En un proyecto real usa math.js, app.js y <script type="module" src="./app.js"></script>. No pruebes módulos con file://; usa un servidor HTTP.
📊 Opciones de módulos
| Sintaxis | Uso | Ejemplo |
|---|---|---|
| Export/import con nombre | Compartir nombres concretos | export const drink = "tea" / import { drink } ... |
| Export/import predeterminado | Compartir el valor principal | export default function greet() / import greet ... |
| Importación dinámica | Cargar después y recibir una Promise | import("./menu.js").then(...) |
| Ámbito de módulo | Mantener valores privados | const secret = "not global" |
Ejercicio práctico
Crea math.js, importa drink y label en app.js, añade greet como exportación predeterminada y muestra lida / tea / mint.
Errores frecuentes
No quites las llaves de los imports con nombre, no declares dos exports predeterminados y no esperes que un valor no exportado sea global.
Idea clave
export selecciona lo que sale, import lo usa, el import predeterminado elige su nombre y el ámbito protege lo privado.
Mantén los módulos enfocados y libera las Blob URL temporales al terminar.
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior