Jam :: Require.jsを使う時に便利そうなパッケージマネージャ
Jam
クライアントサイドJSのパッケージマネージャ
インストール
npmから
% sudo npm install -g jamjs ... % jam -v 0.1.11
パッケージをインストールしてみる
ダウンロードされるパッケージはカレントディレクトリに"jam"というディレクトリを作って配置されるので、プロジェクトのルートディレクトリを作る。
% mkdir jam-sandbox % cd jam-sandbox/
% jam install jquery installing from repositories jquery Building version tree... repositories checking "jquery" installing jquery@1.7.2 (cached) updating jam/jam.json updating jam/require.config.js updating jam/require.js OK % tree ./ ./ └── jam ├── jam.json ├── jquery │   ├── jquery.js │   └── package.json ├── require.config.js └── require.js 2 directories, 5 files
一度に複数のライブラリをインストールしたい場合には
% jam install jquery underscore
みたいにする。
パッケージの検索は
% jam search domready domReady 2.0.0-jam.1 An AMD loader plugin for detecting DOM ready OK: 1 total results (limit: 10) % jam install domReady
インストールしたパッケージを使う。
require.jsを同時に用意してくれるので、require()でロードする
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>::Jam Sandbox::</title> <script src="jam/require.js"></script> <script> require(['domReady', 'jquery'], function(domReady, $) { domReady(function() { $('#out').text('Hello, world'); }); }); </script> </head> <body> <div id="out"></div> </body> </html>
Jamで用意されたrequire.jsにはパッケージ情報が追加されているので、オリジナルのrequire.jsを使いたい場合には、別に"require.config.js"もロードする必要あり。
使わなくなったパッケージはドキュメントでは"jam remove {PACKAGE}" -> "jam clean"の手順で書いてあるが、"jam remove {PACKAGE}"のみで行けた。
% jam remove jquery removing jquery Building local version tree... updating jam/jam.json updating jam/require.config.js updating jam/require.js OK
// jam/jam.json { "jam_version": "0.1.11", "dependencies": { "domReady": null } }
コンパイルする
% jam compile vendor.js compiling vendor.js include domReady, jquery OK: vendor.js % ls index.html jam vendor.js
require.jsを含むパッケージを1つのファイルにしてくれる。
<script src="vendor.js"></script>
または、jam/require.jsをコンパイルすると、jam/require.jsに使うパッケージを含むようにコンパイルしてくれるので、HTMLを書き換える必要が無くなる。
% jam compile jam/require.js compiling jam/require.js include domReady, jquery OK: jam/require.js
ただ、この後、"jam install hoge"すると、jam/require.jsは元に戻ってしまうので、別にビルド用のスクリプトを作るかする必要あり。
インストールしたパッケージのうち、特定のものだけコンパイルしたい場合には"-i"オプションを付ける。
% jam install jquery underscore backbone couchr . . OK % jam compile -i jquery -i underscore -o vendor.js compiling vendor.js include jquery, underscore OK: vendor.js
サンプルアプリ
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>::Jam Sandbox::</title> <script src="jam/require.js"></script> <script> require(['js/app'], function(app) { app.initialize(); }); </script> </head> <body> <div id="out"></div> </body> </html>
js/app.js
define('js/app', [ 'jquery', 'js/utils' ], function( $, utils ) { var initialize = function() { utils.greeting(); console.log('app ready'); }; return { initialize: initialize }; });
js/utils.js
define('js/utils', [], function() { var greeting = function() { console.log('initialize utility module.'); }; return { greeting: greeting } });
パッケージをダウンロード
% jam install jquery installing from repositories jquery Building version tree... repositories checking "jquery" installing jquery@1.7.2 (cached) updating jam/jam.json updating jam/require.config.js updating jam/require.js OK
モジュールで依存するパッケージと定義しておくと、コンパイル時に解決してくれるので、
% jam compile -i js/app -o allinone.js
とすれば、js/app.jsが必要としているjqueryとjs/utilsをallinone.jsに含めてくれる
<script src="allinone.js"></script>