ESモジュール構文
以下は、ES2015仕様で定義されているモジュールの動作に関する軽量なリファレンスとして意図されています。これは、Rollupを正常に使用するためには、importおよびexportステートメントを正しく理解することが不可欠であるためです。
インポート
インポートされた値を再割り当てすることはできません。ただし、インポートされたオブジェクトと配列は変更できます（そして、エクスポートモジュールと他のすべてのインポーターは、その変更の影響を受けます）。その点で、それらはconst宣言と同様に動作します。
名前付きインポート
ソースモジュールから特定の項目を、元の名前でインポートします。
import { something } from './module.js';ソースモジュールから特定の項目を、インポート時に割り当てられたカスタム名でインポートします。
import { something as somethingElse } from './module.js';名前空間インポート
ソースモジュールのすべてを、ソースモジュールの名前付きエクスポートすべてをプロパティとメソッドとして公開するオブジェクトとしてインポートします。
import * as module from './module.js';上記のsomethingの例は、インポートされたオブジェクトにプロパティとして付加されます（例：module.something）。存在する場合、デフォルトのエクスポートにはmodule.defaultでアクセスできます。
デフォルトインポート
ソースモジュールのデフォルトエクスポートをインポートします。
import something from './module.js';空のインポート
モジュールコードをロードしますが、新しいオブジェクトは利用可能にしません。
import './module.js';これは、ポリフィルや、インポートされたコードの主な目的がプロトタイプの操作である場合に役立ちます。
動的インポート
動的インポート APIを使用してモジュールをインポートします。
import('./modules.js').then(({ default: DefaultExport, NamedExport }) => {
// do something with modules.
});これは、コード分割アプリケーションやモジュールをオンザフライで使用する場合に役立ちます。
エクスポート
名前付きエクスポート
以前に宣言された値をエクスポートします
const something = true;
export { something };エクスポート時に名前を変更します
export { something as somethingElse };宣言と同時に値をエクスポートします
// this works with `var`, `let`, `const`, `class`, and `function`
export const something = true;デフォルトエクスポート
単一の値をソースモジュールのデフォルトエクスポートとしてエクスポートします
export default something;この方法は、ソースモジュールにエクスポートが1つしかない場合にのみ推奨されます。
デフォルトエクスポートと名前付きエクスポートを同じモジュール内で混在させるのは悪い習慣ですが、仕様では許可されています。
バインディングの仕組み
ESモジュールは、値ではなくライブバインディングをエクスポートするため、最初にインポートされた後でも値を変更できます。 このデモを参照してください。
// incrementer.js
export let count = 0;
export function increment() {
count += 1;
}// main.js
import { count, increment } from './incrementer.js';
console.log(count); // 0
increment();
console.log(count); // 1
count += 1; // Error — only incrementer.js can change this