解读SourceMap

文章预览

SourceMap的用途 前端工程打包后代码会与源码产生不一致，当代码运行出错时控制台会定位出错代码的位置。SourceMap的用途是可以将转换后的代码映射回源码，如果你部署了js文件对应的map文件资源，那么在控制台里调试时可以直接定位到源码的位置。 SourceMap的格式 我们可以生成一个SouceMap文件看看里面的字段分别都对应什么意思，这里使用webpack打包举例。 源码： //src/index.js function   a () {    for  ( let  i = 0; i     console.log( 's' );   } } a(); 打包后的代码： //dist/main-145900df.js ! function (){ for ( let  o=0;o < 3;o++)console.log( "s" )}(); // # sourceMappingURL=main-145900df.js.map .map文件： //dist/main-145900df.js.map {    "version" : 3,    "file" :  "main-145900df.js" ,    "mappings" :  "CAAA,WACE,IAAK,IAAIA,   EAAI,EAAGA,EAAI,EAAGA,IACrBC,QAAQC,IAAI,KAGhBC" ,    "sources" : [ "webpack://source-map-webpack-demo/ ………………………………