Le mappe di importazione JavaScript sono ora supportate tra i browser

Con le mappe di importazione, l'importazione dei moduli ES è ora molto migliorata.

Thomas Steiner

I moduli ES sono un modo moderno per includere e riutilizzare il codice JavaScript nelle applicazioni web. Sono supportati dai browser moderni e offrono diversi vantaggi rispetto agli approcci meno recenti e non modulari per lo sviluppo di JavaScript.

Un modo moderno per utilizzare i moduli ES è con il tag <script type="importmap">. Questo tag consente di definire una mappatura dei nomi dei moduli esterni agli URL corrispondenti, semplificando l'inclusione e l'utilizzo di moduli esterni nel codice.

Per utilizzare l'approccio <script type="importmap">, devi prima aggiungerlo alla sezione <head> del tuo documento HTML. All'interno del tag, puoi definire un oggetto JSON che mappa i nomi dei moduli ai relativi URL. Ad esempio:

<script type="importmap">
  {
    "imports": {
      "browser-fs-access": "https://unpkg.com/browser-fs-access@0.33.0/dist/index.modern.js"
    }
  }
</script>

Questo codice definisce un singolo modulo esterno denominato "browser-fs-access" e lo mappa all'URL della libreria browser-fs-access, ospitata sulla CDN unpkg. Con questa mappatura, ora puoi utilizzare la parola chiave import per includere la libreria browser-fs-access nel codice. Tieni presente che la parola chiave import è disponibile solo all'interno di un tag script con l'attributo type="module".

<button>Select a text file</button>
<script type="module">
  import {fileOpen} from 'browser-fs-access';

  const button = document.querySelector('button');
  button.addEventListener('click', async () => {
    const file = await fileOpen({
      mimeTypes: ['text/plain'],
    });
    console.log(await file.text());
  });
</script>

L'utilizzo del tag <script type="importmap"> e della parola chiave import offre diversi vantaggi rispetto agli approcci meno recenti e non modulari per lo sviluppo di JavaScript. Ti consente di specificare in modo chiaro ed esplicito i moduli esterni di cui dipende il tuo codice, il che semplifica la comprensione e la manutenzione del codice. Nel complesso, l'utilizzo dei moduli ES con il tag <script type="importmap"> è un modo moderno e potente per includere e riutilizzare il codice JavaScript nelle applicazioni web. Puoi supportare il rilevamento delle funzionalità nel seguente modo:

if (HTMLScriptElement.supports('importmap')) {
  // The importmap feature is supported.
}

Supporto dei browser

  • Chrome: 89.
  • Edge: 89.
  • Firefox: 108.
  • Safari: 16.4.

Per approfondire