さまざまな javascript モジュールの形式を理解する
アプリケーションを構築するとき、私のように、どの形式を使用すべきか常に自問します。 CJS か? AMD? UMD ? ESM ? どのような違いがあるのでしょうか。
この記事を通して、これらの質問にお答えします😊。
#異なるフォーマット
#CommonJS (CJS)
これは最初に作られたフォーマットの1つです。 すでに使ったことがある人も多いのではないでしょうか。 これは、NodeJS に最初に影響を与えたモジュール システムです。
このシステムは、いくつかのよく知られたキーワードのおかげで、モジュールのインポートとエクスポートに依存しています。 require
と exports
です。 module.exports
オブジェクトは本当に NodeJS に固有です。
// utils.js // we create a function function add(r){ return r + r; } // export (expose) add to other modules exports.add = add; // index.js var utils = require('./utils.js'); utils.add(4); // = 8
commonJS チームは、ブラウザにとってあまり良くない同期的なものとしてこの API を作成しました…。 さらに、Commonjs はブラウザによってネイティブに理解されません。ローダーライブラリか何らかのトランスパイルが必要です。
#Asynchronous Module Definition (AMD)
AMD は CommonJS のある種の分裂です。 CJS チームの残りのチームによって取られた方向性に同意しないメンバーによって作成されました。
彼らは、非同期モジュール読み込みをサポートするために AMD を作成することにしました。 これは RequireJS で使用されるモジュール システムで、クライアント側 (ブラウザー) で動作しています。
// add.js define(function() { return add = function(r) { return r + r; } }); // index.js define(function(require) { require('./add'); add(4); // = 8 }
この例は、Web サイトに requirejs がある場合のみ動作します。 他の AMD の例もあります。
#Universal Module Definition (UMD)
理解しているかもしれませんが、これらの 2 つの形式は残念ながら相互に理解できません。 このため、UMD が作成されました。 これは AMD に基づいていますが、CommonJS との互換性を処理するためにいくつかの特殊なケースが含まれています。
残念ながら、この互換性は、読み取り/書き込みを複雑にするいくつかの複雑さを追加します。 もし必要なら、この github リポジトリで UMD コードの複数のテンプレートを見つけることができます。
#ES2015 モジュール (ESM)
これら 3 つの形式は読みやすくなく、静的コード アナライザーで分析するのが難しく、どこでもサポートされていないため、ECMA チーム (Javascript の標準化チーム) は ECMAScript 2015 (ES6) 標準を作ることに決定しました。この形式は読み書きが非常に簡単で、同期モードと非同期モードの両方をサポートします。
// add.js export function add(r) { return r + r; } // index.js import add from "./add"; add(4); // = 8
さらに、es モジュールは静的解析を行うことができ、ビルド ツール (Webpack や Rollup) がコード上でツリー シェイクを実行できるようにします。 ツリーシェーキングとは、バンドルから未使用のコードを削除するプロセスです。
The format still have two cons (but they are improving):
- ESM は動的インポート モジュールをサポートしていませんが、数か月前から提案があり、いくつかのブラウザで実装が開始されています。
- すべてのブラウザでサポートされているわけではありませんが、幸いなことに、これはトランスパイルのおかげで「修正」することができます! 残念ながら、このトランスパイルには、ES5 には存在しない ES6 の欠落した機能を修正するために余分なコードが追加されるため、コストが発生します。
#Further readings
これらの異なるフォーマットがどのように機能するかを理解するためにさらに (例や説明などを通して) 進みたい場合は、私が見つけた、そして私にインスピレーションを与えた読み物をいくつか紹介します。 CommonJS vs AMD vs ES2015
- You Should be Using esm
- Writing Modular JavaScript With AMD, CommonJS & ES Harmony
- AMD、CommonJS、UMDとは?
- Modularization techniques (There is multiple pages here)
- The state of JavaScript modules