Edited at
TitaniumDay 24

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

More than 3 years have passed since last update.

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.jsjsUriQを入れてみます。


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.jmkpre: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_さんです。宜しくお願いします。