Con la importación de mapas, la importación de módulos ES ahora es mucho mejor.
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