同构React应用中Browserify Envify未替换环境变量求助

看起来你碰到的是Envify在预发布环境没有正确替换process.env变量，导致客户端hydrate时覆盖服务端渲染的正确配置的问题——本地正常但预发布失效，说明问题大概率出在构建环境的变量传递或者Envify的配置上。我来分享几个排查和解决的思路：

1. 先确认预发布环境的构建变量是否正确注入 #

本地正常但预发布出问题，首先要排查构建时预发布环境的FEATURE_EXAMPLE变量是否真的存在且正确：

• 检查你的CI/CD构建命令，是不是明确传递了变量，比如FEATURE_EXAMPLE=true gulp build？有些环境默认不会把系统变量传递给Node进程，或者可能存在变量名大小写错误的情况。
• 可以在你的Browserify构建脚本开头加一行调试代码：

  console.log('构建时FEATURE_EXAMPLE的值:', process.env.FEATURE_EXAMPLE);
  

  看预发布环境的构建日志里有没有输出正确的值，这能快速确认变量是不是真的传到了构建流程中。

2. 修正Envify的配置，启用Purge模式 #

你之前用envify(process.env)的方式会把所有process.env变量都传入，但预发布环境可能有很多无关变量，而且容易导致Envify没有彻底替换目标变量。更稳妥的做法是显式指定需要替换的变量，并启用Purge模式：

const envify = require('envify/custom');

browserify()
  // 先执行envify，再执行babelify（顺序很重要！）
  .transform(envify({
    FEATURE_EXAMPLE: process.env.FEATURE_EXAMPLE || 'false',
    _: 'purge' // 移除所有未显式指定的process.env引用
  }))
  .transform(babelify.configure({ ignore: [/(bower_components)|(node_modules)/] }))
  // 后续的bundle、pipe等步骤不变

这里的_: 'purge'是关键，它会把代码中所有没被你显式声明的process.env相关代码彻底移除，避免残留的process.env在浏览器中执行（浏览器里根本没有这个对象）。

3. 调整Transform的执行顺序 #

你之前是先跑babelify再跑envify，这可能导致babel转译后的代码改变了process.env的写法，让Envify无法正确识别。一定要把envify放在babelify之前执行，这样Envify能先处理原始ES代码中的process.env引用，再交给babel转成CommonJS。

4. 验证构建后的产物 #

预发布环境构建完成后，直接打开生成的app.js文件，搜索FEATURE_EXAMPLE：

• 如果看到的是FEATURE_EXAMPLE: true（或false），说明Envify生效了；
• 如果还是process.env.FEATURE_EXAMPLE === 'true'，那说明Envify没起作用，需要排查：
  • 检查envify和browserify的版本兼容性，尝试重新安装依赖：npm uninstall envify && npm install envify --save-dev；
  • 暂时移除stripDebug和uglify，看是否是这些插件干扰了Envify的替换结果，再逐步加回来排查。

5. 同构应用的额外兜底方案 #

为了彻底避免服务端和客户端的配置不匹配，你可以在服务端渲染的HTML模板中，把feature toggle的值注入到全局变量中：

<!-- 服务端渲染的HTML模板 -->
<script>
  window.__FEATURE_TOGGLES__ = <%= JSON.stringify(featureToggles) %>;
</script>

然后客户端代码优先读取这个全局变量：

export const featureToggles = { 
  FEATURE_EXAMPLE: window.__FEATURE_TOGGLES__?.FEATURE_EXAMPLE || (process.env.FEATURE_EXAMPLE === 'true') 
};

这样即使Envify的替换出问题，客户端也能拿到服务端传递的正确值，避免hydrate时的配置覆盖。

内容的提问来源于stack exchange，提问作者Per Enström