Playframework2.3 で RequireJS 弄ってみる

まずは初期設定

• build.sbt に CoffeeScriptKeys.bare := false を入れておく。
• libraryDependencies に "org.webjars" % "bootstrap" % "3.0.2" を入れておく(WebJars はデフォルトバンドルになった)*1
• JSHint がデフォルトバンドルになった：JSHint は Java で言う所の FindBugs のようなもの。
• RequireJS が、Play 独自実装ではなくなった（相変わらずデフォルトバンドル）

ここの設定は 2.2 からやり方が変わった。

Require.js 使ってみる

ライブラリ依存解決の為のプロダクトだと言える。

最初に app/assets/javascripts/helper/lib.js を下記の様に書く。

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

因に、セミコロンを省略したり、インデントを tab 入りにしたりすると、JSHint に蹴られる。

いいなこれ。

次に、app/assets/javascripts/main.js を下記の様に定義。

    require.config({
        baseUrl : '/assets/javascripts',
        paths: {
            'thirdParty': 'helper/lib'
        }
    });
    
    require(["thirdParty"],function(l) {
        var s = l.sum(4, 5);
        alert(s);
    });

require.config で依存する js を指定して、require でロードするわけだ。

複数の js をロードする場合、

    require(['helper/dummy', "thirdParty"],function(l, t) {
        var s = l.sum(4, 5);
        alert(s);
        $(document).ready(function(){
            console.debug("Jquery loaded!");
        });
    });

という様に、引数の数を一致させれば良い(dummy.js は lib.js のコピペで用意)。

尚、引数が多くなる場合は、require('依存ライブラリ名') で参照できるっぽい。

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

最後に、HTML上で

    <script data-main="@routes.Assets.at("javascripts/main.js")" type="text/javascript" src="@routes.Assets.at("lib/requirejs/require.js")"></script>

In coffee please.

OK, Coffee で書き直そう。

    define () ->
      sum: (a, b) -> a + b

    require.config
      baseUrl : '/assets/javascripts'
      paths: { 'thirdParty': ['helper/lib'] }

    require [ "thirdParty" ], (l) ->
      alert(l.sum 4, 5)

やっぱ JavaScript 書きたくなくなるわ…。

*1:今回使わないけど、メモだけしておく