React.js项目源码隐藏配置重启失效，如何解决？

你遇到的问题是：通过修改scripts或env文件设置GENERATE_SOURCEMAP=false后，初次build能隐藏源码，但重启项目后配置失效，Chrome中又能看到源码。以下是针对性的解决步骤：

1. 检查环境变量文件的正确性 #

• 文件命名与位置：确保环境变量文件放在项目根目录，生产环境下必须命名为.env.production（开发环境用.env.development）。如果只是用.env，默认只会在开发环境生效，build生产包时不会读取该文件。
• 配置格式：删除配置后的空格，正确写法是GENERATE_SOURCEMAP=false，末尾不能有空格，否则会被识别为字符串"false "而非布尔值false。

2. 适配不同操作系统的scripts配置 #

如果是在package.json的scripts中配置，注意Windows和类Unix系统（Mac/Linux）的语法差异：

• 类Unix系统：保持原有写法即可

  "scripts": {
    "build": "GENERATE_SOURCEMAP=false react-scripts build"
  }
  

• Windows系统：需要改用set命令设置环境变量

  "scripts": {
    "build": "set GENERATE_SOURCEMAP=false && react-scripts build"
  }
  

  或者使用跨平台的cross-env包（先安装npm install cross-env --save-dev），统一写法：

  "scripts": {
    "build": "cross-env GENERATE_SOURCEMAP=false react-scripts build"
  }
  

3. 清理缓存避免配置冲突 #

• 执行带缓存清理的build命令：

  npm run build -- --no-cache
  

• 手动删除项目根目录下的node_modules/.cache文件夹，彻底清理CRA的缓存。

4. 排查是否有优先级更高的配置文件 #

CRA的环境变量文件优先级为：.env.production.local > .env.local > .env.production > .env。检查这些文件中是否有GENERATE_SOURCEMAP=true的配置，覆盖了你的设置。

验证配置是否生效 #

执行npm run build后，查看项目的build目录，如果没有生成.map后缀的文件，说明配置已生效，Chrome开发者工具中就不会显示源码了。

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