Webpack React应用NODE_ENV未正确设置，无法控制GA环境加载

我懂你遇到的麻烦了！用create-react-app（CRA）搭建的项目，直接在index.html里写那种EJS风格的条件判断确实行不通，因为CRA有自己一套环境变量处理和模板渲染的规则，咱们一步步来解决：

问题根源 #

你原来写的<%= '%NODE_ENV%' %>和if判断逻辑不生效，主要有两个原因：

1. CRA的index.html默认支持%变量名%的变量替换语法，但不支持EJS的<% %>条件逻辑，所以你的if判断根本不会被执行。
2. 即便你用对了变量语法，HTML本身也没有原生的条件渲染能力，没法直接根据环境变量决定是否加载脚本。

推荐解决方案：在React组件中动态加载GA（无需修改Webpack配置） #

这种方法最符合CRA的最佳实践，不需要eject或者额外配置工具，直接在代码里判断环境：

1. 打开你的src/index.js（或者App.js，根据你的项目结构），添加这段代码：

// 仅在生产环境加载Google Analytics
if (process.env.NODE_ENV === 'production') {
  // 创建并插入GA脚本
  const gaScript = document.createElement('script');
  gaScript.async = true;
  gaScript.src = 'https://www.googletagmanager.com/gtag/js?id=你的GA跟踪ID';
  document.head.appendChild(gaScript);

  // 初始化GA
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '你的GA跟踪ID');
}

2. 测试验证：
   • 运行npm start（开发环境）：打开浏览器控制台，你会发现这段代码不会被执行，GA脚本也不会被加载。
   • 运行npm run build构建生产包：打开构建后的index.html，你会看到GA脚本已经被正确注入（或者直接部署到S3测试）。

CRA会自动在构建时把process.env.NODE_ENV替换为对应的环境值，而且开发环境下这段if代码会被tree-shaking优化掉，完全不影响性能。

备选方案：改用EJS模板（需要自定义Webpack配置） #

如果你坚持要在index.html层面实现，那可以借助CRA的自定义配置工具（比如craco）来启用EJS模板支持：

1. 安装craco工具：

npm install @craco/craco --save-dev

2. 在项目根目录创建craco.config.js，添加配置：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      // 找到HtmlWebpackPlugin实例
      const htmlPlugin = webpackConfig.plugins.find(
        plugin => plugin.constructor.name === 'HtmlWebpackPlugin'
      );
      if (htmlPlugin) {
        // 将模板改为EJS文件
        htmlPlugin.options.template = './public/index.ejs';
      }
      return webpackConfig;
    }
  }
};

3. 把public/index.html重命名为index.ejs，然后在里面写条件判断：

<% if (process.env.NODE_ENV === 'production') { %>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=你的GA跟踪ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '你的GA跟踪ID');
</script>
<% } %>

4. 修改package.json里的脚本命令，把react-scripts替换成craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

现在运行npm run build，生产环境下GA代码就会被正确注入，开发环境则不会。

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