reactjs - 使用 env 变量将内联脚本插入到 index.html

Question

我有 index.html，我想在其中加载 hotjar 跟踪代码（仅内联脚本），但这取决于 env 变量。我尝试使用 webpack DefinePlugin

new webpack.DefinePlugin({
        'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
    }),

并得到这个环境，但我只能从反应组件中得到它。

componentWillMount() {
    const env = process.env.NODE_ENV;
    document.getElementById('hotjar').innerHTML = env === 'production' ? "...script1" : "...script2" 
  }

然后我使用“innerHTML”将我的脚本放到 index.html 中，但它并没有像我预期的那样工作。

这是 index.html 的主体

<body>
 <div id="root"></div>
  <script src="/dist/bundle.js"></script>
  <script id="hotjar">
  </script>
</body>

那么，我需要在 index.html 或类似的脚本中获取它吗？有人能帮我吗？谢谢。

score 0 · Accepted Answer

您可以为每个环境使用不同的文件。喜欢tracking_test.js tracking_prod.js并使用 webpack 在构建时选择适当的文件并将其重命名为tracking.js. 请参阅tracking.jshtml 文件中的。通过这种方式，您不会发布不必要的代码。

如果您想继续修改 innerHTML 路线，请查看https://github.com/nfl/react-helmet他们有更好的 APIs 来做同样的事情。

reactjs - 使用 env 变量将内联脚本插入到 index.html

1 回答 1

Related

Reference