webpack，處理index.html中的env變量

Question

我有一個具有app.jsx入口點的react應用程序，並且正在將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級別處理env變量。

在app.jsx中，我切換如下代碼：

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

這很好，因為我現在可以訪問var。 我還想有條件地將腳本加載到index.html上。 有人知道這是否可能嗎？ 謝謝！

Answer 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>

webpack，處理index.html中的env變量

問題描述

1 個解決方案

解決方案1
0

webpack，處理index.html中的env變量

問題描述

1 個解決方案

解決方案1 0

解決方案1
0