1.写个demo测试下map功能
第一步,生成压缩文件和map文件
-
代码结构如下:
-
test_map.js的代码如下
var fs = require('fs'); var uglifyjs = require("uglify-js"); var result = uglifyjs.minify("../js/zepto.js", { outSourceMap: "zepto.min.js", sourceRoot:'../js/' }); fs.writeFile('../js/zepto.min.js', result.code, function(){ console.log('uglify js success!'); }); fs.writeFile('../js-map/zepto.js.map', result.map, function(){ console.log('uglify map success!'); });
- 执行test_map.js,生成zepto.min.js和zepto.js.map这两个文件
执行test_map.js
生产的新文件的路径如下:node test_map.js
第二步,修改压缩文件和map文件,将zepto.min.js文件和zepto.js.map关联起来。
在zepto.min.js中末尾加上这么一行
//@ sourceMappingURL=../js-map/zepto.js.map
第三步,开启chrome的map调试功能
第四步,写个demo.html并将代码放到apache下,进行调试
将上面uglify-js-map下的代码放到apache根目录下,写一个demo.html用来测试,位置如上图所示,代码如下:
<!DOCTYPE html><html><head>
<title></title></head><body><script type="text/javascript" src="../js/zepto.min.js"></script><script type="text/javascript">
Zepto('body').append('<p>success</p>');
</script></body></html>
通过url http://localhost/uglify-js-map/html/demo.html 进行测试;如果我们跟进到Zepto函数的内部,我们会发现,我们看到的是没压缩过的文件。
2.map文件说明
上面demo中生产的zepto.js.map的内容如下
{
"version":3,
"file":"zepto.min.js",
"sources":["../js/zepto.js"],
"names":["Zepto","type","obj","String",... "nativeGetComputedStyle"],
"mappings":"AAGA,GAAIA,OAAQ,..."UAIZrF",
"sourceRoot":"../js/"
}
- version:Source map的版本,目前为3。
- file:转换后的文件名。
- sourceRoot:转换前的文件所在的目录。如果与转换前的文件在同一目录,该项为空。
- sources:转换前的文件。该项是一个数组,表示可能存在多个文件合并。
- names:转换前的所有变量名和属性名。(太长啦,这里只列了一部分)
- mappings:记录位置信息的字符串,下文详细介绍。(太长啦,这里只列了一部分)
3.zepto.min.js是如何和zepto.js关联起来的
参考:
http://www.ruanyifeng.com/blog/2013/01/javascript_source_map.html