ClosureLibraryを超簡単に使えるgoog-starter-kitがSourceMapに対応しました #closure_library

@cocopon 氏が開発した goog-starter-kit を SourceMap に対応させました。モダンな JS で WebApp 作りたいな—、という人や、ClosureLibraryを使ってるけど SourceMap うまくいかんかったなー、という人にオススメ！おわかりの方もいらっしゃると思いますが、FirefoxOS アプリを ClosureLibrary で優雅に開発するための布石なんですよ！

（画像の引用：html5rocks）

goog-starter-kit とは

いまいち知名度が低いけど、すんごく使えるJS開発環境の ClosureLibrary を 超手軽 に利用できるようにするツールです。@cocopon 氏が開発しました。

ClosureLibraryはPureJSでありながら、型チェック・最適化・モジュール機能・高品質かつ巨大なライブラリ群などなどAltJSに負けないポテンシャルをもつJS開発環境です。なお、Googleさんがデフォで使っているだけあって、かなりの高品質な仕上がりとなっています。しかし、ClosureLibraryは「マジで環境構築がむずい・だるい」という欠点があります。goog-starter-kit を使うと、環境構築から運用までを超簡単にしてくれます。

1. goog-starter-kitのzipを展開
2. python tools/setup.py
3. development/下で開発

運用するときは、下の2つのコマンドが使えます。

• デバッグする前にpython tools/update_deps.py
• コンパイルするときはpython tools/compile.py

超簡単です。ﾊｯﾋﾟｰﾊｯﾋﾟｰｲｴｰ!!!

SourceMap とは

ClosureLibrary を使うときは JavaScript 圧縮ツール ClosureCompiler を使って製品コードのリリースをするのが一般的です。ただ、ソースコードは圧縮されるときに結合＆リネームされてしまうので、デバッグのときに大変になってしまいます。これで血涙を流した開発者は少なくありません。特に、高度な圧縮ADVANED_OPTIMAIZATIONなんか使った暁には元のコードがどこにあるかわかったもんじゃないです。

そこで、スクリプトの圧縮前後の対応関係を SourceMap とよばれる形式のファイルに出力することで、圧縮後のスクリプトから圧縮前のスクリプトを参照できるようにします（gfsさんのSourceMapの可視化ツールをみると、SourceMapのはたらきがよくわかります）。

そんな便利な SourceMap を goog-starter-kit に対応させました。本来 ClosureLibrary で SourceMap を扱うには、 それはそれは面倒な手続き が必要なのですが、ぜんぶ自動でやってくれるようになっています。

(~♥~)の泣き言

3つのツールにまたがっているだけあって、この機能追加は大変でした。

1. そういえば、SourceMap がいいって聞いたことあるな—
2. goog-starter-kit に組み込んで簡単に利用できるようにしようかなー
3. cocopon氏にpush権をいただく
4. とりあえず、SourceMapのお勉強
5. goog-starter-kit は python で書かれてるので python のお勉強
6. 愚直に実装
7. なぜか動かない (;♥;)
8. //@ sourceMappingURLという読み込みは古いことを知る
9. 修正
10. なぜか動かない (;♥;)
11. どうやらSourceMapに書かれた圧縮前のスクリプトのパスが間違っているらしい
12. 該当する ClosureCompiler のオプションを調べる
13. ClosureCompiler のみではパスを修正できないことが判明 (;♥;) < Oh, F○CK
14. goog-starter-kit 側で問題を修正
15. 完成

おわりに

いいなー、と思ったら是非使ってみてください。気軽に使えるようにするためのgoog-starter-kitなのですから。