如何根據環境將變量注入Javascript？

Question

我正在構建一個javascript應用程序，基本上我有三個不同的環境。 本地，CI和QA環境。 我的后端服務將始終單獨部署到我的前端應用程序。 因此，大多數Ajax調用都將是CORS。 我們已經解決了這個問題。 但是，在我的代碼中有這樣的事情。

jQuery.ajax({"url":"http://www.somecompany.com/api"});

因此，問題將出在CI和QA環境中，ajax調用將訪問http://ci.somecompany.com/api和http://qa.somecompany.com/api甚至http：//test.somecompany。 com / api 。 如何根據正在運行的環境注入這些變量。 如果是Java或.NET，我可以使用YAML，一切都會好的。 但是作為Javascript，它是客戶端，我們如何根據環境選擇要命中的url，而無需在代碼中尋找或替換或采用某些駭人聽聞的方式。 人們通常會如何克服此類問題？

只是一點說明，我正在使用Knockout.js

Answer 1

如果使用grunt構建應用程序，則使用grunt-variablize 。 將您的配置放入resources/config.json

{
  "test": {
    "apiUrl": "http://test.somecompany.com/api"
  },
  "prod": {
    "apiUrl": "http://www.somecompany.com/api"
  }
}

配置可變任務：

grunt.initConfig({
  /* ... */
  variablize: {
    target: {
      input: "resources/Config.json",
      output: "dist/Config.js",
      variable: "Config",
      property: grunt.option('profile')
    }
  }
});

運行grunt --profile=test ，並以這種方式使用它：

$(document).ready(function(){
  var myURL = Config.apiUrl;
}); 

Answer 2

這可能不是最好的方法。 但這有效。 :)

您可以使用服務器端代碼本身將值設置為javascript變量。

$(document).ready(function(){
   var myURL = "<%=urlFromServer%>"; //Assuming you are using JSP <%= ..%>
});

該全局變量保存值。 您可以在需要的任何地方重新使用該變量。