Sourcemap是什么?Sourcemap的作用及用法概括
什么是SourcemapSourcemap 本质上是一个信息文件,里面储存着代码转换前后的对应位置信息。它记录了转换压缩后的代码所对应的转换前的源代码位置,是源代码和生产代码的映射。 Sourcemap 解决了在打包过程中,代码经过压缩,去空格以及 babel 编译转化后,由于代码之间差异性过大,造成无法debug的问题。Sourcemap的作用简单说 Sourcemap 构建了处理前以及处理后的
什么是Sourcemap
Sourcemap
本质上是一个信息文件,里面储存着代码转换前后的对应位置信息。它记录了转换压缩后的代码所对应的转换前的源代码位置,是源代码和生产代码的映射。 Sourcemap
解决了在打包过程中,代码经过压缩,去空格以及 babel
编译转化后,由于代码之间差异性过大,造成无法debug
的问题。
Sourcemap的作用
简单说 Sourcemap
构建了处理前以及处理后的代码之间的一座桥梁,方便定位生产环境中出现 bug
的位置。因为现在的前端开发都是模块化、组件化的方式,在上线前对 js 和 css 文件进行合并压缩容易造成混淆。如果对这样的线上代码进行调试,肯定不切实际,sourceMap
的作用就是能够让浏览器的调试面版将生成后的代码映射到源码文件当中,开发者可以在源码文件中 debug,这样就会让程序员调试轻松、简单很多。
Sourcemap的用法
Sourcemap
的种类有很多, 在生产环境下可以用process.env
判断一下。 webpack
中可以在devtool
中设置, 在开发环境中可以配置devtool
为cheap-module-source-map
,方便调试。生产环境下建议采用none
的方式,这样做不暴露源代码。或者是nosources-source-map
的方式,既可以定位源代码位置,又不暴露源代码。
SourceMap总结
SourceMap 的主要作用是为了方便调试
- 映射转换过后的代码和源代码之间的关系
- 源代码引入 //# sourceMappingURL=build.js.map
- source Map 解决了源代码和运行代码不一致所产生的问题
补充:
在webpack配置source Map
let path = require("path")
module.exports = {
mode:"none",
entry:"./src/main.js",
output:{
filename:"build.js",
path:path.join(__dirname,"dist")
},
devtool:"source-map"
}
//build.js
/***/ (function(module, exports) {
console.log("hello word")
/***/ })
/******/ ]);
//# sourceMappingURL=build.js.map
Source Map的配置项:
更多推荐
所有评论(0)