无需构建新库，能否加载.env文件用于预构建自动生成？

你要找的是独立于React打包流程、在预构建阶段加载.env并生成内容的工具，以下是几种直接可用的方案：

1. 用dotenv+自定义脚本实现核心需求 #

dotenv是Node.js生态最成熟的.env加载工具，完全能在预构建阶段独立运行：

• 安装依赖：

npm install dotenv --save-dev

• 编写预构建脚本（比如scripts/prebuild.js）：

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

// 加载.env文件内容
dotenv.config();

// 根据环境变量生成你需要的内容，比如生成前端可直接引用的配置文件
const generatedConfig = `export const appSettings = {
  someSetting: '${process.env.REACT_APP_SOME_SETTING}'
};`;

// 将生成的内容写入项目目录
fs.writeFileSync('./src/generated-config.js', generatedConfig);

• 在package.json中配置预构建命令：

{
  "scripts": {
    "prebuild": "node scripts/prebuild.js",
    "build": "react-scripts build" // 替换为你的React构建命令
  }
}

执行npm run build时，会自动先运行预构建脚本，加载.env并生成内容，和React打包流程完全解耦。

2. 用env-cmd简化命令行环境变量加载 #

如果只是需要在预构建命令中直接读取.env变量，env-cmd可以省去手动调用dotenv的步骤：

• 安装依赖：

npm install env-cmd --save-dev

• 配置预构建命令：

{
  "scripts": {
    "prebuild": "env-cmd node scripts/your-prebuild-task.js"
  }
}

在你的预构建脚本里，直接通过process.env.REACT_APP_SOME_SETTING就能读取.env里的变量，无需额外配置。

3. 封装成你示例中的env-loader风格 #

如果想要和你给出的示例完全一致的调用方式，可以用dotenv封装一个简易加载器：

创建utils/env-loader.js：

const dotenv = require('dotenv');

exports.loader = {
  loadEnv: () => {
    const loadResult = dotenv.config();
    if (loadResult.error) throw loadResult.error;
    return loadResult.parsed;
  }
};

然后在预构建脚本中使用：

const { loader } = require('./utils/env-loader');

console.log(loader.loadEnv()['REACT_APP_SOME_SETTING']); // 输出.env中的对应变量值

这种用法和你示例完全匹配，且完全独立于React打包流程。

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