import

スクリプトが、プロパティ、関数、およびオブジェクトを、その情報をエクスポートした署名付きスクリプトからインポートすることを可能にします。

構文

import name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import name , { member [ , [...] ] } from "module-name";
import "module-name" as name;

name

インポートされた値を受け取るオブジエンド名

member, memberN

エクスポートされたメンバーをインポートするための名前

alias, aliasN

インポートされたプロパティを受け取るオブジエンド名

module-name

インポートするモジュール名、ファイル名です

説明

nameパラメータはエクスポートされるメンバーを受け取るオブジエンド名です。memberパラメータは各memberを特定するが、nameパラメータは全部インポートする。モジュールが一つのdefaultパラメータをエクスポートしたらnameはfunctionにもなる。以下、明確な例を見ていこう。

モジュールの全コンテンツをインポート。myModuleはカレントスコープになる。

import myModule from "my-module.js";

モジュールの一つのメンバーのみインポート。myMemberはカレントスコープになる。

import {myMember} from "my-module.js";

モジュールの複数のメンバーをインポート。fooとbarはカレントスコープになる。

import {foo, bar} from "my-module.js";

モジュールの全コンテンツをインポートする同時に一部のメンバーを明示的に指定する。myModule, foo, barはカレントスコープになる。fooはmyModule.fooとbarはmyModule.barと同じである。

import myModule, {foo, bar} from "my-module.js";

メンバーをインポートする際にもっと使いやすい名前をaliasしでインポートする方法。shortNameはカレントスコープになる。

import {reallyReallyLongModuleMemberName as shortName} from "my-module.js";

付随的効果のため、どの名にもバインドせずに全モジュールをインポートする場合。

import "my-module.js";

例

AJAX JSONリクエストでアサインされたセカンダリファイルのインポート。

// --file.js--
function getJSON(url, callback) {
  let xhr = new XMLHttpRequest();
  xhr.onload = function () { 
    callback(this.responseText) 
  };
  xhr.open("GET", url, true);
  xhr.send();
}

export function getUsefulContents(url, callback) {
  getJSON(url, data => callback(JSON.parse(data)));
}

// --main.js--
import { getUsefulContents } from "file.js";
getUsefulContents("http://www.example.com", data => {
  doSomethingUseful(data);
}); 

仕様

ブラウザーの対応状況

[1] 部分サポートはflag: --harmony-modulesコマンドラインで隠されています。 See this V8 bugを見てください。

[2] this Firefox bugを見てください。

関連項目

• export