二分之一

JS发布后通常会经过压缩和混淆，所有代码被压缩成一行代码，如果发生错误，无法定位错误，SourceMap因此而生。

说起SourceMap，不得不说说uglifyjs，uglifyjs是nodejs下一款优秀的JS压缩优化工具，支持SourceMap的生成。

一、uglifyjs的使用及SourceMap文件的生成方法

1、安装nodejs:http://nodejs.org,windows下直接安装即可，安装好后自带npm.
2、打开CMD，输入node -v查看，nodejs是否安装成功，如果成功会返回一个版本号。
3、安装uglifyjs：执行命令：npm install uglify-js -g
4、uglifyjs使用方法及API：https://github.com/mishoo/UglifyJS2
5、压缩JS并生成SourceMap文件

uglifyjs underscore.js --source-map underscore.js.map
--source-map-root ./ -m -c -o underscore-mini.js

会生成两个文件：

• underscore-mini.js（压缩文件）
• underscore.js.map（SourceMap文件）

二、用 SourceMap 调试

有了SourceMap文件，放置underscore-mini.js同一目录，引用underscore-mini.js时，就可以调试，看到未压缩的代码

调试方法： 打开chrome – F12（打开调试工具）- 调试工具右下角有一个设置，打开设置 – General – Enable source maps

这样就打开了SourceMap调试功能。

在Sources面板下，左侧展开，就能看到SourceMap解出来的未压缩文件，多个压缩文件都可以看到。

三、SourceMap的原理解析

单说，Source map就是一个信息文件，里面储存着位置信息。也就是说，转换后的代码的每一个位置，所对应的转换前的位置。有了它，出错的时候，除错工具将直接显示原始代码，而不是转换后的代码。这无疑给开发者带来了很大方便。

1、SourceMap基本结构如下：

/assets/upload/20130723160149.png

• version：Source map的版本，目前为3。
• file：转换后的文件名。
• sourceRoot：转换前的文件所在的目录。如果与转换前的文件在同一目录，该项为空。
• sources：转换前的文件。该项是一个数组，表示可能存在多个文件合并。
• names：转换前的所有变量名和属性名。
• mappings：记录位置信息的字符串，下文详细介绍。

2、重点在于mappings的解码

第一层是行对应，以分号（;）表示，每个分号对应一行代码；
第二层是位置对应，以逗号（,）表示，每个逗号对应转换后源码的一个位置。
第三层是位置转换，以VLQ编码表示，代表该位置对应的转换前的源码位置。

VLQ编码相关，请查询更多资料~~

最后修改时间：2014年9月10日星期三晚上8点31