RequireJSで、テキストファイルを依存関係として指定する方法

RequireJSを使うとき、単純な文字列を依存関係として指定したいという要求があると思う。例えば描画するときに使うHTMLのスニペットとか。

そんなときはこうする。

// hoge-html.js
define({
    content: "<div id='hoge' ... >...</div>"
});

require(['hoge-html.js'], function(hoge){
  $('body').append(hoge.content);
});

しかし、たかが文字列を管理するのに、いちいちdefineでラップするのはかっこ良くない。実はもっといい方法がある。

// hoge.html
<div id='hoge' ... >
  ...
</div>

// 'text!'をファイル名の頭に付ける。
require(['text!hoge.html'], function(hoge){
  $('body').append(hoge.content);
});

text.jsプラグインというものがあり、これを使えばテキストファイルをjs化しなくても、RequireJS化で管理できる。

方法は簡単で、

• 下記のレポジトリのtext.jsファイルを、RequireJSが最初に読み込むファイルと同じ階層に置く。
• require/defineで指定する依存関係のファイル名の頭に、 'text!'を付ける。

これで、テキストファイルをjs化+defineでラップしなくて済む。

http://requirejs.org/docs/api.html#text
https://github.com/requirejs/text