webpack + reactjsで環境変数を使用するには？

Question

私はwebpackを使用してReactjsファイルをコンパイルしています。私のプロジェクトでは、バックエンドへのAPIコールを行う必要があります。

私は、現地、開発、生産の3つの環境を持っています。

だから私は、私は次のように宣言しているいるconstants.jsxファイルを持っている： -

export const url= 'http://localhost:8002/api/v0'; 

は、だから私のコンポーネントでは、私は上記のURLをインポートし、APIを呼び出すためにそれらを使用するが、私は変更する必要があるかをdev、prodのいずれかに基づいて変数の上に表示されます。

上記の実装方法を教えてください。

Answer 1

だから私はいくつかのことをしようとして次の操作を行って、上記を解決しました： -

当社のWebPACKの設定では、DefinePluginを追加します。以下は、私のWebConfigです： -

plugins: [ 
    new BundleTracker({filename: './webpack-stats.json'}), 
    new webpack.DefinePlugin({ 
    'process.env': { 
     'NODE_ENV': JSON.stringify(process.env.environment), 
    } 
    }) 
    ], 

今、私たちは、以下のコマンドを使用コンパイル中： - あなたは「NODE_ENV」の生産があるときに我々はそうCLI入力して「NODE_ENV」を設定見れば今

environment=local webpack (for local) 
environment=development webpack(for dev) 
environment=production webpack(for prod) 

を値として、webpackは出力バンドルを自動的に縮小します。

ここで、私はAPIのURLを（私はConstants.jsxを持っていた）ファイルで宣言しているので、constants.jsxに以下を追加します。このConstants.jsxのwebpack configで設定されたNODE_ENVを読み込み、ここからエクスポートしてAPISが呼び出される場所からコンポーネントをインポートすることができます。

const api_url=function(){ 
    let api_url=''; 
    if(process.env.NODE_ENV == 'local'){ 
    api_url= 'http://localhost:8002/api/v0'; 
    } 
    else if(process.env.NODE_ENV == 'development'){ 
    api_url = 'https://development/api/v0'; 
    } 
    else if(process.env.NODE_ENV == 'production'){ 
    api_url = 'https://production/api/v0'; 
    } 
    return api_url; 
} 

export const url= api_url();