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

【问题标题】：Insert inline script to the index.html with env variable使用 env 变量将内联脚本插入到 index.html
【发布时间】：2018-08-22 10:51:25
【问题描述】：

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

【问题讨论】：

"env variable", "get this env, but I can get it only from react component"，那是什么，你能澄清一下吗？什么平台？请提供您尝试过的东西，以便我们帮助修复它，而不是简单地“我尝试了几件事”和“我不确定该怎么做”。 “hotjar tracking code”——什么代码，我们看不到代码。
也许现在更好
How to add DOM element script to head section?的可能重复
这里还有很多信息stackoverflow.com/q/610995/125981
非常感谢！最后一个帮助了我

标签： reactjs webpack environment-variables inline-scripting

【解决方案1】：

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

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

【讨论】：

问题是我只需要使用内联脚本