Jam :: Require.jsを使う時に便利そうなパッケージマネージャ

JavaScript

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を含むパッケージを１つのファイルにしてくれる。

<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>