javascript source map 的使用

以前發現VS.NET會爲壓縮的js文添加一個與文件名同名的.map文件，一直沒有搞懂他是用來作什麼的，直接刪除掉運行時瀏覽器又會報錯，後來google了一直才真正搞懂了這個小小的map文件背後的巨大意義。

從源碼轉換講起

JavaScript腳本正變得愈來愈複雜。大部分源碼（尤爲是各類函數庫和框架）都要通過轉換，才能投入生產環境。
常見的源碼轉換，主要是如下三種狀況：

1. 壓縮，減少體積。
2. 多個文件合併，減小HTTP請求數。
3. 其餘語言編譯成JavaScript。最多見的例子就是CoffeeScript。
   這三種狀況，都使得實際運行的代碼不一樣於開發代碼，除錯（debug）變得困難重重。

一般，JavaScript的解釋器會告訴你，第幾行第幾列代碼出錯。可是，這對於轉換後的代碼毫無用處。你看着報錯信息，感到毫無頭緒，根本不知道它所對應的原始位。
這就是Source map想要解決的問題。

什麼是Source map

簡單說，Source map就是一個信息文件，裏面儲存着位置信息。也就是說，轉換後的代碼的每個位置，所對應的轉換前的位置。
有了它，出錯的時候，除錯工具將直接顯示原始代碼，而不是轉換後的代碼。這無疑給開發者帶來了很大方便。

目前，暫時只有Chrome瀏覽器支持這個功能。在Developer Tools的Setting設置中，確認選中"Enable JavaScript source maps"。

如何啓用Source map

只要在轉換後的代碼尾部，加上一行就能夠了。
　　
　　//@ sourceMappingURL=/path/to/file.js.map
　　
map文件能夠放在網絡上，也能夠放在本地文件系統。

如何生成Source map

Source map 能夠經過javascript 壓縮工具在壓縮以後直接生成就好了。在VS.NET中是默認生成的，要使source map有效的惟的條件就是不能將壓縮前的js原文件刪除，不然瀏覽器一樣會報出找不到源碼錯誤。

若是咱們是在純javascript 的開發環境如 chrome apps / nodejs 下比較推薦使用 grunt 的 uglify 任務插件在完成壓縮的同時直接生成source map 而且將source map的引用加入到加壓後的js文件中。此功能在 uglify 0.6.0 後獲得好很好的支持，在Gruntfile中的具體設置以下：

grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
        uglify: {
            build: {
                options: {
                    sourceMap: true,
                    sourceMapIncludeSources: true,
                    sourceMapName: 'js/runtime.min.js.map'
                },
                files: {
                    'js/runtime.min.js': [
                        'app/services.js',
                        'app/directives.js',
                        'app/controllers.js'
                    ]
                }
            }

        }
    });

只須要加入 sourceMap, sourceMapIncludeSources 和 sourceMapName 就能夠很好地控制source map的生成了。

結語

我比較重視實用性，至於source map的文件格式也是一篇極長的理論，我想通常程序不會擺着工具不用閒得蛋疼去本身寫source map的。若是想了解關於source map的構成和source map中的VLQ編碼能夠參考HTML5 Rocks 上的這篇 Introduction to JavaScript Source Maps 英文長文。