魚與熊掌我都要:使用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

沒有留言:

張貼留言