我正在基於RequireJS和.NET後端構建一箇中等大小的單頁WebApp,後者爲我處理Ajax「頁面更改」。 每次頁面首次加載時,模塊控制器(JS)加載相應的JS模塊。Minify RequireJS模塊之後加載
我在SublimeText 2中工作,並構建了一個配置文件,將我的JS編譯和縮小到一個文件中。該配置保存在一個require.config調用中。
對於RequireJS可追蹤的所有依賴關係,此工作正常。不過,我想改善構建過程以縮小模塊(最好是文件夾),這些模塊不是直接需要的,可以單獨保存在另一個文件夾中。
這裏是我的RequireJS配置:
require.config({
appDir: ''
, paths: {
'jquery': [
'//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min'
, 'lib/jquery'
]
, 'underscore': [
'//raw.github.com/documentcloud/underscore/master/underscore-min'
, 'lib/underscore'
]
, 'modernizr': 'lib/modernizr'
, 'jquery-ui': 'lib/jquery-ui'
}
, shim: {
'jquery-ui': { deps: ['jquery'] }
, 'lib/jquery-tablesorter': { deps: ['jquery'], exports: 'jQuery.fn.tablesorter' }
, 'underscore': { exports: '_' }
}
, exclude: ['jquery', 'jquery-ui', 'underscore']
, name: 'main'
, out: '../min/main.js'
, optimize: 'none'
});
require(['jquery', 'modules/ModuleController', 'jquery-ui', 'util/Log'],
function($, Controller) {
// jQuery was extended by jqueryUI
// window.log is now accessible
$(function(){
Controller.setup({
objGlobal: window.RecruitingApp
});
})
});
我的文件夾結構如下所示:
/AppRoot
/dev
/lib
/modules
/util
build.js
main.js
/min
/lib
/* here i'd like to have a generated modules folder with the minified modules */
main.js
模塊加載器看起來是這樣的:
define(['jquery', 'underscore'], function($, _) {
var i = {
};
var o = {
objGlobal: null
};
var objModules = {};
var setup = function(options) {
o = $.extend(o, options);
o.objGlobal.moduleListener = function(module) {
require(['modules/'+module+''], function(Module){
if(objModules.module && _.isFunction(objModules.module.destroy)) {
objModules.module.destroy();
}
o.objGlobal.currentModule = module;
objModules.module = Module;
Module.setup();
});
};
o.objGlobal.moduleListener(o.objGlobal.currentModule);
}
// method interface
i.setup = setup;
return i;
});
是否有可能改變RequireJS配置文件自動縮小文件夾中的每個文件並將其保存到對應文件夾中g文件夾?