r.jsの使い方 #JavaScript

require.jsの依存ツリーを解決してひとつのファイルにまとめてくれるやつ。一回ビルドタスク用意したらもう直接触らないせいで、使い方を忘れてしまったから調べてメモ。

インストール

npm i -g requirejs

パッケージ名はrequirejsだけど、インストールされるのはr.jsです。

$ r.js -v
r.js: 2.1.11, RequireJS: 2.1.11, UglifyJS2: 2.4.12, UglifyJS: 1.3.4

node_package/requirejs/binにr.jsがあります。ビルドスクリプトを用意するなら-gなしでも良いし、Gruntなら別途grunt-contrib-requirejsがあります。

コマンドライン

--helpはないのでドキュメントを読むしかなさそう。

RequireJS Optimizer

ファイル構成は例えばこんな感じ。

./
- src/
  - main.js
  - models
    - Task.js

main.js

define([
  'models/Task'
], function(Task) {
  // …
});

これでコンパイル？するときは、こう。

$ r.js -o baseUrl=src name=main out=all.js

Tracing dependencies for: main
Uglifying file: /xxx/all.js

/xxx/all.js
----------------
/xxx/src/model/Task.js
/xxx/src/main.js

変わった文法だけど、-oの後に"="で繋げた設定の組み合わせを記述する。

baseUrl … JSファイルのディレクトリー。
name … 起点となるJSファイルの名前。拡張子なし。baseUrlからの相対なパスの、拡張子".js"を取ったもの。
out … 出力ファイル名。実行時ディレクトリーからのパス。（baseUrlと関係ない。）
などなど

pathsなんかも設定できる。面倒だけどね。そういうときは次項の設定ファイルを使うと便利です。

設定ファイル

ファイル出力って何度も繰り返し行うのが普通なので、そんな何度もコマンドラインの記述をするのは普通しない。バッチファイルなりシェルスクリプトなりを用意するよね。

r.jsの場合は設定ファイルを用意する事ができます。

r-conf.js

({
  baseUrl: 'src',
  name: 'main',
  out: 'all.js'
})

$ r.js -o r-conf.js 

Tracing dependencies for: main
Uglifying file: /xxx/all.js

/xxx/all.js
----------------
/xxx/src/model/Task.js
/xxx/src/main.js

-oに設定ファイル名を与えてやると、その通りに動く。これで何度でも同じ設定で出力できるようになったし、バージョン管理もできるようになりました。

おまけ：設定ファイルの書式

JSONではなくJSファイルなので単純な処理は行えるけども、戻り値を返すとかじゃないので、単純なオブジェクトリテラルの形にする必要があります。

具体的に言うと、ファイルの内容はこんなふうに処理されてました。

r.js(26698行目)

buildFileConfig = eval("(" + buildFileContents + ")");