CJS, UMD, ESMとは?その違い。

JavaScript

cjs, umd, esmって何?と思ったので調べました。

まずはざっくり結論から

これらは、モジュールの仕様を指します。JavaScriptファイルから別のJavaScriptファイルを読み込む仕組みのようなものです。

JavaScript界隈にもさまざまなモジュールの仕様・フォーマットがあります。その中で、cjsはCommonJSモジュールesmはESモジュールumdはUmdモジュールを指しています。

異なるモジュールシステムでライブラリを機能させるときなど、各モジュールの仕様に合わせたバンドルファイルを作成しておくことがあるようです。

CJS

Node.jsで採用されているモジュールシステム、CommonJSと同義です。
CJSはそのままではクライアント(ブラウザ)で動かすことはできません。

サンプルコード

const lib = require( "package/lib" ); // import

function hello(){
    lib.hello( "Hello!" );
}

exports.hello = hello;

UMD

Universal Module Definitionの略。

なぜUniversalかというと、サーバー側・クライアント側どちらでも動くことができるからです。UMDモジュールは、基本的にはRollupやWebpackなどのバンドルツールで生成されます。

サンプルコード

!function (e,t) {
  "object"==typeof exports && "undefined" != typeof module
  ? t(exports, require("react"))
  ...
}

ESM

ES moduleのことです。JavaScriptにおけるスタンダードなモジュールシステムです。
Node.jsもデフォルトはCJSですが、現在ではESMもサポートするそうです。

サンプルコード

import React from 'react' // import
...
export default App // export

まとめ

普段開発する中ではあまり気にすることではないかと思いますが、モジュール周りを触る時は気をつけたいですね。

タイトルとURLをコピーしました