如何根据环境将变量注入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 <%= ..%>
});

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