javascript - 如何使用 RequireJS 确定系统环境变量

Question

在过去开发客户端应用程序时，我总是使用某种服务器端应用程序来打包和提供 JavaScript。这使我能够将环境变量传递给在生产环境和开发环境之间变化的客户端。

我正在使用 RequireJS 开发一个纯客户端应用程序，并使用静态 Web 服务器为其提供服务。某些配置会根据应用程序是在本地开发还是在生产中运行（即，它将向其发出 AJAX 请求的服务器的 URL）而有所不同。

使用 RequireJS 确定当前环境的最佳方法是什么？

Answer 1

我发现的另一种方法是直接使用 RequireJS 配置。从 RequireJS 1.1 开始，可以包含任意配置值。在我的主要配置中，我设置env: 'development了 ' 并在构建期间（使用 r.js）我将值设置为'production'.

我创建了一个config包含两个文件的目录：development.js和production.js. 加载正确的文件可以使用 Require 插件（我们称之为env）：

define(function() {

    return {
        load: function(name, req, load, config) {
            if (!config.env || config.isBuild) {
                config.env = 'production';
            }

            var path = name + '/' + config.env;
            req([path], function(mod) {
                load(mod);
            });
        }
    };

});

这是我如何使用它：

var config = require('env!config');

Answer 2

// you can store two configs in two separate files
// FILE NAME: config-development.json:
// FILE CONTENT: {"url":"http://localhost:8000"}
// FILE NAME: config-production.json:
// FILE CONTENT: {"url":"http://google.com"}

// then load correct one and save it to variable
var config = getConfig();

function getConfig() {
  // if you pass ?dev=true to your url address default config that will be used is `config-development`
  // otherwise - `config-production`
  var configName = getParameterByName('dev', false) ? 'config-development' : 'config-production';

  window._config || (window._config = {});

  // for production version you should concat your config with main script or put it above main script
  // inside global `_config` variable for example
  if (window._config[configName]) return window._config[configName];

  // for development version you can just make an ajax call to get the config
  $.ajax({
    url : 'app/' + configName + '.json',
    async : false,
    success : function(response) {
      window._config[configName] = response;
    }
  });
  return window._config[configName];
}

// helper
function getParameterByName(name, defaults, location) {
  location = location || window.location.href;
  name = name.replace(/[\[]/,'\\\[').replace(/[\]]/,'\\\]');
  var result = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(location);
  return result === null ? defaults : decodeURIComponent(result[1].replace(/\+/g, ' '));
}

// usage
console.log(config.url); // `http://localhost:8000` for development env
                         // `http://google.` for production env