Halo. Dengan dirilisnya Chrome 89 (serta Deno 1.8), Impor peta menjadi mungkin - mekanisme yang memungkinkan Anda untuk mengontrol perilaku impor JavaScript.
Terlepas dari kenyataan bahwa pengembangan modern dibangun menggunakan modul asli, kami tidak dapat menjalankan aplikasi tanpa membangunnya terlebih dahulu. Salah satu tujuan peta impor justru untuk mengatasi masalah ini.
Singkatnya, sekarang akan sepenuhnya legal dan tanpa ada kolektor untuk menulis, katakanlah, seperti ini:
import React from 'react';
Mari kita lihat bagaimana semuanya bekerja di bawah potongan.
Agar perintah import atau ekspresi import () dapat menyelesaikan jalur ke modul dalam bentuk baru, jalur ini perlu dijelaskan di suatu tempat. Ya, ternyata tidak ada keajaiban dengan resolusi kompartemen mesin dari dependensi seperti pada Node.js atau webpack yang sama.
Peta impor ditentukan menggunakan tag skrip dengan atribut type = "importmap" dalam format JSON.
Dan sekarang sebagai contoh. Kami memulai server statis (misalnya, menggunakan python -m SimpleHTTPServer 9000) dan membuat dua file:
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>
dan my-lib.mjs
export function sayHi() {
console.log("hi!");
}
Kami membuka halaman di browser, dan voila: "hai!" Ditampilkan di konsol. Selanjutnya, mari kita lihat lebih dekat cara kerjanya.
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.
. , . :
Beberapa peta impor belum didukung. https://crbug.com/927119
Deno
Di Deno, peta impor dihubungkan menggunakan bendera --import-map:
deno run --import-map=import_map.json index.ts
Di mana import_map.json adalah peta impor dan index.ts adalah file untuk dijalankan (kompilasi).