javascript - 缩小之后加载的 RequireJS 模块

Question

我正在 RequireJS 和 .NET 后端构建一个中型单页 Web 应用程序，它为我处理 Ajax“页面更改”。 每次第一次加载页面时，模块 Controller (JS) 都会加载相应的 JS 模块。

我在 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 配置文件以自动缩小文件夹中的每个文件并将它们保存在相应的文件夹中？

Answer 1

据我了解，您已经在使用 require.js 优化工具“r.js”。

r.js 有两种优化代码的方法，第一种方法是当你想优化单个模块及其依赖到单个 js 文件时，第二种方法是优化整个项目/多个模块。

您可以通过在 r.js 构建配置中使用“模块”选项来实现。 Take a look here.