読者です 読者をやめる 読者になる 読者になる

詩と創作・思索のひろば

ドキドキギュンギュンダイアリーです!!!

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

JavaScript

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

最後の 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 で気持ちよくなろう。

TypeScriptリファレンス Ver.1.0対応

TypeScriptリファレンス Ver.1.0対応