webpack，index.html 中的进程环境变量答案

【问题标题】：webpack, process env variable in index.htmlwebpack，index.html 中的进程环境变量
【发布时间】：2017-07-29 14:10:47
【问题描述】：

我有一个 react 应用程序，它有一个 app.jsx 的入口点，我正在将 segment.io 添加到我的构建中，但是我想将它的 API 密钥设置为 process.env 变量。我无法使用 webpack 执行此操作，因为我的入口点不是 index.html。

我想看看是否有办法让我（在 index.html 上）做这样的事情

<script type="text/javascript">
  ..segment script loading here + (process.env.MY_SEGMENT_KEY)}();
 </script>

但我不确定如何获取它，因此我可以在 index.html 级别处理环境变量。

在 app.jsx 中，我切换代码如下：

if (process.env.MY_SEGMENT_KEY) {
....
}

这很好用，因为此时我可以访问变量。我还想有条件地在 index.html 上加载脚本。有谁知道这是否可能？谢谢！

【问题讨论】：

Passing environment-dependent variables in webpack的可能重复
@Daniel_L 我可以毫无问题地传递变量，问题在于将它们放入 index.html（这不是应用程序入口点）
使用 script 标签更容易暴露全局，或者让你的 webpack 配置本身基于 node_env 有条件
@Daniel_L 想详细说明答案吗？

标签： javascript html reactjs webpack segment-io

【解决方案1】：

只需在您的 JSX 文件中加载分析，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

if (process.env.MY_SEGMENT_KEY) {
  window.analytics.load(process.env.MY_SEGMENT_KEY);
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

您的 index.html 文件应如下所示：

<!DOCTYPE html>
<html>
  <head>
    ...
    <title>My App</title>
    <script type="text/javascript">
      !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};analytics.SNIPPET_VERSION="4.0.0";
      }}();
    </script>
  </head>
  <body>
    <div id="root">
    </div>
  </body>
</html>

【讨论】：