ECMAScript モジュール

ECMAScript モジュール (ESM) は、Web でモジュールを使用するための仕様です。最新のブラウザですべてサポートされており、Web 用のモジュールコードを記述するための推奨方法です。

Webpack は、ECMAScript モジュールの処理と最適化をサポートしています。

エクスポート

exportキーワードを使用すると、ESMから他のモジュールに要素を公開できます。

export const CONSTANT = 42;

export let variable = 42;
// only reading is exposed
// it's not possible to modify the variable from outside

export function fun() {
  console.log('fun');
}

export class C extends Super {
  method() {
    console.log('method');
  }
}

let a, b, other;
export { a, b, other as c };

export default 1 + 2 + 3 + more();

インポート

importキーワードを使用すると、他のモジュールからの参照をESMに取り込むことができます。

import { CONSTANT, variable } from './module.js';
// import "bindings" to exports from another module
// these bindings are live. The values are not copied,
// instead accessing "variable" will get the current value
// in the imported module

import * as module from './module.js';
module.fun();
// import the "namespace object" which contains all exports

import theDefaultValue from './module.js';
// shortcut to import the "default" export

ESMとしてのモジュールのフラグ設定

デフォルトでは、webpack はファイルがESMか別のモジュールシステムかを自動的に検出します。

Node.js は、package.jsonのプロパティを使用して、ファイルのモジュールタイプを明示的に設定する方法を確立しました。"type": "module"をpackage.jsonに設定すると、このpackage.json以下のすべてのファイルがECMAScriptモジュールになります。代わりに"type": "commonjs"を設定すると、CommonJSモジュールになります。