Mapas de importación: importmap
Asigne especificadores de módulos sin ruta a URL mediante importmap
Mapas de importación: importmap es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 2 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.
El problema de los especificadores simples
En Node, import "lodash" funciona porque el resolvedor encuentra node_modules/lodash. Los navegadores no tienen node_modules: necesitan una URL real. Sin ayuda, import "lodash" lanza el error "Failed to resolve module specifier".
Qué hacen los mapas de importaciones
Un mapa de importaciones declara un diccionario JSON que asigna especificadores simples (y prefijos de URL) a URL reales. El navegador consulta el mapa al resolver los módulos y convierte import "lodash" en una solicitud a la URL que haya configurado.
<script type="importmap">
{
"imports": {
"lodash": "https://esm.sh/lodash@4.17.21",
"preact": "https://esm.sh/preact"
}
}
</script>El orden de las declaraciones importa
El mapa de importaciones debe aparecer antes de cualquier <script type="module"> que utilice especificadores simples: una vez que un módulo ha comenzado a resolver sus importaciones, el mapa queda fijado. Coloque el <script type="importmap"> cerca de la parte superior de <head>.
Asignaciones de prefijos
Las entradas que terminan en barra coinciden con prefijos de URL: "@/": "/src/" asigna cualquier import "@/utils/sum.js" a /src/utils/sum.js. Así puede simular la sintaxis de "alias" que suelen admitir los empaquetadores.
Control de versiones mediante mapas
Un mapa de importaciones centraliza las decisiones de versión: cambie "react" de esm.sh/react@18 a esm.sh/react@19 en un solo lugar y todos los módulos que lo importen utilizarán la nueva URL. Sin un mapa de importaciones, cada ubicación de importación tiene su propia versión escrita de forma fija.
Ámbitos
La clave scopes permite usar asignaciones diferentes en distintas partes de su sitio. Dentro de /admin/ quizá quiera una versión más reciente de una dependencia que en /public/; los ámbitos permiten seleccionar según la ruta.
{
"imports": { "lodash": "https://esm.sh/lodash@4" },
"scopes": {
"/admin/": { "lodash": "https://esm.sh/lodash@5" }
}
}Un mapa por documento
Cada documento puede tener como máximo un <script type="importmap">. Colocar dos en la misma página no es válido; combine su contenido en un solo bloque para reunir las entradas.
Mapas de importaciones externos
Puede alojar el mapa en una URL externa mediante <script type="importmap" src="map.json">. La compatibilidad de los navegadores es más reciente que con los mapas en línea, pero actualmente está muy extendida; resulta útil cuando quiere almacenar en caché un mapa grande por separado del documento.
Generación de mapas de importaciones
Herramientas como JSPM Generator y el modo --servedir de esbuild generan automáticamente mapas de importaciones a partir de package.json. Los mapas generados incluyen todas las dependencias transitivas y asignan cada una a una URL de CDN, lo que permite trabajar sin node_modules.
Compatibilidad de los navegadores
Los mapas de importaciones están disponibles en Chrome, Edge, Safari y Firefox. Los navegadores antiguos ignoran la etiqueta <script type="importmap">, por lo que los especificadores simples fallan. Para ofrecer una amplia compatibilidad con navegadores antiguos, compile con un empaquetador que resuelva los especificadores durante la compilación y sirva URL simples.
Opción de polyfill
El polyfill ES Module Shims (es-module-shims.js) añade compatibilidad con mapas de importaciones y varias funciones más recientes a los navegadores antiguos. Inclúyalo antes del script de mapa de importaciones. La mayoría de los proyectos modernos omiten el polyfill y dependen de la compatibilidad nativa.
Comprobación de conocimientos
¿Por qué debe aparecer un <script type="importmap"> antes de cualquier script de módulo que utilice especificadores simples?
Resumen
Los mapas de importaciones asignan especificadores simples y prefijos de URL a URL reales, recuperando en el navegador el estilo de Node de "import lodash". Declárelos una vez por documento antes de cualquier script de módulo, opcionalmente de forma externa mediante src, y utilice ámbitos para aplicar cambios según la ruta. Combínelos con un CDN (esm.sh, jsdelivr) para trabajar sin node_modules.
Preguntas frecuentes
¿La lección «Mapas de importación: importmap» es gratis?
Sí — el texto completo de «Mapas de importación: importmap» 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 «Mapas de importación: importmap»?
Asigne especificadores de módulos sin ruta a URL mediante importmap 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 2 de 4.
¿Cuánto tiempo toma la lección «Mapas de importación: importmap»?
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