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，它是客户端的，我们如何根据环境选择哪个网址，而无需在代码中查找和替换，或者采用一些hacky方式。人们通常做些什么来克服这类问题？

只是旁注，我正在使用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 <%= ..%>
});

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

如何根据环境将变量注入Javascript？

2 个答案: