Sourcemap是什么?有什么作用?在生产环境怎么用?
Sourcemap
本质上是一个信息文件,里面储存着代码转换前后的对应位置信息。它记录了转换压缩后的代码所对应的转换前的源代码位置,是源代码和生产代码的映射。
Sourcemap
解决了在打包过程中,代码经过压缩,去空格以及 babel
编译转化后,由于代码之间差异性过大,造成无法debug
的问题,简单说 Sourcemap
构建了处理前以及处理后的代码之间的一座桥梁,方便定位生产环境中出现 bug
的位置。
因为现在的前端开发都是模块化、组件化的方式,在上线前对 js 和 css 文件进行合并压缩容易造成混淆。 如果对这样的线上代码进行调试,肯定不切实际,sourceMap
的作用就是能够让浏览器的调试面版将生成后的代码映射到源码文件当中,开发者可以在源码文件中 debug,这样就会让程序员调试轻松、简单很多。
Sourcemap
的种类有很多, 在生产环境下可以用process.
判断一下。
webpack
中可以在devtool
中设置, 在开发环境中可以配置devtool
为cheap-module-source-map
,方便调试。 生产环境下建议采用none
的方式,这样做不暴露源代码。或者是nosources-source-map
的方式,既可以定位源代码位置,又不暴露源代码。