§RequireJS

RequireJS のウェブサイトによると、

RequireJS は、JavaScript ファイルであり、モジュールローダーです。ブラウザでの使用に最適化されていますが、 Rhino と Node のような、他の JavaScript 環境で使用することもできます。 RequireJS のようなモジュラースクリプトローダーを使用することで、コードの速度と品質が向上します。

このことは、モジュール化された大きな JavaScript のコードベースに対して RequireJS を使うことができることを意味します。 RequireJS は Asynchronous Module Definition （同様のアイデアは CommonJS に含まれています。）と呼ばれる準標準 API を実装することによって、実現されています。 AMD を使用することで、通常は複数のファイルに分割された javascript モジュールの、クライアントサイドにおける依存性解決とロードを可能にし、サーバーサイドでの最適化を許容すると同時に、 クライアントサイド での依存性解決も可能にし、_最適化_ 、つまり本番環境に向けて依存性は最小化され、合成されます。したがって、 RequireJs は、クライアントサイドとサーバサイドの依存解決の両方をサポートします。

RequireJs サポートはデフォルトで有効になっていますので、ユーザーは public/javascripts に javascript モジュールをドロップし、好きな RequireJS のブートストラップ技術を使ってモジュールを起動すればいいのです。

§実装について知るべきこと

• require.js は Play にバンドルされていますので、ユーザーが手動で追加する必要はありません。
• dev モードにおけるクライアント側での依存解決では、 closure compiler は commonJS をサポートしていますが、あえてそれをオフにした状態で、サニティチェック用に全スクリプトに実行されるだけなので、どのファイルも変更しません。
• ビルドスクリプト内での requireJs の設定キーは、オプティマイザを介して実行したいモジュールのリストが含まれていなければなりません。（モジュールは、app/assets/javascripts　からの相対パスでなければなりません）
• 空の requireJs キーは、最適化が行われないことを示します。
• stage , dist と start コマンドは設定された app/assets/javascripts 内のモジュールに RequireJS の最適化 を実行するために変更されました。 最小化し、合成されたアセットは app/assets/javascripts-min に格納されます。
• requireJsShim を使ってオプティマイザにビルドオプションファイルを渡します (例えば、モジュールへのパスを定義している場合など)
• 新しいテンプレートタグ　@requireJs を使うことで、 dev モードと prod モードをシームレスに切り替えて使用することができます。
• デフォルトでは、rhino ベースのオプティマイザが使用され、 requireNativePath を設定することで、ネイティブ、つまりnode版のオプティマイザを利用してパフォーマンスを稼ぐことができます。
• 今は JavaScript でのみこの機能は有効になっていますが、CSS でも同様の方法を探しています。

§例

app/assets/javascripts/main.js を作る:

require.config({
    paths: {
        'thirdParty': 'path/to/lib'
    }
});


require(["helper/lib","thirdParty"],function(l,t) {
	var s = l.sum(4, 5);
	alert(s);
});

app/assets/javascripts/helper/lib.js を作る:

define(function() {
    return {
         sum: function(a,b) {
    		return a + b;
        }
    }
});

app/views/index.scala.html を作る:

@helper.requireJs(core = routes.Assets.at("javascripts/require.js").url, module = routes.Assets.at("javascripts/main").url)

build.sbt に以下を追加する:

requireJs += "main.js"

requireJsShim += "main.js"

Dev モードでページを再レンダリングしてみましょう: alert に 9 が表示されるでしょう。

§stage, dist または start で実行する

アプリケーションの jar ファイルに (public/javascripts-min/main.js) が含まれていなくてはなりません:

define("helper/lib",[],function(){return{sum:function(e,t){return e+t}}}),require(["helper/lib"],function(e){var t=e.sum(5,4);alert(t)}),define("main",function(){})