Minifyされたファイルの元ファイルを見るのにSourceMapは便利です。
しかしAltJS等からJavaScriptへ変換し、そのJavaScriptファイルをMinifyしたとき、
AltJSで書かれた元ファイルをSourceMapを通して見れるかというのが疑問に思ったので調べました。
上記のようなのは多段SourceMapと呼ばれます。azuさんの記事に詳しく書かれています。
多段SourceMapの対応方法とライブラリ | Web Scratch
で、一番手頃そうな手段として、UglifyJS2があります。
UglifyJS2は多段SourceMapをサポートしているので、
以下のように、 --in-source-mapオプション に第一段階目のSourceMapファイルを指定すると、多段SourceMapが生成されます。
$ coffee -cm hoge.coffee # -mオプションでSourceMapも生成 $ uglifyjs hoge.js -o hoge.min.js --in-source-map hoge.js.map --source-map hoge.min.js.map
これを行ってChromeのデベロッパーツールとかで見ると、
hoge.coffeeファイルが見れてそこにブレイクポイントが貼れたりします。
ただやってみて思ったのはあんまり便利ではないですね。。
というのも実際JSが予期せぬ動きしてデバッグするときみたいのは、AltJSから変換されたJavaScriptファイルであることが大半であろうからです。
なのでみんな一段SourceMapで事足りているのでしょうね。
