之前發現VS.NET會為壓縮的js文添加一個與文件名同名的.map文件，一直沒有搞懂他是用來做什么的，直接刪除掉運行時瀏覽器又會報錯，后來google了一直才真正搞懂了這個小小的map文件背后的巨大意義。
從源碼轉換講起
JavaScript腳本正變得越來越復雜。大部分源碼（尤其是各種函數庫和框架）都要經過轉換，才能投入生產環境。
常見的源碼轉換，主要是以下三種情況：
- 壓縮，減小體積。
- 多個文件合並，減少HTTP請求數。
- 其他語言編譯成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 英文長文。