【javascript】source map

    最近在学webpack，遇到一个从未见过的名词source map。便跑去百度了一番，对其有了一些了解。好记性不如烂笔头，在此记录一下，方便之后查询。

一：source map长啥样？

以前下载Jquery的时候发现有一个文件，叫作Jquery.min.map文件。这就是一个source map 文件。打开后他是这样的：

二：source map有啥做用？

source map是一个独立的文件，与源码在同一个目录下。它有一个颇有用的功能，下面就来聊聊这个功能。

一、从源码转换提及

JavaScript脚本正变得愈来愈复杂。大部分源码（尤为是各类函数库和框架）都要通过转换，才能投入生产环境。

常见的源码转换，主要是如下二种状况：

（1）压缩，减少体积。好比jQuery 1.9的源码，压缩前是252KB，压缩后是32KB。

（2）多个文件合并，减小HTTP请求数。

拿Jquery.js举例，它压缩后是长这个样子的：

系统正常运行的时候到不以为有啥问题，但在出错须要debug的时候就会发现困难重重。

当js解析器告诉你错误在第几行第几列的时候，这些信息对你没有任何用处。仍是拿Jquery举例。

jQuery 1.9压缩后只有3行，每行3万个字符，全部内部变量都改了名字。你看着报错信息，感到毫无头绪，根本不知道它所对应的原始位置。固然若是你是超级大牛，非要对着压缩后的js文件进行查错，我只想问一句：给抱大腿不？以上说的种种，就是source map 想要解决的问题。

二、source map 如何解决咱们的问题

简单说，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每个位置，所对应的转换前的位置。

有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。

3、浏览器设置 source map功能

在Developer Tools的Setting设置中，确认选中"Enable source maps"。

4、如何启用 source map

只须要在压缩后的js文件末尾添加该行代码便可。

//@ sourceMappingURL=/path/to/file.js.map

如：在 jquery.min.js  文件中添加此行 //@ sourceMappingURL=jquery.min.map

5、如何生成Source map

最经常使用的方法是使用Google的Closure编译器。

生成命令的格式以下：

java -jar compiler.jar \ 
　　--js script.js \
　　--create_source_map ./script-min.js.map \
　　--source_map_format=V3 \
　　--js_output_file script-min.js

各个参数的意义以下：

- js： 转换前的代码文件
- create_source_map： 生成的source map文件
- source_map_format：source map的版本，目前一概采用V3。
- js_output_file： 转换后的代码文件。

6、结束

记到这里，差很少该结束了。至于source map 是如何让压缩后的文件与源码进行一一对应的，我的认为就不必深究下去了。固然感兴趣的同窗能够经过百度进一步了解一番。