2012-12-18 61 views
3

我正在基於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文件夾?

回答

0

據我所知,你已經在使用require.js優化工具「r.js」。

r.js具有優化代碼的兩種方法,第一種方法是,當你想要優化單個模塊和它的依賴到單個的JS文件,第二種方法是優化整個項目/多個模塊。

您可以通過使用r.js build config中的「modules」選項來實現該功能。 Take a look here.