Importar tarjetas para importar de forma nativa módulos de JavaScript usando nombres simples: Amit Merchant: un blog sobre PHP, JavaScript y más

Importar tarjetas para importar de forma nativa módulos de JavaScript usando nombres simples: Amit Merchant: un blog sobre PHP, JavaScript y más

Los paquetes de JavaScript le permiten importar módulos de JavaScript con sus nombres básicos. Por ejemplo, si instaló Lodash usando NPM, puede importarlo así.

Como puede ver, está importando el módulo usando su nombre básico lodash.

Para usar módulos con nombres simples, debe usar un paquete como Webpack o Rollup porque los navegadores solo pueden importar módulos usando rutas relativas.

Pero ya no. Ahora puede hacer esto de forma nativa en navegadores usando "importar mapas".

Esencialmente, los mapas de importación son una forma de asignar especificadores de módulos desnudos a direcciones URL o rutas asociadas. Entonces, si tiene un módulo debajo /app/js/utils.jspuede asignarlo a un nombre simple como este.

<script type="importmap">
{
  "imports": {
    "utils": "/app/js/utils.js"
  }
}
</script>

Como puedes ver, necesitas usar el importmap etiqueta de secuencia de comandos para definir el mapa de importación. Y luego debe especificar el objeto JSON que asigna el nombre básico a la URL o ruta del módulo en el imports propiedad.

Nota: Debes tener en cuenta que debes declarar el importmap etiqueta de secuencia de comandos antes que cualquier otra etiqueta de secuencia de comandos en la que importe los módulos utilizando nombres simples.

Ahora puede importar módulos usando el nombre desnudo en scripts de módulos como este.

<script type="module">
  import utils from 'utils';
</script>

Esto es muy conveniente porque ya no necesita especificar rutas relativas a los módulos. Puede usar el nombre básico y el navegador resolverá la ruta por usted.

Aparte de eso, también puede usar mapas de importación para asignar nombres simples a URL en un CDN. Por ejemplo, si desea utilizar un módulo ES de una CDN, puede hacerlo de la siguiente manera.

<script type="importmap">
{
  "imports": {
    "lodash": "https://cdn.skypack.dev/lodash"
    "react": "https://esm.sh/react"
  }
}
</script>

A continuación, puede importarlos como lo haría habitualmente mediante paquetes.

import _ from 'lodash';
import React from 'react';

El soporte del navegador para importar mapas también es bastante bueno ahora que los mapas de importación han llegado recientemente a Safari Technical Preview. Esto significa que ahora puede usar mapas de importación en todos los principales navegadores.

Aquí está el soporte del navegador para importar mapas a partir de ahora.

Datos sobre el soporte de la función de importación de mapas en los principales navegadores de caniuse.com

Si quieres conocer otros artículos parecidos a Importar tarjetas para importar de forma nativa módulos de JavaScript usando nombres simples: Amit Merchant: un blog sobre PHP, JavaScript y más puedes visitar la categoría Código.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir

Esta página web utiliza cookies para analizar de forma anónima y estadística el uso que haces de la web, mejorar los contenidos y tu experiencia de navegación. Para más información accede a la Política de Cookies . Ver mas