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 es mucho mejor.

Thomas Steiner

Los módulos de ES son una forma moderna de incluir y reutilizar el código JavaScript en aplicaciones web. Son compatibles con los 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 incluir y usar módulos externos en tu código.

Para usar el enfoque <script type="importmap">, primero debes agregarlo a la sección <head> del documento HTML. Dentro de la etiqueta, puedes definir un objeto JSON que asigne nombres de 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 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 para el desarrollo de JavaScript. Te permite especificar de manera 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, el uso de módulos de ES con la etiqueta <script type="importmap"> es una forma moderna y potente de incluir y reutilizar el código JavaScript en aplicaciones web. Puedes detectar funciones de la siguiente manera:

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

Navegadores compatibles

  • 89
  • 89
  • 108
  • 16.4

Lecturas adicionales