2013-01-21 116 views
3

在過去開發客戶端應用程序時,我總是使用某種服務器端應用程序來打包和提供JavaScript。這使我可以將環境變量傳遞給生產環境和開發環境之間不同的客戶端。如何使用RequireJS確定系統環境變量

我正在使用RequireJS處理純客戶端應用程序並將其與靜態Web服務器一起提供。某些配置根據應用是在開發中還是在生產中本地運行(即將發出AJAX請求的服務器的URL)而有所不同。

使用RequireJS確定當前環境的最佳方法是什麼?

回答

1
// 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 
+0

Thanks-這似乎是一個不錯的方法。也許即使只是在localStorage中手動設置一個'env'變量也行得通(不需要記住每次都在URL中追加dev = true)。 – scttnlsn

3

我發現的另一種方法是直接使用RequireJS配置。自RequireJS 1.1以來,可以包含任意的配置值。在我的主要配置中,我設置了env: 'development',並在構建期間(使用r.js)將值設置爲'production'

我創建了一個config目錄,其中包含兩個文件:development.jsproduction.js。加載正確的文件可以用插件的要求來完成(我們就叫它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'); 
相關問題