如何通过Webpack Encore在Symfony与React间共享.env文件？

注意：此方案仅针对特定场景，不做通用推荐，但如果你也碰到类似需求，可以参考

我用 Symfony 结合 Webpack Encore 嵌入了 React 应用，这套方案也适用于其他 JS 框架。核心需求是实现 Symfony 和 React 共用一套环境变量体系，同时满足以下要求：

• 用带默认值的 .env.sample 作为基础配置模板
• 支持通过 .env.local、.env.{env_type}、.env.{env_type}.local 分层适配不同环境，且这些文件都是可选的，开发者可自行决定是否创建
• 大部分变量设为私有，仅在 Symfony 后端使用，不暴露给前端 React

实现步骤 #

1. 变量命名区分：给需要暴露给前端的变量统一加前缀（比如 APP_FRONTEND_），私有变量直接用常规命名（如 DATABASE_URL）
2. Symfony 侧配置：在 Symfony 的 .env 及分层文件中正常定义所有变量，私有变量会自动被后端加载，无需额外处理
3. Webpack Encore 配置：修改 webpack.config.js，利用 dotenv 加载环境变量，只提取带指定前缀的变量注入到前端：

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

// 按优先级加载环境变量：.env.{env}.local > .env.{env} > .env.local > .env
const envFiles = [
  `.env.${process.env.NODE_ENV}.local`,
  `.env.${process.env.NODE_ENV}`,
  process.env.NODE_ENV !== 'production' && `.env.local`,
  `.env`
].filter(Boolean);

envFiles.forEach(file => {
  dotenv.config({ path: path.resolve(__dirname, file) });
});

// 提取前端可用变量
const frontendEnv = {};
Object.keys(process.env).forEach(key => {
  if (key.startsWith('APP_FRONTEND_')) {
    frontendEnv[key] = process.env[key];
  }
});

// 注入到前端环境
Encore
  // ...其他原有配置
  .defineVariables(frontendEnv)
;

4. React 中使用：直接通过 process.env.APP_FRONTEND_XXX 访问暴露的变量
5. 版本控制配置：在 .gitignore 中添加 .env.local、.env.*.local，确保本地配置文件不被提交，只提交 .env.sample 作为模板

这套方案既保留了 Symfony 原生的环境变量分层机制，又能安全地将需要的变量传递给前端，同时保证私有变量不会泄露。

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