Question

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

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

并获得此env，但是我只能从react组件中获得它。

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上的某个脚本中获取它或类似的东西？有人能帮我吗？谢谢。

Answer 1

您可以为每个环境使用不同的文件。像tracking_test.js tracking_prod.js一样，在构建时使用webpack选择合适的文件并将其重命名为tracking.js。请参考html文件中的tracking.js。这样一来，您就不会发布不必要的代码。

如果您想继续修改innerHTML路由，请查看https://github.com/nfl/react-helmet，它们具有更好的API。

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

1 个答案: