Scripts de módulos ES: type=module
Cargue JavaScript como módulos ES con type=module
Scripts de módulos ES: type=module es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 1 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 HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué son los módulos ES?
Un módulo ES es un archivo JavaScript que utiliza declaraciones import y export. Los módulos tienen su propio ámbito (sin contaminar el ámbito global), usan el modo estricto de forma predeterminada y declaran explícitamente sus dependencias, lo que resuelve problemas de décadas relacionados con el orden de las etiquetas script.
La etiqueta script de módulo
<script type="module" src="app.js"> indica al navegador que el archivo es un módulo. El navegador analiza las importaciones, obtiene las dependencias en paralelo y ejecuta el punto de entrada solo cuando se ha descargado y compilado todo el grafo de dependencias.
<script type="module" src="app.js"></script>Los módulos se cargan de forma diferida
Los scripts de módulo se comportan como si tuvieran defer: se descargan en paralelo con el análisis del HTML y se ejecutan después del análisis, en el orden en que se declaran. Puede colocar <script type="module"> en cualquier lugar (incluso en <head>) sin bloquear la página.
Las importaciones usan especificadores
Una declaración de importación utiliza un especificador: una URL relativa (./utils.js), una URL absoluta (https://cdn.example.com/lib.js) o un nombre simple (lodash). Los nombres simples requieren un mapa de importaciones (que se explica a continuación), porque el navegador no sabe a qué archivo corresponden.
// app.js
import { sum } from "./utils.js";
import { render } from "https://esm.sh/preact";
console.log(sum(1, 2));Las extensiones de archivo son obligatorias
Los navegadores no añaden automáticamente .js a los especificadores de importación. import "./utils" falla; import "./utils.js" funciona. Los empaquetadores y Node pueden ser más permisivos, pero el navegador es estricto, así que escriba la extensión explícitamente.
Se requiere CORS
Los módulos siempre se obtienen mediante CORS, incluso cuando son del mismo origen. Los archivos de módulos de otros orígenes deben enviar el encabezado Access-Control-Allow-Origin correspondiente o la importación fallará. La mayoría de los CDN (esm.sh, jsdelivr, unpkg) lo configuran correctamente de forma predeterminada.
await en el nivel superior
Los módulos admiten await en el nivel superior, sin necesidad de envolverlo en una función asíncrona: const data = await fetch("/api").then(r => r.json()). Los consumidores del módulo esperan a que se resuelva el await del nivel superior antes de ejecutarse.
// data.js
export const config = await fetch("/config.json").then(r => r.json());
// app.js (waits for data.js)
import { config } from "./data.js";
console.log(config);Los módulos son singletons
Un módulo se evalúa exactamente una vez por sesión, independientemente de cuántos otros módulos lo importen. El objeto de exportaciones se comparte: todos los consumidores ven la misma instancia, lo que convierte a los módulos en una forma limpia de compartir singletons, como un objeto de configuración o un almacén de estado.
Módulos en línea
También puede escribir módulos en línea: <script type="module">import x from "./y.js"; ...</script>. Resultan útiles para código de inicialización o experimentos, aunque los archivos externos son más fáciles de depurar y almacenar en caché.
nomodule para compatibilidad con navegadores antiguos
Combine <script type="module"> con <script nomodule src="legacy.js">. Los navegadores modernos ejecutan el módulo e ignoran el script nomodule; los navegadores antiguos ejecutan el script nomodule e ignoran el módulo. Se utiliza durante la migración a aplicaciones completamente basadas en ESM.
Errores y fallos de importación
Una importación que falla (404, CORS o un error de sintaxis) lanza una excepción e impide que se ejecute todo el grafo de módulos. Utilice el panel Network para detectar solicitudes de módulos fallidas y la Console para leer el mensaje de error real de la importación.
Comprobación de conocimientos
¿Por qué los scripts de módulo se comportan como si se hubiera establecido defer aunque no lo haya especificado?
Resumen
<script type="module"> carga módulos ES: archivos en modo estricto con declaraciones import/export que resuelven un grafo de dependencias. Los módulos se cargan de forma diferida de manera predeterminada, requieren extensiones de archivo explícitas, se obtienen mediante CORS, se evalúan como singletons y admiten await en el nivel superior. Utilice nomodule como alternativa para navegadores antiguos y esté atento a las extensiones de archivo ausentes cuando las importaciones fallen silenciosamente.
Preguntas frecuentes
¿La lección «Scripts de módulos ES: type=module» es gratis?
Sí — el texto completo de «Scripts de módulos ES: type=module» 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 HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Scripts de módulos ES: type=module»?
Cargue JavaScript como módulos ES con type=module Practicas HTML 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 HTML Academy?
No se requiere experiencia previa. HTML 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 1 de 4.
¿Cuánto tiempo toma la lección «Scripts de módulos ES: type=module»?
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 HTML Academy?
Sí. Cada lección de HTML 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
- Scripts de módulos ES: type=module
- Mapas de importación: importmap
- Importación dinámica import() en módulos
- Conceptos básicos de Module Federation