先日紹介した 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 と変わりないので、書いたり読んだりすることが辛いということもないでしょう。
まとめ
gulp と TypeScript で気持ちよくなろう。
- 作者: わかめまさひろ,井上章,丸山弘詩
- 出版社/メーカー: インプレスジャパン
- 発売日: 2014/05/16
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (2件) を見る
