Salut. Avec la sortie de Chrome 89 (ainsi que dans Deno 1.8), il est devenu possible d'utiliser des cartes d'importation - un mécanisme qui vous permet de contrôler le comportement des importations JavaScript.
Malgré le fait que le développement moderne est construit à l'aide de modules natifs, nous ne pouvons pas exécuter des applications sans les créer au préalable. L'un des objectifs des cartes d'importation est précisément de résoudre ce problème.
En bref, maintenant, ce sera tout à fait légal et sans aucun collectionneur d'écrire, disons, comme ceci:
import React from 'react';
Voyons comment tout cela fonctionne sous la coupe.
Pour que la directive import ou l'expression import () puisse résoudre les chemins vers les modules sous une nouvelle forme, ces chemins doivent être décrits quelque part. Oui, il s'est avéré qu'il n'y avait pas de magie avec la résolution des dépendances dans le compartiment moteur comme dans le même Node.js ou webpack.
Les mappages d'importation sont spécifiés à l'aide d'une balise de script avec un attribut type = "importmap" au format JSON.
Et maintenant pour un exemple. Nous démarrons un serveur statique (par exemple, en utilisant python -m SimpleHTTPServer 9000) et créons deux fichiers:
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>
et my-lib.mjs
export function sayHi() {
console.log("hi!");
}
Nous ouvrons la page dans le navigateur, et voila: "salut!" A été affiché dans la console. Ensuite, regardons de plus près comment cela fonctionne.
Structure
, , 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.
. , . :
Plusieurs cartes d'importation ne sont pas encore prises en charge. https://crbug.com/927119
Deno
Dans Deno, les cartes d'importation sont connectées à l'aide de l'indicateur --import-map:
deno run --import-map=import_map.json index.ts
Où import_map.json est la carte d' importation et index.ts est le fichier à exécuter (compiler).