CommonJs

このサイトは作成途中のものを公開しています。 また、Webpackのバージョンが1.13.0の頃に作成されたものですが、2017年2月現在Webpackは1系を非推奨として2の使用を勧めています。

CommonJSグループは各モジュールがそれ自身の名前空間で実行されることを確実にすることで、 JavaScriptのスコープ問題を解決するためのモジュールフォーマットを定義しています。

これはモジュールに対して明確に"全体(universe)"に公開したいモジュールの変数をexportさせることで、 また適切に動作させるためにrequreされる他のモジュールが定義されていることによって実現されます。

これをCommonJSで実現するために、2つのツールが与えられています。

  1. require()関数は、指定されたモジュールを現在のスコープへimportすることを可能にします。
  2. modulesオブジェクトは、現在のスコープから何かしらをexportすることを可能にします。

お決まりのHello Worldの例で確認してみましょう。

素のシンプルなJavaScript

ここでは、CommonJSでは無い例を紹介します。

salute.js(salute=挨拶)という名前のスクリプトファイル内に値を定義します。 このスクリプトは他のスクリプトで使用される変数を含むだけです。

// salute.js
var MySalute = "Hello";

次にworld.jsという名前の2つ目のファイルを用意し、 salute.jsで定義された値を使用します。

// world.js
var Result = MySalute + " world!";

モジュールの定義

ところが実際は、MySaluteが定義されていないとしてworld.jsは動作しません。 モジュールとして各スクリプトを定義することが必要になります。

// salute.js
var MySalute = "Hello";
module.exports = MySalute;
// world.js
var Result = MySalute + "world!";
module.exports = Result;

ここで特別なオブジェクトであるmoduleを使用しており、変数の参照をmodule.exportsに配置することで、 CommonJSのモジュールシステムは、これが我々が全体に公開したいモジュールのオブジェクトであることを認識します。 salute.jsMySaluteを公開し、world.jsResultを公開します。

モジュールの依存性

ここまで進めてきましたが、まだ依存性の定義のステップが抜けていました。 我々は既に独立したモジュールとして各スクリプトを定義しましたが、 world.jsは誰がMySaluteを定義したのかを知る必要があります。

// salute.js
var MySalute = "Hello";
module.exports = MySalute;
// world.js
var MySalute = require("./salute");
var Result = MySalute + "world!";
module.exports = Result;

requireの呼び出し時に完全なファイル名であるsalute.jsでは無く、 ./saluteを使用しており、スクリプトの拡張子が省略されていることに注意してください。 ./saluteモジュールがworldモジュールと同じディレクトリ内にあることを意味します。

関数の定義であれば次のようになります。

// moduleA.js
module.exports = function( value ){
    return value*2;
}
// moduleB.js
var multiplyBy2 = require('./moduleA');
var result = multiplyBy2( 4 );

 Back to top

© 2010 - 2017 STUDIO KINGDOM