Import maps

Un import map es un bloque JSON en la página HTML que le indica al navegador qué URL cargar para cada nombre de módulo usado en los import.

Los navegadores pueden cargar ES modules de forma nativa, pero solo entienden URLs. Una línea como import { html } from 'lit' usa un especificador sin ruta, y sin ayuda el navegador no sabe dónde está lit. Un import map entrega esa correspondencia. Es un estándar del navegador y todos los navegadores principales actuales lo soportan.

Ejemplo

<script type="importmap">
{
  "imports": {
    "lit": "https://cdn.example.com/lit/index.js",
    "orders-app": "https://cdn.example.com/orders/main.js"
  }
}
</script>
<script type="module">
  import('orders-app');
</script>

Si cambias la URL de orders-app en el mapa, cambia la versión que recibe cada módulo que lo importa. Ninguna aplicación tiene que recompilarse. Por eso los import maps son una pieza base de muchas configuraciones de single-spa y de Native Federation, que genera el mapa en tiempo de ejecución a partir de los metadatos de cada remoto.

Confusión frecuente

Un import map solo traduce nombres a URLs. No empaqueta código, no lo descarga por adelantado y no negocia versiones. Si dos aplicaciones necesitan versiones mayores distintas de la misma librería, tienes que expresarlo tú con scopes, una sección del mapa que aplica una correspondencia distinta a los módulos cargados desde una ruta determinada.

El mapa también tiene que estar definido antes de que se carguen los módulos que dependen de él, así que su posición en la página importa.

Trata el import map como configuración de producción. Una línea equivocada puede romper todos los microfrontends de la página, así que conviene generarlo en el pipeline y validarlo antes de publicarlo. La página de microfrontends muestra dónde se ubica en una plataforma.

Términos relacionados

• Native Federation
• single-spa
• Remote entry y manifiesto