さまざまな javascript モジュールの形式を理解する

BY admin
|

アプリケーションを構築するとき、私のように、どの形式を使用すべきか常に自問します。 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