JavaScriptのimportを調べた

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");

ロード時にインポートしたいモジュールが存在しない場合などの理由で、動的にインポートを行いたい時に使うらしいです。

という感じで本日は以上🍺

参考

developer.mozilla.org

その他の記事

yamato8010.hatenablog.com

yamato8010.hatenablog.com

yamato8010.hatenablog.com