Reactjs 未正确设置webpack react应用程序中的节点_ENV

我正在构建一个简单的react应用程序，并将其部署到S3。我用facebook作为起点。我想在我的

index.html

中添加一个条件，这样我只在生产中包含谷歌分析

为了测试它是否正常工作，我有如下代码：（我打算在验证所有内容是否正常工作后，将下面的字符串更改为

'production'

）

正如您所看到的，它打印了

“开发”

，但随后有一个空行，如果条件通过，脚本标记将消失在该行中

---

我是webpack的新手，我对这种行为感到非常困惑。任何帮助都将不胜感激

经过大量调查，我想我已经弄明白了这里发生了什么。第一行正确，第二行不正确的原因与代码无关，但与createreact应用程序实际插入这些环境变量的方式有关

createreact应用程序使用了一个插件调用interpoleHtmlPlugin，它从HtmlWebpackPlugin调用一个钩子。基本上，InterpolateHtmlPlugin所做的是在HTML中查找

%env\u var\u name%

，并在应用程序的环境对象中用相应的值替换它

问题是，当HTML到达InterpolateHtmlPlugin时，模板代码已经被处理（经过测试，我非常确定这是真的）。由于已经对其进行了处理，该条件的计算结果为false，不再显示在HTML中。对于第一行，它显示在%NODE_ENV%处，因此Interpolate将拾取它并替换它

我认为最简单的方法是将NODE_ENV添加到Web包配置中的HtmlWebpackPlugin中，并以这种方式引用它。因此，您的新HtmlWebpackPlugin配置如下所示：

new HtmlWebpackPlugin({
  inject: true,
  template: paths.appHtml,
  NODE_ENV: env.raw.NODE_ENV
})

index.html文件中的条件如下所示：

<% if (htmlWebpackPlugin.options.NODE_ENV == 'development') { %>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=XXX"></script>
<% } %>

你可以分享你的

软件包。json

，你使用的是哪个版本的网页包。json:

“html网页包插件”：“2.29.0”，“提取文本网页包插件”：“3.0.2”，“区分大小写的路径网页包插件”：“2.1.1”，“网页包”：“3.8.1”，“网页包开发服务器”：“2.9.4”，“网页包清单插件”：“1.3.2”、“sw precache网页包插件”：“0.11.4”“，

不确定如何在SO注释中换行。很抱歉这里太乱了。我还应该注意，我没有更改

create react app

附带的任何网页包配置文件。也许是EhtmlPlugin太晚了？i、 它在生命周期中进入了错误的阶段。不管怎样，你的解决方案奏效了。老实说，我真的不需要%VAR_NAME%糖。我非常乐意做

htmlWebpackPlugin.options

。似乎它给了我更多的控制，更少的魔法。再次感谢！！是的，我认为如果它想支持使用变量作为HtmlWebpackPlugin使用的模板的真实部分，那么它可能在错误的钩子期间运行。

new HtmlWebpackPlugin({
  inject: true,
  template: paths.appHtml,
  NODE_ENV: env.raw.NODE_ENV
})

<% if (htmlWebpackPlugin.options.NODE_ENV == 'development') { %>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=XXX"></script>
<% } %>

<% if (process.env.NODE_ENV == 'development') { %>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=XXX"></script>
<% } %>