Articles /

CommonJS と AMD/RequireJS の比較

Introduction

Apache や Microsoft IIS など、あらかじめ設定されている Web サーバーとは異なり、node.js はまったく異なっています。 node.js では、開発者はゼロから Web サーバーを構築します。 開発者のコーディングスキルがWebサーバを守るために期待されているのです。 このように、Node.jsはApacheなどとは異なります。

この記事では、node.jsの2つの主要なシステムモジュール、AMDとCommon.jsに焦点を当てます。 この2つを比較する前に、2つのシステム・モジュールの違いについて説明する必要があります。 2 つの比較を助ける 2 つの指針となる質問は、ブラウザでモジュールを読み込むとき、またはブラウザからモジュールを読み込むときにどちらが速いか、そして、あるシステム モジュールを変換して他のシステム モジュールのいくつかの機能を継承する方法です。

この記事は node.js amd javascript の基本に焦点を当てません。 node.js のインストール方法」、「npm または nave を使用してパッケージをインストールする方法」、「プロジェクトごとに異なる node.js のバージョン」などのトピックは取り上げません。 私たちの目的は、AMDとCommon.jsの間の混乱を解消することです。 したがって、node.jsのコアモジュール、いくつかの関数と変数を軽く強調し、最終的にはAMDとCommon.jsに注意を向け、ブラウザでモジュールを速く読み込むためにシステムモジュールの1つを変換する方法を説明します。

Core、ファイル、外部ノードモジュール

node.js では、主に3つの重要なモジュール； Core、ファイル、外部ノードモジュール が存在します。

  • Fileモジュール:
    他の2つのモデルとは異なり、ファイルモデルは相対パスベースのモデルである。 なぜでしょうか。 たとえば、次のような構文でモジュールをエクスポートするとします。
 module.exports = foo { 'something' : 123 } ; 
 var foo = function () { console.log('foo called'); };
var b = function () { console.log('b called'); }; 
module.exports = { b : b };
module.exports.bar = function () {console.log('bar called');}; 
module.exports.bas = function () {console.log('bas called');};

モジュールをファイルにロードまたはインポートする方法は、コアおよび external_node モジュールとかなり異なります。

  • コアモジュール:
    node.jsの3つの主要なモジュールを含む次のモジュールは、コアモジュールである。 コアモジュールは、非相関ベースのモジュールです。 特に、ファイルにモジュールを要求する (またはインポートする) 場合、ファイル モジュールとは大きく異なります。

たとえば、OS 固有のスラッシュを修正する node.js のパス モジュールを消費するとしたら、.NET Framework を考慮します。 を考慮し、重複するスラッシュを削除します。

var require = require('path') console.log (path.normalize ('/foo/bar/......'));
  • external_node モジュール:
    これらのモジュールは、コア モジュールとファイル ベース モジュールの間のどこかに位置しています。 
module.exports = function () {console.log('called node modules!');}

しかし、モジュールをロードするとき、それらはかなり異なってきます。

var bar = require('bas');bas(); //

さらに、node.js は、詳細は説明しませんが、いくつかの重要なグローバルで便利な機能を提供します。 timer、console、_filename、_dirname、processはいずれもnode.jsの重要なグローバルの一例です。 例えば、_filenameと_dirnameはすべてのファイルで利用可能で、現在のモジュールのフルパスとディレクトリにアクセスできます。

node.js のモジュールについて簡単に理解したところで、CommonJS と AMD モジュールを区別する主要点に進みましょう。 “Common.jsはなぜブラウザからモジュールを読み込むのが遅いのか”、”AMDとRequire.jsの特定の機能を継承するためにbrowserifyを介して変換するにはどうすればよいか “という問題に取り組みます。 .

CommonJS と AMD の紹介

 CommonJS is a great module for the server side environment, especially when you have immediate access to the filesystem. However, using the same module system in the browser may be less reliable and extremely slow.

たとえば、サーバー側の環境で 2 つのモジュールがどのようにロードされるかを考えてみましょう。

var foo = require('./foo');var bar = require('./bar');// more code here

上の例を見てみると、一方のモジュールがロードされる間に、もう一方のモジュールのパース待ちをすることはサーバー側では良い習慣と考えられているようです。

言い換えれば、foo モジュールがロードされているとき、bar は foo が完全にロードされるまで解析または処理されません。 サーバーでさえ、foo モジュールの処理が終わるまで bar モジュールを認識しないかもしれません。

ブラウザで同じモジュール システムを使用することは、各モジュール システムがサーバーへの HTTP 要求をトリガーする必要があるので、良いアイデアとは見なされていません。 これは、サーバー環境では、かなり効率が悪く、信頼性も低くなります。 それは、クライアント側のユーザーエクスペリエンスを低下させます。 この問題は、モジュールの非同期ロードにより解決できます。

ここで、AMD が登場します。 AMD は非同期モジュール定義としても知られ、ブラウザでのモジュールの非同期読み込みをサポートするために導入されました。 AMD のファイルに何かをエクスポートするには、コールバック関数をインクルードし、define コールバック関数からそれを返すだけでよいのです。 以下に例を示します。

 define(, function () { var foo = function () { console.log ('foo was called');}; return foo; // function foo is exported});

node.JS における export 変数の構文と同様に、define 関数も exports という特別な引数を取ります。

define(, function (exports) {var bas = exports.log = function () {console.log ('bas.log was called'); };});

2 つのモジュールをブラウザで読み込めるようにするには、RequireJS をダウンロードおよびインストールする必要があります。 これは、開発者がブラウザで node.JS コードを使用するのを防ぐためのオプションに過ぎないことを覚えておいてください]

非同期モジュール定義を介してモジュールをロードできるようにするには、なぜ RequireJS が必要なのでしょうか。 したがって、サードパーティのライブラリからアクセスするのが最良の選択です。 RequireJS は、プロジェクトに含める javascript ファイルです。

define(, function(foo, bar){ //more code here// more code here });

node.js をブラウザ コードに変換する方法：

では、browserify によって CommonJS を AMD/RequireJS と互換になるよう変換する方法を見てみましょう。 browserify を介して CommonJS を変換すると、AMD/RequireJS と同様に node.js がブラウザでモジュールを読み込むようになります。

以下のコードで browserify をインストールしましょう。 インストール中は、インターネットに接続していることを確認してください。 ハイフンのついた g は単にグローバルという意味です。

npm install –g browserify

モジュールを作り、clientJS や好きな名前をつけて、最終的に browserify を使って AMD/RequireJS に変換することができる。

module.exports = function () {console.log('bas was called');}
exports.log = function () {console.log('bar.log was called');}

さて、上記のコードを AMD 互換にするために、言い換えれば、モジュールを非同期にロードするために、次のコマンドライン引数によって行う必要があります:

browserify client.js -o amdmodule.js

Client として、任意の名前を指定することができます。 常にclient.jsである必要はありませんが、client.jsも望ましいです。 単なるファイルであることを忘れないでください。 さらに、browserify についての設定は http://browserify.org/.

まとめ:

最後に、すべての node.JS モジュールがブラウザで効果的に動作するように変換できるわけではないことに注意する必要があります。 サーバーサイドで利用可能な機能に依存するものは、ブラウザではまったく動作しません。

ブラウザでモジュールの非同期ロードを可能にするソリューションとして、AMD/RequireJS を紹介しましたが、これは良い習慣とされています。 モジュールを非同期でロードすることは、ブラウザで CommonJS を使用するよりもずっと速く、信頼性があります。

Leave a Reply