使用npm編譯時的環境配置

有幾篇博客文章解釋了爲什麼從簡單的npm轉換到grunt或gulp到建築是一個好主意，例如Cory Hourse或這個由Keith Cirkle。這些博客文章沒有解釋的一件事是我如何輕鬆地進行環境配置。例如，一個常見的要求是擁有不同的REST API位置。在開發過程中，服務器可能在localhost:8080上運行，但在生產時應該通過相對URL訪問，例如/api或/rest/api，並且端口或協議在開發和生產中有所不同。使用npm編譯時的環境配置

有幾種解決方案。例如grunt支持像<% %>和<%= %>這樣的模板字符串，並且有像這個問題中的grunt或gulp插件關於grunt-ng-config。這些解決方案是特定於Angular（我正在使用），但我沒有必要尋找一個AngularJS特定的解決方案。

我也知道angular-environment插件，但據我所見，這是在運行時配置，我正在尋找可以在構建時做到這一點的東西。

所以我要尋找的東西，讓我要麼通過更換一些模板串或產生一些變數，我可以在運行時讀的JavaScript文件來配置我在構建時應用。

一個要求是它應該與操作系統無關。所以我不想使用UNIX的特定工具（如sed）來重寫文件。由於變量擴展不同（例如%與$），解決方案不應依賴於環境變量。

有沒有現有的解決方案或最佳做法呢？

來源

2016-04-15 lanoxx

由於不同的變量擴展（例如％和$）的解決方案應該不依賴於環境變量

這切斷您的最佳解決方案。爲什麼不依賴環境變量？節點提供

process.env

訪問env變量。你可以創建自定義的使用process.env的gulp/grunt任務，而不是你引用的「不同的變量擴展」。

可以使用，例如，玉模板在構建時通過的環境變量的值到你的HTML。這將生成您的index.html作爲生成過程的一部分，並基於env vars添加相關的類。

例如，根據的環境變量的值，你可以在HTML標籤設置一個類。

這可能反映了客戶。

然後你可以有一些CSS

.customer1 .myimage { 
    background-image: url("customer1.png"); 
} 

.customer2 .myimage { 
    background-image: url("customer2.png"); 
}

，或者你可以使用JavaScript來檢測加在生成過程中頭的類。

來源

2016-04-15 17:36:33 danday74

據我所知，環境變量是依賴於平臺的，所以windows上的'％'（批處理）和Unix上的$（bash）。你有建議如何解決？玉的建議看起來很有趣，我會看看是否可以使用它。 – lanoxx

把手也適合服務器端我相信，你可以使用它純HTML格式 – danday74

％和$的東西，你是指閱讀變量？不能只使用process.env.envvarname來讀取它們，其中envvarname是var的名稱？ – danday74

使用npm編譯時的環境配置

回答

相關問題