target

解决通常用于性能优化将代码压缩后定位问题困难，在客户端代码不影响性能的前提下使源代码更加的具有可读性和更易调试，为此应运而生。

what

储存位置信息的json文件。就是这么简单，删繁就简三秋树。

1
2
3
4
5
6
7

{
    "version":3,   // soucemap 版本
    "file":"vue.js", // 转换后的文件名
    "sourceRoot" : "", //转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。
    "sources":["../src/shared/util.js", ... ], // 转换前的文件。
    "sourcesContent": ...//记录位置信息的字符串
}

support

主流浏览器都默认支持。例如chrome中的devtools可对于sourcemap进行设置。

how to work

只要解析引擎支持，Closure compiler将生成sourcemap， 合并和压缩都会生成的sourcemap文件。除非你关闭了你浏览器的devtools中的enable sourcemap。你的工作就是在处理后的代码加一行代码

1

//# sourceMappingURL=vue.js.map

读取到对应位置的sourcemap文件，然后解析储存位置信息的该文件。读取到转换后的代码的每一个位置，所对应的转换前的位置。解析原理可看链接。

how to use

• webpack
• rollup
• uglyfyjs
• Closure编译器
• …

生成sourcemap后，打开浏览器就可以欢快的调试源码了。