Los mapas de importación de JavaScript ahora son compatibles con varios navegadores

Con la importación de mapas, la importación de módulos ES ahora se vuelve mucho mejor.

Thomas Steiner

Los módulos ES son una forma moderna de incluir y reutilizar código JavaScript en aplicaciones web. Son compatibles con navegadores modernos y proporcionan varios beneficios en comparación con los enfoques más antiguos y no modulares para el desarrollo de JavaScript.

Una forma moderna de usar módulos de ES es con la etiqueta <script type="importmap">. Esta etiqueta te permite definir una asignación de nombres de módulos externos a sus URLs correspondientes, lo que facilita la inclusión y el uso de módulos externos en tu código.

Para usar el enfoque <script type="importmap">, primero debes agregarlo a la sección <head> de tu documento HTML. Dentro de la etiqueta, puedes definir un objeto JSON que asigne los nombres de los módulos a sus URLs correspondientes. Por ejemplo:

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

Este código define un solo módulo externo llamado "browser-fs-access" y lo asigna a la URL de la biblioteca browser-fs-access, alojada en la CDN de unpkg. Con esta asignación implementada, ahora puedes usar la palabra clave import para incluir la biblioteca de browser-fs-access en tu código. Ten en cuenta que la palabra clave import solo está disponible dentro de una etiqueta script con el 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>

El uso de la etiqueta <script type="importmap"> y la palabra clave import proporciona varios beneficios en comparación con los enfoques más antiguos y no modulares del desarrollo de JavaScript. Te permite especificar de forma clara y explícita los módulos externos de los que depende tu código, lo que facilita su comprensión y mantenimiento. En general, usar módulos de ES con la etiqueta <script type="importmap"> es una forma moderna y poderosa de incluir y reutilizar código JavaScript en aplicaciones web. Puedes detectar la compatibilidad con funciones de la siguiente manera:

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

Navegadores compatibles

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

Lecturas adicionales