使用map来调试压缩混淆过的文件
web前端—vue项目.map文件的作用
.map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。
有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。
注意：生产环境打包一般需要禁止map输出，map文件会造成项目源码泄漏
解决办法：去src/config/index.js中改一个参数：
productionSourceMap:false
使用map来调试压缩混淆过的文件
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
————————————————
版权声明：本文为CSDN博主「larrywangsun」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/larrywangsun/article/details/28115867
浙公网安备 33010602011771号