Cette page a été traduite par l'API Cloud Translation.

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

Grâce aux cartes d'importation, l'importation de modules ES est désormais beaucoup plus simple.

Thomas Steiner

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

La balise <script type="importmap"> est une méthode moderne d'utiliser les modules ES. Cette balise vous permet de définir le mappage des noms de modules externes avec les 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 met en correspondance les noms de module avec 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 met en correspondance avec l'URL de la bibliothèque browser-fs-access, hébergée sur le CDN unpkg. Une fois ce mappage en place, vous pouvez 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 sur lesquels votre code dépend, ce qui facilite la compréhension et la gestion de votre code. De manière générale, l'utilisation de modules ES avec la balise <script type="importmap"> est un moyen moderne et efficace d'inclure et de réutiliser du code JavaScript dans des applications Web. Vous pouvez vérifier la prise en charge de la détection de fonctionnalités comme suit :

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

Navigateurs pris en charge

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

Documentation complémentaire