これらはコードを複数のファイルに分割するための、JavaScript の2つのモジュールシステムです。
// import / export, used in browsers and modern Node
import { sum } from "./math.js";
import defaultThing from "./thing.js";
export const x = 1;
export default function () {};
const { sum } = require("./math");
module.exports = { x: 1 };
| ES モジュール | CommonJS | |
|---|---|---|
| 構文 | import/export | require/module.exports |
| 読み込み | 静的・非同期 | 動的・同期 |
| 解析可能性 | ✅ → ツリーシェイキング | ❌ より困難 |
| バインディング | ライブ（読み取り専用） | 値のコピー |
トップレベルの this | undefined | module.exports |
静的とは、ESM の import がパース時に判明することを意味し、これによりバンドラはツリーシェイキング（未使用のエクスポートを削除する）を行えます。CommonJS の require は動的（条件付きで require できる）なので、同じようには簡単に解析できません。
{ "type": "module" } // in package.json, or use the .mjs extension
CommonJS から ESM 専用のパッケージを require() することはできず、両者を混在させると粗が出ます。また ESM の import はライブバインディングでもあります。エクスポート側が値を変更すると、import 側は新しい値を見ます（CJS はスナップショットのコピーを渡します）。
ESM は未来です（ブラウザネイティブ、ツリーシェイキング可能、トップレベル await）。
新しいコードでは ESM を優先しつつ、Node エコシステムの多くが依然として CJS を使っているため、CJS も理解しておきましょう。