我有一个 React 应用程序，它有一个 app.jsx 的入口点，并且我正在将 segment.io 添加到我的构建中，但是我想将其 API key 设置为 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 上的脚本。有人知道这是否可能吗？谢谢!
最佳答案
只需在 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>
关于javascript - webpack，处理index.html中的env变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42680988/