webpack、index.htmlのenv変数を処理する

私のapp.jsxのエントリポイントを持つリアクションアプリがあり、私のビルドにsegment.ioを追加していますが、APIキーをプロセスとして設定したいと思います。 env変数。私はエントリポイントがindex.htmlではないので、webpackでこれを行う方法に問題があります。webpack、index.htmlのenv変数を処理する

私はこの

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

ような何かをしかし、私は、私はENV変数を処理することができますので、それを取得する方法を確認していない（index.htmlの上）ので、私ができる方法があるかどうかを確認しようとしていますindex.htmlレベルで

app.jsxでは私のようなコードを切り替えています：

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

と私は、この時点でVARSへのアクセス権を持っているので、これは正常に動作します。条件付きでindex.htmlにスクリプトをロードしたいと思います。これが可能なら誰でも知っていますか？ありがとう！次のようにあなたのJSXファイル内

出典

2017-03-08 ajmajmajma

可能な複製（ http://stackoverflow.com/questions/30030031/passing-environment-dependent-variables-in-webpack） –

@Daniel_L問題なく変数を渡すことができます。問題はindex.htmlにあります（これはアプリではありませんエントリポイント） – ajmajmajma

スクリプトタグでグローバルに公開する方が簡単か、またはhavあなたのウェブパックの設定自体は、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>

[WebPACKの環境依存の変数を渡す]の

出典

2017-03-10 08:32:52

webpack、index.htmlのenv変数を処理する

答えて

関連する問題