Titaniumの外部jsライブラリをBowerで管理

Titanium Advent Calendar 2014の24日目。
Dtector Inc.の@Fe_snowです。普段メモ代わりくらいにしか投稿していませんでしたが、小ネタを書かせていただきます。

クリスマスには欠かせないTitaniumでの外部jsライブラリの管理について書こうと思います。

先ず、Titaniumで外部のjsライブラリを使いたいと思った場合、どこかにlibディレクトリなんかを作って、そこにlib/hoge.jsの様に落としてきた外部jsファイルを置いて、requireするのが一般的かと思います。

しかし、これだと外部のjsライブラリを自分のプロジェクト内で管理することになり、少し気持ち悪いです。

そこで、Bowerに外部jsライブラリの管理を任せることにします(Bower自体はnpmで入れてください)。
通常のBowerと同じ要領でプロジェクトルートにbower.jsonファイルを用意してbower install -gをします。
例えばこんな感じで、とりあえず便利なstring.js、jsUri、Qを入れてみます。

bower.json

{
  "name": "some_app",
  "version": "0.0.1",
  "ignore": [
    "**/.*",
    "node_modules",
    "components"
  ],
  "dependencies": {
    "string.js": "git://github.com/jprichardson/string.js.git#3.0.0",
    "jsUri": "git://github.com/derek-watson/jsUri.git#v1.3.0",
    "q": "git://github.com/kriskowal/q.git#v1.1.2"
  }
}

次に、なんでもいいですが、bower_includesという名前でファイルを定義して、jsファイルの場所を記述します。

string.js/lib/string.min.js
jsUri/Uri.js
q/q.js

そしてalloy.jmkのpre:compileイベント内に下記の様なコードを追加します。

alloy.jmk

task("pre:compile", function(event, logger) {
  var wrench = require("wrench"),
      fs = require("fs"),
      path = require("path");

  var componentsDir = event.dir.project + "/bower/",
      distDir = event.dir.resources + "/bower/",
      includesPath = event.dir.project + "/bower_includes";
  wrench.mkdirSyncRecursive(distDir, 0755);

  if (path.existsSync(includesPath)) {
    fs.readFileSync(includesPath).toString().split("\n").forEach(function(target){
      if (fs.statSync(componentsDir + target).isFile()) {
        fs.writeFileSync(distDir + path.basename(target), fs.readFileSync(componentsDir + target));
      }
    });
  }
}

こうすることで、ビルドした際にResources以下にもjsファイルが展開され、requireで外部jsライブラリが使用することができます。
具体的にはQ = require('bower/q')のように一行書くだけで利用できます。

このようにTitaniumでもBowerを利用して、スマートに外部jsライブラリを管理してみてはいかがでしょうか。

明日のTitanium Advent Calendar 2014最終日はyagi_さんです。宜しくお願いします。