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

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

まずはざっくり結論から

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

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

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

サンプルコード

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

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

exports.hello = hello;

Universal Module Definitionの略。

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

サンプルコード

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

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

サンプルコード

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

ちなみに、AMD（Asynchronous Module Definition）もJSモジュールシステムの1つです。

バンドラとして有名なwebpackなどは、異なるモジュールシステムの構文が混ざっていても、依存関係を解決してバンドルしています。

普段開発する中ではあまり気にすることではないかと思いますが、モジュール周りを触る時は気をつけたいですね。例えば、作ったライブラリを複数のモジュールシステムで機能させるときは、各モジュールのバンドルファイルを作成しておくことがあります。