Hallo. Mit der Veröffentlichung von Chrome 89 (sowie in Deno 1.8) wurde es möglich, Import-Maps zu verwenden - ein Mechanismus, mit dem Sie die Kontrolle über das Verhalten von JavaScript-Importen erlangen können.
Trotz der Tatsache, dass die moderne Entwicklung mit nativen Modulen erstellt wird, können wir keine Anwendungen ausführen, ohne sie zuerst zu erstellen. Eines der Ziele von Importkarten ist es, dieses Problem genau zu lösen.
Kurz gesagt, jetzt ist es völlig legal und ohne Sammler, beispielsweise so zu schreiben:
import React from 'react';
Mal sehen, wie das alles unter dem Schnitt funktioniert.
Damit die import-Direktive oder der import () -Ausdruck Pfade zu Modulen in einer neuen Form auflösen können, müssen diese Pfade irgendwo beschrieben werden. Ja, es stellte sich heraus, dass die Auflösung von Abhängigkeiten im Motorraum wie in derselben Node.js oder demselben Webpack keine Magie darstellt.
Importzuordnungen werden mithilfe eines Skript-Tags mit dem Attribut type = "importmap" im JSON-Format angegeben.
Und jetzt ein Beispiel. Wir starten einen statischen Server (zum Beispiel mit Python -m SimpleHTTPServer 9000) und erstellen zwei Dateien:
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>
und my-lib.mjs
export function sayHi() {
console.log("hi!");
}
Wir öffnen die Seite im Browser und voila: "hi!" Wurde in der Konsole angezeigt. Schauen wir uns als nächstes genauer an, wie es funktioniert.
Struktur
, , 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.
. , . :
Mehrfachimportkarten werden noch nicht unterstützt. https://crbug.com/927119
Deno
In Deno werden Importkarten mit dem Flag --import-map verbunden:
deno run --import-map=import_map.json index.ts
Dabei ist import_map.json die Importzuordnung und index.ts die auszuführende (kompilierte) Datei.
Quellen von
https://wicg.github.io/import-maps
https://github.com/WICG/import-maps
https://deno.land/manual/linking_to_external_code/import_maps