いま話題のアレです、アレ。
いま携わってるプロジェクトの開発環境が特殊で、どうにもこうにも困ってたことがあって。
そこでこのSource Mapsが使えるんじゃなかろうか？と思った次第です！
Source Mapsの仕組み
ソースコードをMini/Unifyする時に、どのファイルとどのファイルをくっつけたかが後から追えるように、マップファイルを一緒に用意するというもの。
それだけでデバッグする時に、どこのファイルのどの行かまで追えるようになる、と。
今まではMini/Unifyされたファイルでデバッグなんてありえないと思ってたけど、この仕組を使えばそれも可能になりますね。
なんとJavaScriptだけじゃなくて、Sass/LessとかCoffeeScriptとかもOKらしい。
使い方
Mini/Unifyする
Closure compilerを実行するコマンドラインのオプションで指定するだけで良いらしい。
java -jar compiler.jar \
--js myScript.js \
--js myScript2.js \
--create_source_map ./maps/myScripts-min.js.map \
--source_map_format=V3 \
--js_output_file ./all/myScripts-min.js今はまだClosure compilerしか対応してないようです。
Source Maps対応にする
// myScripts-min.js …… …… //@ sourceMappingURL=../maps/myScripts-min.js.map
というように、マップへのパスを記載するか
X-SourceMap: ../maps/myScripts-min.js.map
というヘッダをコンテンツ配信時に付加する必要がある、と。
ブラウザで見る
Chromeの場合はChromeDevToolsのオプションから、
[General] -> [Sources] -> [Enable source maps] にチェック
そしてページをリロードすると、あら不思議。
もちろんこのオプションをOffにしてる時は、マップファイルを取得しません。
実用的か
Twitterとか見てると割と好評ぽいですね。
開発環境でもMini/Unifyしたファイルを配信できる
本番環境と同じものを扱えるというのはメリットだと思います。
テンプレートの記述とかであっても、意識すべき部分が少しでも減るのは作業負荷軽減になりますもの。
CoffeeScriptとかSassとかそういう系
こういうプリコンパイル系のものをよりネイティブぽく扱えるようになるのは、便利になったと捉えて良いのかしら？
プロジェクトで生モノは使用しない！っていう人たちにとってはすごく便利そう。
個人的には
プロジェクトの規模やったり使ってるFw含め、環境によるところが多い気がする。
生のJsとかCssがメインな環境の場合、ちょっとファイルを修正したら即Mini/Unifyするのかというと、手動では絶対しないと思うのよね。
ファイル保存しただけでコンパイル→Mini/Unifyするサーバーサイドの仕組みとかもあるところにはあるらしいので、そういうトコで使いたいかなー。
調べてみて、そんなに自分を助けてくれなさそうな事実に気付いて驚愕している！
参考リンクたち
詳細なものとか
本家のドキュメント！
全体像を知るならコレ。
にしてもこの記事書かれたの2012年の3月21日なんよね。