如何让dotenv在GitHub CI构建中同时读取.env文件与环境变量？

1. 合并.env文件与系统环境变量 #

dotenv默认只加载.env文件的变量，我们可以手动把系统环境变量（比如CI中yaml配置的）和dotenv加载的结果合并，并且让系统环境变量优先级更高（避免本地.env覆盖CI的配置）。代码示例：

const dotenv = require('dotenv');

// 尝试加载本地.env文件
let envFromFile = {};
try {
  envFromFile = dotenv.config({ path: '.env' }).parsed || {};
} catch (err) {
  // 本地开发时未找到.env文件，直接抛出提示
  if (process.env.NODE_ENV !== 'production' && err.code === 'ENOENT') {
    throw new Error('缺少.env文件，请从.env.example复制一份并配置');
  }
}

// 合并变量：系统环境变量优先级高于本地.env
const combinedEnv = { ...envFromFile, ...process.env };

2. 校验必填变量是否存在 #

先列出所有必须的环境变量key，然后检查合并后的变量中是否有遗漏，存在缺失就抛错终止构建：

// 替换为你实际需要的必填变量列表
const requiredEnvVars = ['API_BASE_URL', 'APP_SECRET', 'LOG_LEVEL'];

// 筛选出所有缺失的变量
const missingVars = requiredEnvVars.filter(key => !combinedEnv[key]);

if (missingVars.length > 0) {
  throw new Error(`构建失败：缺少必填环境变量 -> ${missingVars.join(', ')}`);
}

3. 注入到Webpack配置 #

最后通过DefinePlugin把合并后的变量注入到项目中，确保代码里能正常访问：

const webpack = require('webpack');

module.exports = {
  // ...其他Webpack配置项
  plugins: [
    new webpack.DefinePlugin({
      'process.env': JSON.stringify(combinedEnv)
    })
  ]
};

这样处理后：

• 本地开发时，没.env文件会直接提示从.example创建；如果有.env但缺必填变量，同样会抛错；
• CI环境中，无需依赖.env文件，直接使用yaml配置的环境变量，若缺失变量也会终止构建并给出提示。

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