Export の構文

クラスや変数の宣言と同時にそれを export することができます。 (下記の例以外にもありそうです。)

// VariableStatement
export varidentifier1,identifier2 =...,...;

// Declaration
// ClassDeclaration
export classIdentifier {... }
// LexicalDeclaration
export letidentifier3,identifier4 =...,...;
export constidentifier5,identifier6 =...,...;

モジュール内で宣言した変数などの名前を指定して export することもできます。

export {name,localName asexportName,... };

上の例では、モジュール内で宣言されたname という名前の宣言をname という名前のまま export し、モジュール内で宣言されたlocalName という宣言をexportName という名前で export します。

さらに、「default」 という特別な名前で export する構文も存在します。 (下記の例のすべてのIdentifier は省略可能です。)

// HoistableDeclaration[Default]
// FunctionDeclaration[Default]
export default functionIdentifier (...) {... }
// GeneratorDeclaration[Default]
export default function *Identifier (...) {... }

// ClassDeclaration[Default]
export default classIdentifier {... }

// AssignmentExpression[In] (下記以外もいろいろある)
export default (...) => {... } // ArrowFunction
export default 100;

また、別のモジュールから import した宣言を export することもできます。

export * from "module-specifier";
export {name,localName asexportName,... } from "module-specifier";

export する際の名前が重複しているとエラーになるようです。 (なので default export はモジュールにつき 1 つまで。)

• 参考 :ECMA-262 6th, 15.2.3 節 Exports

Import の構文

まず、宣言を参照しない単純な import を示します。 これにより import 先のモジュールコードの処理が走ります。 (そのモジュールの宣言を参照することはできません。)

import "module-specifier";

Import 先モジュールが export している宣言の名前を指定してモジュール内で参照できるようにする import 方法は次の通りです。

import {importedBinding1,identifier asimportedBinding2,... } from "module-specifier";

上の例では、importedBinding1 という名前で export されている宣言をimportedBinding1 という名前のまま import し、identifier という名前で export されている宣言をimportedBinding2 という名前で import します。

Import 先モジュールが export しているすべての宣言を含むオブジェクトを得るような import 方法もあります。

import * asimportedBinding from "module-specifier";

上の例では、importedBinding に Module Namespace オブジェクトが結び付けられます。 Module Namespace オブジェクトは、import 先モジュールが export している宣言をプロパティとして持つオブジェクトです。 (詳しくは後述。)

また、特別な名前 「default」 で export されている宣言を受け取る import 構文もあります。 この構文は上の 2 つの構文と組み合わせて使うことができます。

// モジュール "module-specifier" で default export された宣言をimportedDefaultBinding という名前に結びつける
importimportedDefaultBinding from "module-specifier";
// 下のように組み合わせて使うこともできる
importimportedDefaultBinding, {importedBinding1,identifier asimportedBinding2,... } from "module-specifier";
importimportedDefaultBinding, * asimportedBinding from "module-specifier";

• 参考 :ECMA-262 6th, 15.2.2 節 Imports

Module Namespace オブジェクト

Import 時に* を使うと作られる Module Namespace オブジェクトについては次のように書かれています。 このオブジェクトのプロパティを通してモジュールがエクスポートしてる宣言にアクセスできるようになる、って理解でいいと思います。

A Module Namespace Object is a module namespace exotic object that provides runtime property-basedaccess to a module’s exported bindings. There is no constructor function for Module Namespace Objects. Instead, such an object is created for each module that is imported by an ImportDeclaration that includes aNameSpaceImport (See 15.2.2).

In addition to the properties specified in 9.4.6 each Module Namespace Object has the own following properties:

ECMA-262 6th (26.3 Module Namespace Objects)

A module namespace object is an exotic object that exposes the bindings exported from anECMAScript Module (See 15.2.3). There is a one-to-one correspondence between the String-keyed own properties of a module namespace exotic object and the binding names exported by the Module. The exported bindings include any bindings that are indirectly exported using export * export items.

ECMA-262 6th (9.4.6 Module Namespace Exotic Objects)

Web ブラウザでのモジュール読み込みについて (追記)

最近HTML Standard の 8.1.3.7.1 節 「HostResolveImportedModule(referencingModule, specifier)」 でブラウザからのモジュールの参照の方法が定義されましたよ
Loader との関係はまだふわっとしていそう

というコメントをid:wakabatan から貰いました！

読んでみたところ、モジュールスクリプト自体はHTML Standard の 8.1.3.2 節 「Fetching scripts」 に書かれているようにフェッチされて、environment settings object のmodule map に格納されて、スクリプト実行時にはフェッチ済みのものがあればそれが使われ、なければエラー、って感じのようです。 モジュールスクリプト自体は URL で一意に識別されるみたいですね。 (module map のキーが、モジュールスクリプトの URL です。)

TypeScript のモジュールの機能を使って開発した JS を web 用にデプロイすることを考えると、モジュール探索のベースとなる URL を指定できるような仕組みだと嬉しいと思うんですが、今のところそういう感じではなさそうですね。 (まあ TypeScript →JavaScript の変換のところでなんかやればいいという話ではあります。)

await はモジュールでのみFutureReservedWord

みたいです。

await is only treated as a FutureReservedWord when Module is the goal symbol of the syntactic grammar.

ECMA-262 6th (11.6.2.2 Future Reserved Words)

Js.next: Ecmascript 6

• 作者: Aaron Frost
• 出版社/メーカー: Oreilly & Associates Inc
• 発売日: 2017/04/25
• メディア: ペーパーバック
• この商品を含むブログを見る