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

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

2 个答案: