SourceMap源码映射_react项目开启sourcemap

最近这段时间在浏览器访问我使用react脚手架写的项目的时候，注意我的项目是已经打包并且为线上生产环境，但仍会在控制台中看到我console.log的一些信息，并且后面有具体的哪一行，如图

因为我的项目已经使用npm run build打包，然后通过nginx反向代理将前后端连接，打包后的代码均为后缀为.js或者.map的文件，但控制台可以看到我开发环境的jsx文件，于是我打开控制台Sources源代码

如图可见，我在开发环境下的目录和jsx文件都原封不动的暴露在了生产环境下的控制台，这令我十分疑惑，于是我在网上翻阅了大量的文章，原来这个是webpack工具的配置项源码映射（Source Map），打包后生成的.map文件就是源码映射的主要文件，react脚手架默认开启了这个功能。

解决方案：

1. 在脚手架根目录下的config文件夹中找到webpack.config.js文件，找到下面这行代码

2. const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
   

3. 如下，将shouldUseSourceMap变量赋值为false，即可关闭SourceMap源码映射

4. const shouldUseSourceMap = false;
   

再次尝试npm run build，可以看到打包出来的文件并没有.map后缀

查看控制台Sources

可见控制台source已经是我们生产环境下的目录结构和代码了。

当然如果您是在开发环境下，还是建议您开启脚手架的SourceMap，这样有利于我们更快更清晰的定位bug和错误。

如果您想更深入的了解sourcemap，可以参考以下文章

http://t.csdnimg.cn/YSBdt

http://t.csdnimg.cn/wL7uY