RequireJSには、JSファイル以外の依存関係を扱うためにloader pluginという仕組みが用意されています。loader pluginの一覧はこちらにあります。自作も可能で、その方法はこちらに詳しく書かれています。
今回は、既存のpluginを用いてその使い方を紹介します。
前回作成したプロジェクトを引き続き利用します。
text plugin
まずは、text pluginを使ってpluginの置き場所などを説明します。これは、指定したファイルを読み込んで文字列として使用するためのpluginです。
こちらからtext.jsをダウンロードしてbaseUrlの下に置きます。それ以外の場所に置く場合は、pathsでその場所を指定します。ここでは、baseUrlはjsで、js/lib/requirejsの下に置きましたので、main.jsにtext.jsのパスを追加します。
main.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
requirejs.config({ baseUrl: "js", urlArgs: "bust=" + (new Date()).getTime(), paths: { "jquery": "lib/jquery/jquery", "text": "lib/requirejs/text" }, shim: { "app/alpha": { deps: ['jquery'] }, "app/beta": { deps: ['jquery'] } } }); require(["jquery", "app/alpha", "app/beta"], function($) { $(function() { $('body').alpha().beta(); }); }); |
js/app/gamma.txtというファイルを作ります。
gamma.txt
|
1 |
<p>Gamma is Go!</p> |
ディレクト構成は以下の通りで、前回から追加したのはgamma.txtのみです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
% tree -L 3 ./ ./ ├── build.js ├── css ├── index.html └── js ├── app │ ├── alpha.js │ ├── beta.js │ └── gamma.txt ├── lib │ ├── jquery │ └── requirejs └── main.js 6 directories, 5 files |
これでtext pluginを使う準備ができました。
main.jsを以下のように変更します。
main.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
requirejs.config({ baseUrl: "js", urlArgs: "bust=" + (new Date()).getTime(), paths: { "jquery": "lib/jquery/jquery", "text": "lib/requirejs/text" }, shim: { "app/alpha": { deps: ['jquery'] }, "app/beta": { deps: ['jquery'] } } }); require(["jquery", "app/alpha", "app/beta", "text!app/gamma.txt"], function($, a, b, s) { $(function() { $('body').alpha().beta(); $('body').append(s); }); }); |
bodyの中にgamma.txtの内容がappendされることが確認できればOKです。
i18n plugin
国際化対応のpluginです。
js/appの下につぎのようにファイルを作ります。追加したのは、lamps.jsとnls以下です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
tree -L 3 ./ ./ ├── alpha.js ├── beta.js ├── gamma.txt ├── lamps.js └── nls ├── fr-fr │ └── po.js ├── ja-jp │ └── po.js └── po.js 3 directories, 7 files |
nlsの下は翻訳用のファイルで、nlsの下にfr-fr、ja-jpなどlocaleごとにディレクトリを作ってその下にそれぞれpo.jsを置きます。置き換え前の文字列と置き換え後の文字列をbefore:afterの形で書き下します。指定したlocale用のpo.jsがない場合は、nls直下（root）のpo.jsが使われます。注意する点は、rootのpo.jsに使用可能なlocaleを記述することです。
nls/po.js
|
1 2 3 4 5 6 7 8 9 |
define({ "root": { "alpha": "alpha", "beta": "beta" }, "fr-fr" : true, "ja-jp" : true }); |
nls/ja-jp/po.js
|
1 2 3 4 |
define({ "alpha": "アルファ", "beta": "ベータ" }); |
lamps.jsはpo.jsを呼び出して使用する関数定義です。
jp/lamps.js
|
1 2 3 4 5 |
define(["i18n!app/nls/po"], function(po){ return { msg: "The name for alpha in this location is: " + po.alpha }; }); |
main.jsを以下の以下のように編集すれば、ja-jp配下のpo.jsが使われ、「The name for alpha in this location is: アルファ」と表示されればOKです。
main.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
requirejs.config({ baseUrl: "js", urlArgs: "bust=" + (new Date()).getTime(), paths: { "jquery": "lib/jquery/jquery", "text": "lib/requirejs/text", "i18n": "lib/requirejs/i18n" }, shim: { "app/alpha": { deps: ['jquery'] }, "app/beta": { deps: ['jquery'] }, "app/lamps": { } }, config: { i18n: { locale: "ja-jp" } } }); // require(["jquery", "app/alpha", "app/beta", "text!app/gamma.txt"], function($, a, b, s) { // $(function() { // $('body').alpha().beta(); // $('body').append(s); // }); // }); require(["jquery", 'app/lamps'], function($, l){ $("body").append(l.msg); }); |
step plugin
連鎖する依存関係を記述するためのpluginです。
以下の3つのJSファイルをロードすることを考えてみます。
threeはtwoに、twoはoneに依存していますから、one→two→threeの順番にロードする必要があります。step pluginを使えばこの連鎖を簡単に表現できます。
app/one.js
|
1 |
var one = { msg: "one" }; |
app/two.js
|
1 |
var two = { msg: one.msg + "two" }; |
app/three.js
|
1 |
var three = { msg: two.msg + "three" }; |
main.jsを以下のように編集して、「onetwothree」と表示されればOKです。
main.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
requirejs.config({ baseUrl: "js", urlArgs: "bust=" + (new Date()).getTime(), paths: { "jquery": "lib/jquery/jquery", "text": "lib/requirejs/text", "step": "lib/requirejs/step", "i18n": "lib/requirejs/i18n" }, shim: { "app/alpha": { deps: ['jquery'] }, "app/beta": { deps: ['jquery'] }, "app/lamps": { } }, config: { i18n: { locale: "ja-jp" }, step: { steps: [ ["app/one"], ["app/two"], ["app/three"] ] } } }); // require(["jquery", "app/alpha", "app/beta", "text!app/gamma.txt"], function($, a, b, s) { // $(function() { // $('body').alpha().beta(); // $('body').append(s); // }); // }); // require(["jquery", 'app/lamps'], function($, l){ // $("body").append(l.msg); // }); require(['jquery', 'step!app/three'], function($){ $("body").append(three.msg); }); |
ここで呼び出せるのはstepsで指定した最後のコンポーネントのみで、つぎのような呼出はできないことに注意！
|
1 2 3 |
require(['jquery', 'step!app/two'], function($){ $("body").append(two.msg); }); |
以下のように怒られます。
|
1 |
Uncaught Error: No step config for ID: app/two |
