使用Source Map来还原打包后代码真实的出错位置

部署前端之前，开发者通常会对代码进行打包压缩，这样可以减少代码大小，从而有效提高访问速度。然而，压缩代码的报错信息是很难Debug的，因为它的行号和列号已经失真。这时就需要Source Map来还原真实的出错位置了。

为啥变换代码？

前端代码越来越复杂的情况下，开发者通常会使用webpack、UglifyJS2等工具对代码进行打包变换，这样可以减少代码大小，有效提高访问速度。变换代码的原因如下：

• 压缩，减小体积。比如jQuery 1.9的源码，压缩前是252KB，压缩后是32KB。
• 多个文件合并，减少HTTP请求数。
• 其他语言编译成JavaScript。最常见的例子就是CoffeeScript。

什么是Source Map?

Source Map是一个JSON文件，而它包含了代码转换前后的位置信息。也就是说，给定一个转换之后的压缩代码的位置，就可以通过Source Map获取转换之前的代码位置，反过来也一样。

Source Map各个属性的含义如下:

• version：Source Map的版本号。
• sources：转换前的文件列表。
• names：转换前的所有变量名和属性名。
• mappings：记录位置信息的字符串，经过编码。
• file：(可选)转换后的文件名。
• sourceRoot：(可选)转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。
• sourcesContent:(可选)转换前的文件内容列表，与sources列表依次对应。

Source Map真正神奇之处在于mappings属性，它记录了位置是如何对应的。