Question

我正在构建一个简单的反应应用程序，我将其部署到S3。我使用了facebook的create-react-app作为起点。我想在index.html中添加条件，以便我只在生产中包含Google Analytics。

为了测试它是否正常工作，我有这样的代码:(一旦我确认一切正常，我打算将下面的字符串更改为'production'）

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

当我使用npm run start在本地加载我的应用时。我看到它在页面上打印development，但Google Analytics脚本标记不在页面上。怎么可能在我的第一行webpack JS %NODE_ENV%等于'development'，然后在下一行条件失败？

这里是本地输出的HTML：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
    development

  <script type="text/javascript" src="/static/js/bundle.js"></script></body>
</html>

正如您所看到的那样，它打印'development'但是后面有一个空行，脚本标记在条件通过后会消失。

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

Answer 1

经过多次调查，我想我已经弄明白这里发生了什么。第一行是正确的，然后第二行与你的代码没有任何关系，但是create-react-app实际上插入了那些环境变量。

create-react-app正在使用插件调用InterpolateHtmlPlugin，它调用来自HtmlWebpackPlugin的钩子。基本上InterpolateHtmlPlugin所做的是在HTML中查找Graph并将其替换为应用程序中环境对象中的相应值。

问题是当HTML进入InterpolateHtmlPlugin时，模板代码已被处理（在我的测试之后，我很确定这是真的）。由于已经处理了条件已经评估为false并且不再出现在HTML中。对于第一行，它显示为％NODE_ENV％，因此Interpolate选择它并替换它。

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

import plotly.graph_objs as go

dcc.Graph(id="my-graph")

@app.callback(
    output=Output("my-graph", "figure"),
    inputs=Input("slider", "value")])
def update_my_graph(value):
    data = go.Data(
        [
            go.Bar(x=[1, 2, 3], y=[4, 1, 2]),
            go.Bar(x=[1, 2, 3], y=[2, 4, 5]),
        ]
    layout = go.Layout(
        title="My Dash Graph",
        height=700
        )
    figure = go.Figure(data=data, layout=layout)
    return figure

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

%env_var_name%

Answer 2

<% 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>
<% } %>

webpack react app中的NODE_ENV未正确设置

2 个答案: