React项目中.env.development与.env.production文件的使用疑问

一、npm start和npm run build的执行行为 #

• 执行npm start：

  • 脚本会先设置NODE_ENV=development，再启动react-scripts开发服务器
  • 此时会加载根目录下的.env和.env.development文件，.env.development的优先级更高——如果两个文件有同名变量，会优先使用.env.development里的值
  • 开发服务器支持热重载，符合要求的环境变量（必须以REACT_APP_开头）会被注入到应用中，你可以通过process.env.REACT_APP_*的方式访问

• 执行npm run build：

  • 脚本设置NODE_ENV=production，触发react-scripts的生产构建流程
  • 此时会加载.env和.env.production文件，.env.production优先级高于.env，同名变量以生产环境配置为准
  • 构建过程会把代码中用到的环境变量替换成实际值，最终生成可部署的静态资源包（build目录）

二、npm run build会包含所有.env文件吗？ #

不会。react-scripts在生产构建时只会加载对应环境的配置文件（.env和.env.production），而且不会把任何.env文件本身打包到构建产物里。最终产物里只有被替换后的变量值，不会保留原始的配置文件。

三、将API密钥存储在.env.development中安全吗？ #

不安全。不管是开发环境还是生产环境的.env文件，里面的变量最终都会被打包到前端代码里。只要有人能访问你的开发服务器，或者拿到开发环境的代码包，就能轻松提取出里面的API密钥。

要保护API密钥，正确的做法是通过后端代理：把密钥存在你的后端服务器上，前端调用自己的后端接口，由后端去调用第三方API并携带密钥，这样密钥永远不会暴露给客户端。

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