Olá. Com o lançamento do Chrome 89 (assim como no Deno 1.8), tornou-se possível usar mapas de importação - um mecanismo que permite obter controle sobre o comportamento das importações de JavaScript.
Apesar do fato de que o desenvolvimento moderno é construído usando módulos nativos, não podemos executar aplicativos sem primeiro construí-los. Um dos objetivos dos mapas de importação é justamente resolver esse problema.
Resumindo, agora será totalmente legal e sem nenhum colecionador para escrever, digamos, assim:
import React from 'react';
Vamos ver como tudo funciona sob o corte.
Para que a diretiva import ou expressão import () seja capaz de resolver caminhos para módulos em uma nova forma, esses caminhos precisam ser descritos em algum lugar. Sim, acabou não havendo mágica com a resolução do compartimento do mecanismo de dependências como no mesmo Node.js ou webpack.
Os mapas de importação são especificados usando uma tag de script com um atributo type = "importmap" no formato JSON.
E agora um exemplo. Iniciamos um servidor estático (por exemplo, usando python -m SimpleHTTPServer 9000) e criamos dois arquivos:
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>
e my-lib.mjs
export function sayHi() {
console.log("hi!");
}
Abrimos a página no navegador e voila: "oi!" Foi exibido no console. A seguir, vamos examinar mais de perto como funciona.
Estrutura
, , 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.
. , . :
Vários mapas de importação ainda não são suportados. https://crbug.com/927119
Deno
No Deno, os mapas de importação são conectados usando o sinalizador --import-map:
deno run --import-map=import_map.json index.ts
Onde import_map.json é o mapa de importação e index.ts é o arquivo a ser executado (compilar).