HTML Academy · Lezione

Mappe degli import: importmap

Associare gli identificatori nudi dei moduli agli URL con importmap

Mappe degli import: importmap è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.

Il problema dei bare specifier

In Node, import "lodash" funziona perché il resolver trova node_modules/lodash. I browser non dispongono di node_modules: hanno bisogno di un URL reale. Senza un supporto aggiuntivo, import "lodash" genera l’errore "Failed to resolve module specifier".

A cosa servono le import map

Un’import map dichiara un dizionario JSON che associa bare specifier (e prefissi di URL) a URL reali. Il browser consulta la mappa durante la risoluzione dei moduli, trasformando import "lodash" in una richiesta all’URL configurato.

<script type="importmap">
{
  "imports": {
    "lodash": "https://esm.sh/lodash@4.17.21",
    "preact": "https://esm.sh/preact"
  }
}
</script>

L’ordine delle dichiarazioni è importante

L’import map deve comparire prima di qualsiasi <script type="module"> che utilizzi bare specifier: una volta iniziata la risoluzione degli import di un modulo, la mappa non può più essere modificata. Posizioni <script type="importmap"> vicino all’inizio di <head>.

Mappature con prefisso

Le voci che terminano con una barra corrispondono ai prefissi degli URL: "@/": "/src/" associa qualsiasi import "@/utils/sum.js" a /src/utils/sum.js. È così che si simula la sintassi degli "alias" comunemente supportata dai bundler.

Gestione delle versioni tramite mappa

Un’import map centralizza le scelte relative alle versioni: cambi "react" da esm.sh/react@18 a esm.sh/react@19 in un unico punto e ogni modulo che esegue l’import utilizza il nuovo URL. Senza un’import map, ogni punto di import contiene la propria versione hard-coded.

Scope

La chiave scopes consente di utilizzare mappature diverse per parti diverse del sito. All’interno di /admin/ potrebbe voler usare una versione più recente di una dipendenza rispetto a /public/; gli scope permettono di applicare le mappature in base al percorso.

{
  "imports": { "lodash": "https://esm.sh/lodash@4" },
  "scopes": {
    "/admin/": { "lodash": "https://esm.sh/lodash@5" }
  }
}

Una sola mappa per documento

Ogni documento può contenere al massimo un elemento <script type="importmap">. Inserirne due nella stessa pagina non è valido; unisca il loro contenuto in un unico blocco per combinare le voci.

Import map esterne

Può ospitare la mappa a un URL esterno con <script type="importmap" src="map.json">. Il supporto dei browser è più recente rispetto alle mappe inline, ma ormai è ampiamente diffuso; è utile quando desidera memorizzare nella cache una mappa di grandi dimensioni separatamente dal documento.

Generazione delle import map

Strumenti come JSPM Generator e la modalità --servedir di esbuild generano automaticamente import map a partire da package.json. Le mappe generate includono ogni dipendenza transitiva, associandola a un URL CDN: un flusso di lavoro senza node_modules.

Supporto dei browser

Le import map sono disponibili in Chrome, Edge, Safari e Firefox. I browser meno recenti ignorano il tag <script type="importmap">, causando il fallimento dei bare specifier. Per un’ampia compatibilità con i browser legacy, esegua la build con un bundler che risolva gli specifier al momento della build e serva URL semplici.

Opzione polyfill

Il polyfill ES Module Shims (es-module-shims.js) aggiunge il supporto alle import map, oltre a diverse funzionalità più recenti, nei browser meno recenti. Lo includa prima dello script importmap. La maggior parte dei progetti moderni evita il polyfill e si affida al supporto nativo.

Verifica delle conoscenze

Perché <script type="importmap"> deve comparire prima di qualsiasi script di modulo che utilizzi bare specifier?

Riepilogo

Le import map associano bare specifier e prefissi di URL a URL reali, ripristinando nel browser la sintassi "import lodash" tipica di Node. Le dichiari una sola volta per documento, prima di qualsiasi script di modulo, eventualmente tramite un URL esterno con src, e utilizzi gli scope per sostituzioni in base al percorso. Le combini con un CDN (esm.sh, jsdelivr) per ottenere un flusso di lavoro senza node_modules.

Domande Frequenti

La lezione «Mappe degli import: importmap» è gratuita?

Sì — il testo completo di «Mappe degli import: importmap» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.

Cosa imparerò in «Mappe degli import: importmap»?

Associare gli identificatori nudi dei moduli agli URL con importmap Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare HTML Academy?

Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.

Quanto tempo richiede la lezione «Mappe degli import: importmap»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione HTML Academy?

Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a HTML Academy