如何在Heroku部署React项目且不暴露客户端源码？

这不是操作失误——React作为单页应用，客户端代码本身就需要发送到浏览器才能运行，你在开发者工具里看到的完整源码，是通过source map还原出来的。create-react-app默认在生产构建时会生成source map，方便调试，但部署到生产环境时可以关闭它。

解决步骤：

• 修改项目根目录的package.json，把build脚本改成带环境变量的形式：

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

  如果你用的是Windows系统，需要先安装cross-env包来兼容环境变量：

  npm install cross-env --save-dev
  

  再修改脚本：

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

• 提交修改后的package.json，重新push到Heroku远程仓库，触发项目重新构建部署。

补充说明：

• 关闭source map后，浏览器只能看到编译混淆后的bundle文件，虽然仍能被反编译，但不会有完整的源码结构、变量名和注释，能大幅降低源码暴露的风险。
• 注意：任何敏感逻辑（比如密钥、业务核心算法等）绝对不能放在客户端代码里，必须放在后端服务中，客户端只做界面展示和调用后端接口的逻辑。

内容的提问来源于stack exchange，提问作者Denny L.