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

Avec l'importation de mappages, l'importation de modules ES s'avère désormais beaucoup plus efficace.

Thomas Steiner

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

La balise <script type="importmap"> constitue un moyen moderne d'utiliser les modules ES. Cette balise vous permet de définir un mappage des noms de modules externes aux 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 module aux 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 module externe unique nommé "browser-fs-access" et le mappe à 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 approches de développement JavaScript plus anciennes et non modulaires. Il vous permet de spécifier clairement et explicitement les modules externes dont dépend votre code, ce qui facilite sa compréhension et sa gestion. De manière générale, l'utilisation des 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. Pour cela, procédez comme suit:

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

Navigateurs pris en charge

  • 89
  • 89
  • 108
  • 16.4

Complément d'informations