如何在webpack + reactjs中使用環境變量？

我正在使用webpack編譯我的Reactjs文件。在我的項目中，我需要對後端進行API調用。如何在webpack + reactjs中使用環境變量？

現在我有3個地方，發展和生產的環境。

所以我要在我所宣稱遵循constants.jsx文件： -

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

所以在我的成分我從上面導入網址，並利用它們來調用的API，但我需要怎麼改上面的變量是基於它是本地的，dev還是prod。

我如何在上面實現？

來源

2016-07-03 Harkirat Saluja

見http://stackoverflow.com/questions/30030031/passing-environment-dependent-variables-in-webpack如何傳遞變量在webpack.config.js。 –

所以我嘗試一些東西，通過執行以下解決了以上： -

在我們的WebPack配置添加DefinePlugin。以下是我的webconfig： -

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

現在在編譯時，我們使用下面的命令： -

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

現在，如果你看到我們設置「NODE_ENV」使用CLI輸入，所以當「NODE_ENV」是生產作爲價值，webpack會自動縮小您的輸出包。

現在我們說我們在一個文件中聲明瞭API url（我有Constants.jsx），所以我們在constants.jsx中添加了以下內容。我們可以讀取此Constants.jsx中webpack配置中設置的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();

來源

2016-07-04 16:49:46

const api_url函數看起來有點冗長？你能以其他方式做到這一點嗎？詳細信息如下： – thevangelist

詳細？你能更精緻一點嗎？ –

比較這個例子：http://stackoverflow.com/questions/38164102/change-hard-coded-url-constants-for-different-environments-via-webpack – thevangelist

如何在webpack + reactjs中使用環境變量？

回答

相關問題