JSのimportって？
import 文は、他のモジュールによってエクスポートされた読み込み専用のライブバインディングをインポートするために使用します。
ライブバンディングとは、バインディングをエクスポートしたモジュールによって値が更新されることを指すそうです。
種類
下記のようなimportの種類があります。
import defaultExport from "module-name"; import * as name from "module-name"; import { export1 } from "module-name"; import { export1 as alias1 } from "module-name"; import { export1 , export2 } from "module-name"; import { foo , bar } from "module-name/path/to/specific/un-exported/file"; import { export1 , export2 as alias2 , [...] } from "module-name"; import defaultExport, { export1 [ , [...] ] } from "module-name"; import defaultExport, * as name from "module-name"; import "module-name"; var promise = import("module-name");
参照: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/import#syntax
import defaultExport from "module-name";
まずはこれ。モジュールからデフォルトのエクスポートをインポートしています。
デフォルトエクスポートは、モジュール側で下記のように設定されていて、何も指定しない場合にインポートされます。
export default expression;
import * as name from "module-name";
モジュール内の全てのエクスポートをインポートします。それぞれのエクスポートにアクセスするには下記のようにします。
name.hoge()
import { export1 } from "module-name";
モジュール内にあるexport1というエクスポートをインポートします。
import { export1 as alias1 } from "module-name";
モジュール内にあるexport1というエクスポートをalias1という名前に変更してインポートします。
import { export1 , export2 } from "module-name";
モジュールからexport1とexport2の二つのエクスポートをインポートします。
import defaultExport, * as name from "module-name";
デフォルトエクスポートをnameという名前に変更してインポートします。
import "module-name";
モジュールのグローバルコードを実行するためだけに、使われるみたいです👀実際にインポートはされないらしい。
var promise = import("module-name");
ロード時にインポートしたいモジュールが存在しない場合などの理由で、動的にインポートを行いたい時に使うらしいです。
という感じで本日は以上🍺
