React中根据运行环境配置reCAPTCHA的实现咨询

首先说个关键：如果你的项目是用create-react-app初始化的，它本身已经集成了环境变量加载功能，根本不需要手动安装dotenv库。它会自动根据运行环境匹配对应的.env文件：

• 跑npm start（开发模式）时，自动加载.env.development.local、.env.development这些开发环境配置
• 跑npm run build（生产打包）时，自动加载.env.production.local、.env.production这些生产环境配置

所以你之前创建的两个.env文件是完全符合规则的，只要里面的变量名必须以REACT_APP_开头（CRA的强制要求，不然不会被注入到前端），比如：

# .env.development.local
REACT_APP_RECAPTCHA_SITE_KEY=你的开发环境站点密钥

# .env.production.local
REACT_APP_RECAPTCHA_SITE_KEY=你的生产环境站点密钥

⚠️ 注意：reCAPTCHA的SECRET_KEY是给后端用的，绝对不能写在前端的.env文件里！前端只需要用到站点密钥（site key）来渲染验证码组件。

你的index.js代码是否可行？ #

假设你的index.js是这么写的：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// 读取环境变量里的站点密钥
const siteKey = process.env.REACT_APP_RECAPTCHA_SITE_KEY;

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App siteKey={siteKey} />
  </React.StrictMode>
);

这种写法完全可行，但要确认两点：

1. 变量名确实带了REACT_APP_前缀
2. 你没有把secret key暴露在前端代码里

是否需要在package.json中加配置？ #

1. 用CRA的情况：不需要额外改配置 #

CRA默认的npm脚本已经帮你处理了环境切换：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build"
}

直接用这两个命令就行，start对应开发环境，build对应生产环境，自动加载对应的.env文件。

2. 自定义Webpack配置的情况（比如eject了项目或者自己搭的Webpack）： #

如果你的项目不是CRA初始化，或者已经eject出来改了Webpack配置，那需要手动配置dotenv：

• 先装dotenv：npm install dotenv --save-dev
• 在Webpack配置文件里加这段代码：

const dotenv = require('dotenv');
const webpack = require('webpack');

// 根据当前环境加载对应的.env文件
const envFile = `.env.${process.env.NODE_ENV}.local`;
const env = dotenv.config({ path: envFile }).parsed;

// 把环境变量注入到前端代码中
const envKeys = Object.keys(env).reduce((acc, key) => {
  acc[`process.env.${key}`] = JSON.stringify(env[key]);
  return acc;
}, {});

module.exports = {
  // ...其他Webpack配置
  plugins: [
    new webpack.DefinePlugin(envKeys)
  ]
};

然后在package.json的脚本里指定环境：

"scripts": {
  "start": "NODE_ENV=development webpack serve",
  "build": "NODE_ENV=production webpack"
}

（Windows系统需要先装cross-env包统一环境变量，脚本改成"start": "cross-env NODE_ENV=development webpack serve"）

最后提几个重要注意事项 #

• 后端验证必须用secret key，绝对不能把它放到前端代码或前端.env文件里，否则会泄露
• 不要把.env文件提交到Git，确保.gitignore里包含.env*（可以留个.env.example作为模板）
• 修改.env文件后，必须重启开发服务器才能生效

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