Zenn
🟨

ECMAScript Modules (ESM) と CommonJS

に公開
JavaScript
tech

ECMAScript Modules (ESM)

  • JavaScriptの標準規格で定義されたモジュールシステム
  • ブラウザとNode.jsで動作
  • 静的にモジュールを解析し、依存関係を解決
  • 型情報を含む
  • デフォルトエクスポートのみ許可
  • 相対パスと絶対パスの両方をサポート
  • 簡潔な構文
  • 動的importや名前空間など、新しい機能をサポート

CommonJS

  • Node.jsコミュニティで開発されたモジュールシステム
  • Node.jsでのみ動作
  • 実行時にモジュールをロードし、依存関係を解決
  • 型情報は含まない
  • すべてのエクスポートを許可
  • 相対パスのみサポート
  • 複雑な構文
  • CommonJSモジュールのエコシステムとの互換性

その他の違い

import require
動的import 可能 不可
名前空間 可能 不可
サイクル依存 検出可能 検出困難
Tree Shaking 可能 困難

動的import

https://zenn.dev/btc/articles/240403_dynamic_require

サイクル依存

サイクル依存とは、モジュールAがモジュールBに依存し、モジュールBがモジュールAに依存するような依存関係のことです。

importの場合、モジュール解析時に依存関係を静的に解析するため、サイクル依存を検出することができます。

一方、requireの場合、モジュールロード時に依存関係を動的に解決するため、サイクル依存が発生した場合、無限ループに陥る可能性があります。

// モジュールA.js
const B = require("./B");

// モジュールB.js
const A = require("./A");

// エラー: サイクル依存が発生

JavaScriptにおける、 Tree Shaking とは？

https://zenn.dev/btc/articles/240403_tree_shaking

どちらを使用するべきか

  • ブラウザで動作するコード: importを使用
  • Node.jsで動作するコード: requireを使用
  • 新しい機能を使用したい場合: importを使用
  • 既存のCommonJSモジュールと互換性を保ちたい場合: requireを使用

関連記事

import と require の違い

https://zenn.dev/btc/articles/240403_js_import_require

Discussion