如何在Create React App中生成Source Maps？无需Webpack且不执行eject

嘿，我来帮你把Create React App里Source Maps的疑问都理清楚：

1. Source Maps 是否会自动生成？ #

这得分环境来看：

• 开发环境：默认是自动生成的！毕竟开发时需要调试源码，CRA已经帮你配置好了，打开浏览器开发者工具就能直接用它定位代码问题。
• 生产环境：默认是关闭的，主要是为了避免把未压缩的源码暴露出去，保障代码安全。

2. 生成的文件是否存放在build文件夹中？ #

如果是生产环境开启了Source Maps，生成的.map文件会和对应的bundle文件一起，放在build/static/js和build/static/css目录下。比如你会看到类似main.xxxx.js.map、main.xxxx.css.map这样的文件，和同名的js/css文件配对。

3. 不eject、不手动配置Webpack，怎么生成Source Maps？ #

CRA提供了环境变量配置的方式，完全不需要eject或者碰Webpack配置：

• 临时开启：在执行build命令时直接带上环境变量
  • macOS/Linux：GENERATE_SOURCEMAPS=true npm run build
  • Windows命令提示符：set GENERATE_SOURCEMAPS=true && npm run build
  • Windows PowerShell：$env:GENERATE_SOURCEMAPS=true; npm run build
• 永久配置：修改项目根目录下的package.json，把build脚本改成下面这样，以后每次执行npm run build都会自动生成Source Maps：

  "scripts": {
    "start": "react-scripts start",
    "build": "GENERATE_SOURCEMAPS=true react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
  

另外要提醒下，生产环境开启Source Maps后，虽然方便调试线上问题，但要注意源码泄露的风险，如果你担心这个，可以在上线后把.map文件删掉，或者通过服务器配置禁止外部访问这些文件。

内容的提问来源于stack exchange，提问作者Red Baron