JavaScriptでもインポートを使用しますか?

JavaScript には import ステートメントがあります。 import ステートメントは、モジュールからエクスポートされた関数、オブジェクト、初期値を別のモジュールにインポートするために使用され、構文は「import {モジュール名} from "インポートする必要があるモジュールのパス名"」になります。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

import ステートメントは、別のモジュールによってエクスポートされたバインディングをインポートするために使用されます。厳密モードが宣言されているかどうかに関係なく、インポートされたモジュールは厳密モードで実行されます。 import ステートメントは埋め込みスクリプトでは使用できません。

Syntax

import defaultExport from “module-name”;
import * as name from “module-name”;
import { export } from “module-name”;
import { export as alias } from “module-name”;
import { export1 , export2 } from “module-name”;
import { export1, export2 as alias2 , [...] } from “module-name”;
import defaultExport, { export [ , [...] ] } from “module-name”;
import defaultExport, * as name from “module-name”;
import “module-name”;

defaultExport

は、モジュールのデフォルトのエクスポートの名前を参照します。

module-name

インポートするモジュール。これは通常、モジュールを含む .js ファイルへの相対パス名または絶対パス名であり、.js 拡張子が含まれない場合があります。一部のパッケージ化ツールでは、この拡張機能の使用が許可または要求されている場合があります。一重引用符と二重引用符で囲まれた文字列のみを許可するかどうか、ランタイム環境を確認してください。

name

参照時に一種の名前空間として使用されるモジュール オブジェクトの名前。

export,exportN

インポートされるエクスポート名は

alias,aliasN

となります。インポートの名前を指定するために参照されます。

説明

name パラメーターは、名前空間を使用してエクスポートを参照する「モジュール オブジェクト」の名前です。 export パラメーターは単一の名前付きエクスポートを指定しますが、import * as name 構文はすべてのエクスポートをインポートします。

モジュール全体のコンテンツをインポートします

これにより、/modules/my-module.js にあるファイルからエクスポートされたすべてのモジュールとともに、myModule が現在のスコープに挿入されます。

import * as myModule from ‘/modules/my-module.js’;

ここで、エクスポートにアクセスするということは、モジュール名 (この場合は「myModule」) を名前空間として使用することを意味します。たとえば、上記でインポートしたモジュールに doAllTheAmazingThings() が含まれている場合、次のように呼び出すことができます。 myExport は、モジュール my-module からエクスポートされるか (モジュール全体がエクスポートされるため)、または明示的に (export ステートメントを使用して) エクスポートされ、現在のスコープに myExport を挿入します。

myModule.doAllTheAmazingThings();

複数のエクスポートのインポート

foo と bar を現在のスコープに挿入します。

import { myExport } from ‘/modules/my-module.js’;

エイリアスを使用したエクスポートのインポート

インポート時にエクスポートの名前を変更できます。たとえば、現在のスコープに shortName を挿入します。

import { foo, bar } from ‘/modules/my-module.js’;

インポート時に複数のエクスポートの名前を変更する

モジュールの複数のエクスポートをインポートするにはエイリアスを使用します。

import { reallyReallyReallyLongModuleExportName as shortName } from “/modules/my-module.js”;

副作用のためだけにモジュールをインポート

モジュールは副作用 (中立的な言葉、軽蔑的な意味合いではない) のためだけにインポートされ、 module には何もインポートされません。モジュール内でグローバル コードを実行しますが、実際には値をインポートしません。

import {
    reallyReallyReallyLongModuleMemberName as shortName,
    anotherLongModuleName as short
} form “/modules/my-module.js”;

デフォルトのインポート

デフォルトのエクスポート (オブジェクト、関数、クラスなど) が有効な場合に使用できます。このようなデフォルトは、import ステートメントを使用してインポートできます。

最も簡単な使用法は、デフォルト値を直接インポートすることです:

import “/modules/my-module.js”

上記の使用法 (名前空間インポートと名前付きインポート) でデフォルト構文を同時に使用することもできます。この場合、デフォルトのインポートを最初に宣言する必要があります。

import myDefault from “/modules/my-module.js”;

or

import myDefault, * as myModule from “/modules/my-module.js”;

Example

AJAX DSON リクエストの処理を支援するためにヘルパー モジュールからインポートされました。

モジュール: file.js

import myDefault, { foo, bar } from “/modules/my-module.js”;

メイン プログラム: main.js

function getJSON(url, callback){
    let xhr = new XMLHttpRequest();
    xhr.onload = function () {
        callback(this.responseText)
    };
    xhr.open(‘GET’, url, true);
    xhr.send();
}
export function getUserFulContents(url, callback){
    getJSON(url, data => callback(JSON.parse(data)));
}

[関連する推奨事項:

JavaScript 学習チュートリアル

#]

以上がJavaScriptでもインポートを使用しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。