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

UglifyJS2で多段SourceMapを生成する

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で事足りているのでしょうね。