Mapas de importação JavaScript agora são compatíveis entre navegadores

Com os mapas de importação, a importação de módulos ES ficou muito melhor.

Thomas Steiner

Os módulos ES são uma maneira moderna de incluir e reutilizar código JavaScript em aplicativos da Web. Elas têm suporte de navegadores modernos e oferecem vários benefícios em relação a abordagens mais antigas e não modulares de desenvolvimento em JavaScript.

Uma maneira moderna de usar módulos ES é com a tag <script type="importmap">. Essa tag permite definir um mapeamento de nomes de módulos externos para os URLs correspondentes, o que facilita a inclusão e o uso de módulos externos no código.

Para usar a abordagem <script type="importmap">, primeiro é necessário adicioná-la à seção <head> do documento HTML. Na tag, é possível definir um objeto JSON que mapeia os nomes dos módulos para os URLs correspondentes. Por exemplo:

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

Esse código define um único módulo externo chamado "browser-fs-access" e o mapeia para o URL da biblioteca browser-fs-access, hospedada no CDN do unpkg. Com esse mapeamento em vigor, agora você pode usar a palavra-chave import para incluir a biblioteca browser-fs-access no código. A palavra-chave import só está disponível dentro de uma tag script com o atributo 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>

O uso da tag <script type="importmap"> e da palavra-chave import oferece vários benefícios em relação a abordagens mais antigas e não modulares de desenvolvimento em JavaScript. Ele permite especificar de maneira clara e explícita os módulos externos de que seu código depende, o que facilita a compreensão e a manutenção do código. No geral, o uso de módulos ES com a tag <script type="importmap"> é uma maneira moderna e poderosa de incluir e reutilizar o código JavaScript em aplicativos da Web. É possível detectar o suporte de recursos da seguinte maneira:

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

Browser Support

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

Source

Leitura adicional