こんにちは。Chrome 89（およびDeno 1.8）のリリースにより、インポートマップを使用できるようになりました。これはJavaScriptインポートの動作を制御できるメカニズムです。
最新の開発はネイティブモジュールを使用して構築されているという事実にもかかわらず、最初にそれらを構築せずにアプリケーションを実行することはできません。マップのインポートの目標の1つは、この問題を正確に解決することです。
要するに、今では完全に合法であり、コレクターがいなくても、次のように書くことができます。
import React from 'react';
カットの下ですべてがどのように機能するかを見てみましょう。
importディレクティブまたはimport（）式でモジュールへのパスを新しい形式で解決できるようにするには、これらのパスをどこかに記述する必要があります。はい、同じNode.jsやwebpackのように、依存関係のエンジンコンパートメントの解像度に魔法はないことが判明しました。
インポートマップは、JSON形式のtype = "importmap"属性を持つスクリプトタグを使用して指定されます。
そして今、例として。静的サーバーを起動し（たとえば、python -m SimpleHTTPServer 9000を使用）、次の2つのファイルを作成します。
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>
およびmy-lib.mjs
export function sayHi() {
console.log("hi!");
}
ブラウザでページを開くと、コンソールに「hi！」と表示されました。次に、それがどのように機能するかを詳しく見てみましょう。
構造
, , 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.
. , . :
複数のインポートマップはまだサポートされていません。https://crbug.com/927119
デノ
Denoでは、インポートマップは--import-mapフラグを使用して接続されます。
deno run --import-map=import_map.json index.ts
ここで、import_map.jsonはインポートマップであり、index.tsは実行（コンパイル）するファイルです。