如何使用 requirejs 加载特定于环境的配置？

Question

我正在制作一个单页应用程序并使用带有 requirejs 的主干。现在我想根据环境变量包含不同的配置。我不知道该怎么做以及最佳做法是什么。

我有三个不同的配置文件：

config.js : 这保持通用配置。

config.dev.js ：这会保留开发环境的特定配置

config.production.js ：这会保留生产特定的配置

我正在从特定于环境的模型扩展配置模型（在 config.js 中），并且我需要来自其他模块的配置模型。 这工作正常，但同时下载开发和生产配置文件。我只想加载 config.dev.js 或 config.production.js 而不是两者。

// config.js
define([
  'backbone',
  'modules/config/config.dev',
  'modules/config/config.production'
], function(Backbone, DevConfig, ProdConfig) {

    // Select environment model
    EnvConfig = (ENV == 'dev') ? DevConfig : ProdConfig;

    var ConfigModel = EnvConfig.extend({
        // Extending attributes.
        defaults: _.extend({
           foo : 'bar'
        }, EnvConfig.prototype.defaults)

    });

    return new ConfigModel();

});

在其他模块中，我使用 Config 如下样式：

define([
    'backbone',
    'modules/config/config'
], function(Backbone, Config) {

    var ProfileModel = Backbone.Model.extend({
        urlRoot: Config.get('apiRoot') + '/profiles'

        ...
    });

    return ProfileModel;
});

如何加载开发或生产特定配置文件之一，而不是两者？

Answer 1

我不确定ENV 变量的来源，但假设它只是一个全局变量，您可以这样做：

index.html

<script type="text/javascript">
    // adding it here so the example works on its own
    window.ENV = 'production'; // or 'dev'
    // this will be added to RequireJS configuration
    var require = {
      paths: {
        // 'env-config' will be an alias for actual file name
        'env-config': 'config.' + window.ENV
      }
    };
</script>
<script data-main="scripts/main" src="scripts/requirejs.js"></script>

config.dev.js：

define({
    'env': 'development!'
}); 

config.production.js：

define({
    'env': 'production!'
}); 

ma​​in.js：

require(['config', 'env-config'], function(conf, envConfig) {
   console.log('The environment is: ', envConfig.env);
});