如何在React项目中安全加载package.json自定义变量

你通过.env引用$npm_package_version这类标准变量能正常获取，但自定义变量$npm_package_myVariable拿到的是空值，又不想直接导入package.json（怕泄露敏感信息），以下是几种安全可行的方案：

方案1：在构建脚本中直接注入变量 #

Create React App（CRA）支持在npm脚本里直接传递环境变量，不用依赖.env的npm变量插值。修改package.json的scripts字段：

{
  "scripts": {
    "start": "REACT_APP_MY_VARIABLE=$(node -p require('./package.json').myVariable) react-scripts start",
    "build": "REACT_APP_MY_VARIABLE=$(node -p require('./package.json').myVariable) react-scripts build"
  }
}

原理是通过node命令直接读取package.json里的自定义变量，再注入到环境变量中，前端就能通过process.env.REACT_APP_MY_VARIABLE正常获取。

方案2：用脚本自动生成.env文件 #

写个简单的Node脚本，读取package.json的自定义变量并写入.env文件，避免手动维护的麻烦：

1. 创建generate-env.js文件：

const fs = require('fs');
const packageJson = require('./package.json');

const envContent = `
REACT_APP_VERSION=${packageJson.version}
REACT_APP_MY_VARIABLE=${packageJson.myVariable}
`;

fs.writeFileSync('.env', envContent.trim());

2. 修改package.json的脚本，在启动/构建前先执行这个脚本：

{
  "scripts": {
    "prestart": "node generate-env.js",
    "start": "react-scripts start",
    "prebuild": "node generate-env.js",
    "build": "react-scripts build"
  }
}

这样每次启动或构建前，都会自动生成包含自定义变量的.env文件，前端直接用process.env.REACT_APP_MY_VARIABLE即可。

方案3：用dotenv-expand解析.env变量插值 #

如果还是想用.env的变量插值语法，需要安装dotenv-expand来支持npm变量的解析：

1. 安装依赖：

npm install dotenv-expand --save-dev

2. 在项目根目录创建config-overrides.js文件：

const dotenv = require('dotenv');
const dotenvExpand = require('dotenv-expand');

const envConfig = dotenv.config();
dotenvExpand.expand(envConfig);

3. 修改package.json的启动脚本，确保先加载这个配置：

{
  "scripts": {
    "start": "node -r ./config-overrides.js react-scripts start"
  }
}

之后.env里的REACT_APP_MY_VARIABLE=$npm_package_myVariable就能正常解析了。

注意事项 #

• 确保package.json里的自定义变量不包含敏感信息（比如密钥、令牌），因为这些变量最终会被打包到前端代码中，任何人都能查看。
• 绝对不要直接在前端导入整个package.json，避免泄露不必要的字段（比如私有依赖、脚本中的敏感配置）。

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