webpack，index.html中的env變量

我有一個反應app，它有我的app.jsx的入口點，我將segment.io添加到我的構建中，但是我想將它的API key設置爲一個進程。變量env。我在如何使用webpack執行此操作時遇到問題，因爲我的入口點不是index.html。webpack，index.html中的env變量

我想看看是否有一種方法，所以我可以（上中的index.html）做這樣的事

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

但我不知道如何得到它，所以我可以處理ENV變量在index.html級別。

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

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

，這工作得很好，因爲我在這一點上獲得了瓦爾。我也想有條件地在index.html上加載腳本。任何人都知道這是可能的嗎？謝謝！在您的JSX文件

來源

2017-03-08 ajmajmajma

[中的WebPack傳遞環境相關的變量]的可能的複製（ http://stackoverflow.com/questions/30030031/passing-environment-dependent-variables-in-webpack） –

@Daniel_L我可以通過變量沒有問題，問題是讓他們在index.html（這不是應用程序入口點） – ajmajmajma

更容易使用腳本標籤或hav公開全局e你的webpack配置本身是有條件的基於node_env –

只需加載分析如下：

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>

來源

2017-03-10 08:32:52

webpack，index.html中的env變量

回答

相關問題