Com os mapas de importação, a importação de módulos ES ficou muito melhor.
Os módulos ES são uma maneira moderna de incluir e reutilizar código JavaScript em aplicativos da Web. Elas são compatíveis com navegadores modernos e oferecem vários benefícios em comparação com abordagens mais antigas e não modulares para o 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 você precisa adicioná-la à seção <head>
do seu 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 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 comparação com as abordagens mais antigas e não modulares para o desenvolvimento em JavaScript. Ele permite especificar de forma 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. Você pode detectar
recursos da seguinte maneira:
if (HTMLScriptElement.supports('importmap')) {
// The importmap feature is supported.
}
Compatibilidade com navegadores