Les cartes à importer JavaScript sont désormais compatibles avec plusieurs navigateurs

Grâce aux import maps, l'importation de modules ES est désormais beaucoup plus efficace.

Thomas Steiner

Les modules ES sont un moyen moderne d'inclure et de réutiliser du code JavaScript dans les applications Web. Ils sont compatibles avec les navigateurs modernes et offrent plusieurs avantages par rapport aux approches non modulaires plus anciennes du développement JavaScript.

Une façon moderne d'utiliser les modules ES consiste à utiliser la balise <script type="importmap">. Cette balise vous permet de définir un mappage des noms de modules externes vers leurs URL correspondantes, ce qui facilite l'inclusion et l'utilisation de modules externes dans votre code.

Pour utiliser l'approche <script type="importmap">, vous devez d'abord l'ajouter à la section <head> de votre document HTML. Dans la balise, vous pouvez définir un objet JSON qui mappe les noms de modules à leurs URL correspondantes. Par exemple :

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

Ce code définit un seul module externe nommé "browser-fs-access" et le mappe à l'URL de la bibliothèque browser-fs-access, hébergée sur le CDN unpkg. Avec ce mappage en place, vous pouvez désormais utiliser le mot clé import pour inclure la bibliothèque browser-fs-access dans votre code. Notez que le mot clé import n'est disponible que dans une balise script avec l'attribut 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'utilisation de la balise <script type="importmap"> et du mot clé import offre plusieurs avantages par rapport aux anciennes approches non modulaires du développement JavaScript. Il vous permet de spécifier clairement et explicitement les modules externes dont votre code dépend, ce qui facilite la compréhension et la maintenance de votre code. Dans l'ensemble, l'utilisation de modules ES avec la balise <script type="importmap"> est une méthode moderne et puissante pour inclure et réutiliser du code JavaScript dans les applications Web. Vous pouvez détecter la compatibilité des fonctionnalités comme suit :

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

Browser Support

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

Source

Documentation complémentaire