什么是SourceMap?
我们在项目进行打包后,会将开发中的多个文件代码打包到一个文件中,并且经过压缩,去掉多余的空格,且babel编译化后,最终会用于线上环境,那么这样处理后的代码和源代码会有很大的差别,当有bug的时候,我们只能定位到压缩处理后的代码位置,无法定位到开发环境中的代码,对于开发不好调式,因此sourceMap出现了,它就是为了解决不好调式代码问题的。
在项目开发完进行打包后,在打包的文件夹里通常除了js,css,图片字体等资源文件外,大家一定还见过xxx.js.map的文件。这种带map后缀的文件就是Source Map文件——它保存了源代码和转换之后代码(通常经过压缩混淆和其他转换)的关系。
下图展示了部分打包之后生成的Source Map文件:
常见的转换过程包括但不限于:
- 压缩混淆(UglifyJS)
- 编译(TypeScript, CoffeeScript)
- 转译(Babel)
- 合并多个文件,减少带宽请求。
经过上述转换过程的代码,往往都会变得面目全非,就像下面这样:
这样虽然对带宽很友好,但是调试起来就不是那么轻松了。我们在代码出错的时候,肯定最希望能定位其在源码中的位置。所以可以利用SourceMap插件。
使用SourceMap前:
使用SourceMap,配置后: