【JavaScript】ESMとCJSの違い

調べた範囲の📝です。マサカリ歓迎しております_(´ཀ`」 ∠)_

ざっくりと

ESM（Ecma Script Module）：モダン（新しい）。ブラウザはこちらのみ。Node.jsも対応済み。
CJS（Common JS Module）：Node.jsの伝統的なモジュールシステム。

Node.js において

ファイル名

• .mjs ファイル
  • 常にESM（Ecma Script Module）として扱われる
• .cjs ファイル
  • 常にCJS（Common JS Module）として扱われる

package.jsonの"type"フィールド

• "type": "module"
  • そのディレクトリ内の.jsファイルがESMとして扱われる
• "type": "commonjs"
  • そのディレクトリ内の.jsファイルがCJSとして扱われる

モジュールの読み込みメソッド

• import
  • 非同期的
  • 拡張子を明示する（import './module.js'）
  • ESM・CJSともに読み込みが可能
• require
  • 同期的
  • 拡張子を省略できる（require(./module)）
  • CJSのみが対象だったが、Node.js 22にてESMも対応開始。現在は特別に宣言した時だけだが、将来的にはデフォルトになる予定

ブラウザにおいて

呼び出しの属性

• <script type="module">
  • この呼び出しを行う場合、そのスクリプトはESMとして扱われる

注意事項

• CJSには対応していない
• requireには対応していない

その他

ESM

• トップレベルのawaitが使用可能

  import { fetchData } from './fetchData.mjs';
  
  const data = await fetchData('https://api.example.com/data');
  console.log(data);
  

CJS

• 即時実行（モジュールをインポートした際に、そのモジュールが即時に実行される）

logger.js

// CJSモジュール
console.log('Logger module loaded');

app.js

// CJSモジュール
require('./logger'); // "Logger module loaded" と表示される

参考