Hola. Con el lanzamiento de Chrome 89 (así como en Deno 1.8), fue posible utilizar mapas de importación, un mecanismo que le permite controlar el comportamiento de las importaciones de JavaScript.
A pesar de que el desarrollo moderno se construye utilizando módulos nativos, no podemos ejecutar aplicaciones sin antes construirlas. Uno de los objetivos de los mapas de importación es precisamente solucionar este problema.
En resumen, ahora será completamente legal y sin ningún coleccionista escribir, digamos, así:
import React from 'react';
Veamos cómo funciona todo debajo del corte.
Para que la directiva de importación o la expresión import () puedan resolver rutas a módulos en una nueva forma, estas rutas deben describirse en alguna parte. Sí, resultó no haber magia con la resolución de dependencias del compartimiento del motor como en el mismo Node.js o paquete web.
Los mapas de importación se especifican mediante una etiqueta de secuencia de comandos con un atributo type = "importmap" en formato JSON.
Y ahora un ejemplo. Iniciamos un servidor estático (por ejemplo, usando python -m SimpleHTTPServer 9000) y creamos dos archivos:
index.html
<!DOCTYPE html>
<html>
<body>
<script type="importmap">
{
"imports": {
"mylib": "./my-lib.mjs"
}
}
</script>
<script type="module">
import { sayHi } from "mylib";
sayHi();
</script>
</body>
</html>
y my-lib.mjs
export function sayHi() {
console.log("hi!");
}
Abrimos la página en el navegador, y listo: "¡hola!" Se mostró en la consola. A continuación, echemos un vistazo más de cerca a cómo funciona.
Estructura
, , JSON : imports scopes. - , ( ).
Imports
imports – , ( ) . /, ../, ./ URL.
"imports": {
"module-name": "address"
}
"", . / .
"my-pack" index.mjs :
export default function mainFunc() {
console.log("text from mainFunc");
}
"my-pack" "some-module" some-helper.mjs :
export function someHelper() {
console.log("text from someHelper");
}
importmap index.html:
<script type="importmap">
{
"imports": {
"mypack": "./my-pack/index.mjs",
"mypack/": "./my-pack/"
}
}
</script>
,
import mainFunc from "mypack";
import { someHelper } from "mypack/some-module/some-helper.mjs";
Scopes
, (, ), , . . :
<script type="importmap">
{
"imports": {
"mypack": "./my-pack/index.mjs",
"mypack/": "./my-pack/"
},
"scopes": {
"some/other/url/": {
"mypack": "./my-pack/index-v2.jsm"
}
}
}
</script>
, url some/other/url/ "mypack" "./my-pack/index-v2.jsm", "./my-pack/index.mjs".
. :
<script type="importmap">
{
"imports": {
"a": "/a-1.mjs",
"b": "/b-1.mjs",
"c": "/c-1.mjs"
},
"scopes": {
"/scope2/": {
"a": "/a-2.mjs"
},
"/scope2/scope3/": {
"b": "/b-3.mjs"
}
}
}
</script>
:
Specifier |
Referrer |
Resulting URL |
a |
/scope1/foo.mjs |
/a-1.mjs |
b |
/scope1/foo.mjs |
/b-1.mjs |
c |
/scope1/foo.mjs |
/c-1.mjs |
|
|
|
|
a |
/scope2/foo.mjs |
/a-2.mjs |
b |
/scope2/foo.mjs |
/b-1.mjs |
c |
/scope2/foo.mjs |
/c-1.mjs |
|
|
|
|
a |
/scope2/scope3/foo.mjs |
/a-2.mjs |
b |
/scope2/scope3/foo.mjs |
/b-3.mjs |
c |
/scope2/scope3/foo.mjs |
/c-1.mjs |
, script. :
<script type="importmap">
{
"imports": { ... },
"scopes": { ... }
}
</script>
src:
<script type="importmap" src="some/address/to/import-map.importmap"></script>
, MIME type application/importmap+json.
, .
, :
An import map is added after module script load was triggered.
. , . :
Aún no se admiten varios mapas de importación. https://crbug.com/927119
Deno
En Deno, los mapas de importación se conectan mediante el indicador --import-map:
deno run --import-map=import_map.json index.ts
Donde import_map.json es el mapa de importación e index.ts es el archivo para ejecutar (compilar).