gulp, TypeScript, Browserify で Chrome 拡張を書く

先日紹介した chrome-Flavoured-Favicon ですが、以下のような技術によって支えられています。

gulp
- ビルドツール。
TypeScript
- 型つき JS。
Browserify
- JS の依存関係の解決。
AngularJS
- HTML と JS を綺麗に結合させる。

最後の AngularJS は TypeScript との相性を試してみたかっただけのおまけです。結果は最高に気持ちよくなれました。

ディレクトリ構成

app/
- 最終的に配布する拡張本体です。ほとんどのファイルはバージョン管理されておらず、gulp によって生成されます。
src/
- TypeScript のソースなどが置いてあります。基本的にこの中だけを弄る。
DefinitelyTyped/
- DefinitelyTyped（TypeScript の型定義ファイル）。Git の submodule で管理。

その他必要なライブラリは npm（package.json）と bower（bower.json）で管理します。

コードの生成

gulpfile で、以下のタスクを定義してます。

`gulp typescript`

src/ 以下の TypeScript のソースを JavaScript にコンパイルして、src/js/ に出力します。

gulp-typescript というプラグインもあったけれど、gulp-tsc のほうがなんか便利だった。{ emitError: false } としておくと、watch 時にコンパイルエラーが生じても watch が止まらない。

`gulp browserify`

src/js/ 以下の JS の require() を解決して、依存しているライブラリと結合させた最終的な JS を app/ に書き出します。

gulp-browserify ってプラグインがあるけど、これは gulp プラグインのブラックリストに入っていて、browserify を直接使うのが推奨されている（プラグインもちゃんとメンテされてるんだなー）。browserify の API が返すストリームだと続く処理を与えられないので、vinyl-source-stream で明示的にソースファイルを与えています（L27）。また、複数のストリームをひとつのタスクにまとめるのに、event-stream を利用します（L22）。

`gulp copy`

依存しているライブラリを app/ にコピーします。

バージョニング

バージョン番号の多重管理を避けるため、拡張のバージョン番号も Git のタグを使って gulp で生成しています。

以下のようにして git-describe を使うと、タグをもとに現在のワークツリーの状態に名前をつけることができます。

% git describe --tags --dirty --always
0.0.2-6-g3466baf-dirty

この場合

"0.0.2" が直近のタグを、
"6" が現在の HEAD がタグ "0.0.2" から 6 コミット離れていて、
"g3466baf" が HEAD は 3466baf というコミットであること、
"dirty" がワークツリーに未コミットの変更があること

を示してます。ちょうどタグ上にいる場合は "0.1" とかシンプルな名前になる。Chrome の拡張のバージョン番号は 4 つまでの数字をドットでつないだものなので、最初の 3 つまでを Git のタグで、最後の 1 つをそのタグからのコミット数にしてみてます。この場合 "0.0.2.6" になる。

`gulp manifest`

src/manifest.json に上のルールで決めたバージョン番号を埋めて、app/manifest.json に書き出します。gulp-json-editor というので JSON を編集することができて、まさにこういう用途にうってつけです。こんなのがあると思ってなかったので便利だった。

`gulp zip`

Chrome Web Store にアップロードする zip ファイルを作る。app/ 以下を zip にするだけです。

TypeScript を書く

TypeScript を使う利点はもちろん型がついていることですが、それに加え、型定義ファイルを利用して Chrome の API や AngularJS の補完ができるのも便利。そんなに調べてないけれど Vim からは clausreinke/typescript-tools というのが便利だった。ほとんど JS と変わりないので、書いたり読んだりすることが辛いということもないでしょう。