魚與熊掌我都要：使用UglifyJS + Source Map產生輕巧又容易除錯的JS檔

前文提到如何在CoffeeScript中使用Source Map以方便除錯。但在production code的時候(client端)通常會使用如UglifyJS, Closure等工具來優化精簡我們的js檔來提升網頁執行速度。增加了一個步驟，這樣子還能使用Source Map強大的功能嗎？答案當然是可以的。

幸運的是UglifyJS（以及Closure）也支援Source Map，也就是說就是在做優化(minify, compress)的同時，也會重新mapping。以下就是產生minified code的步驟：

1. 編譯coffee檔，生成raw js&map
2. uglify raw js/map，產生minified js/map

其實也就是前文的步驟再多加一個uglify而已，只是這裡在uglify的時候需要告訴uglify: raw js/map的資訊，如果沒有raw map的資訊的話，最後的map檔不會直接對應到原始的coffee檔而是中間產生的js。

產生Minified js & map

步驟一就參考一下前文吧。這裡來說一下如何產生minified js/map：

uglifyjs -o {#output_file_name} --source-map {#output_map} --in-source-map {#input_map} 
         --source-map-root {#root_url} -p {#prefix_drop_level}

很簡單，只需要一行指令即可。需要注意的地方是由於coffee原始檔可能會放在不同的url，所以我們可以透過--source-map-root去設定原始檔的root url，而-p是告訴uglifyjs，要消去input path幾層。舉例來說：

uglifyjs /home/doe/work/foo/src/coffeescript/file1.coffee \
         /home/doe/work/foo/src/coffeescript/file2.coffee \
         -o foo.min.js \
         --source-map foo.min.js.map \
         --source-map-root http://foo.com/src \
         -p 5 -c -m

經過-p 5之後兩個檔案都被削去前面五層變成coffeescript/file1.coffee, coffeescript/file2.coffee，然後加上root url之後，source url就變成
http://foo.com/src/coffeescript/file1.coffee以及
http://foo.com/src/coffeescript/file2.coffee。

之後只要確定該URL可以正確的取得coffee檔，就可以輕鬆地從瀏覽器端直接除錯coffee檔了。

附註

• UglifyJS安裝方式：

  $npm install -g uglify-js

• 如果您執行uglify指令時沒有產生出map檔，記得更新一下uglifyjs，Source Map的支援也是最近才加入的
• 雖然uglifyJS有合併多個js至一個js檔案中的功能，但--in-source-map目前並沒有支援多個input source map，如果真的需要的話可以先使用mapcat把js檔案合併成一個，再用uglifyjs整理。Track Issue