2016-03-18 35 views
0

我對ReactJS非常陌生,我可能會認爲完全錯誤。在我們的應用程序中,我對後端進行了大量的AJAX調用。例如,在dev中,我打電話給http://localhost:3000,在生產中我(自然地)使用另一個主機,這個主機根據安裝而改變。ReactJS:存儲非常簡單的設置/常量

的主機是靜態的,設置一次,永遠不會改變。

我如何在管理作出反應的主機信息?

我讀到終極版/光通量等存儲全局變量,但是這是矯枉過正我們。我們只需要一個字符串(URL /主機信息),我們可以用另一個字符串替換。我們可以將信息存儲在一個文件中,作爲命令行參數或其他。我們只需要它很簡單。

更新:事實證明,我完全不理解構建系統。正如Dan指出的那樣,我們使用webpack來打包解決方案。使用加載器,我們可以在代碼中替換我們的配置設置。我們最終使用了一個簡單的字符串替換加載器(string-replace-webpack-plugin),因爲env變量不適用於此解決方案。

+0

在推向產品之前,您是否正在進行任何類型的捆綁?使用browserify或webpack或類似的東西? – rossipedia

+0

是的。我們正在使用webpack,儘管我還沒有完全理解它是如何工作的。 – mathan

回答

1

你所描述的通常稱爲環境變量。您通常爲您的應用程序開發或運行的每個上下文維護一組特定的環境變量。

例如,您可能有一個APP_HOST環境變量,在本地計算機上設置的環境變量可能與在服務器上設置的環境變量不同。

服務器上運行可以直接讀取環境變量,但由於反應。在客戶端的瀏覽器中運行的應用程序大多數程序,你必須讓他們知道相應的環境變量,他們上桌之前。

要做到這一點,最簡單的方法是用envify

Envify將允許您從您的前端代碼中引用的環境變量。

// app.js 
const host = process.env.APP_HOST; 
fetch(host); 

Envify是一個Browserify轉換,這意味着您需要通過像這樣的命令來運行您的代碼。

# define some environment variables 
APP_HOST="localhost:3000" 
# build the code 
browserify app.js -t envify -o bundle.js 

什麼出來的另一面是:

// bundle.js 
var host = "localhost:3000"; 
fetch(host); 

如果您使用的WebPack,有在envify-loader形式類似的替代品。

+0

謝謝。原來我沒有完全理解webpack。使用字符串替換器加載器,我們可以交換我們的配置設置。在我們的例子中env。變量不適合,但如果他們的解決方案是完美的。 (基本上相同,但使用不同的裝載機) – mathan