3

私は RequireJS と .NET バックエンドに基づいて、Ajax の「ページ変更」を処理する中規模のシングル ページ WebApp を構築しています。ページが初めて読み込まれるたびに、モジュール コントローラー (JS) が対応する JS モジュールを読み込みます。

私は SublimeText 2 で作業しており、保存時に JS をコンパイルして 1 つのファイルに縮小する構成を構築しました。構成は、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 構成ファイルを変更して、フォルダー内のすべてのファイルを自動的に縮小し、対応するフォルダーに保存することはできますか?

4

1 に答える 1

0

お分かりのように、すでにrequire.js最適化ツール「r.js」をご利用されていますね。

r.js には、コードを最適化する 2 つの方法があります。最初の方法は、単一のモジュールとその依存関係を単一の js ファイルに最適化する場合であり、2 番目の方法は、プロジェクト全体/複数のモジュールを最適化することです。

r.jsビルド構成で「モジュール」オプションを使用することで、それを実現できます。ここを見てください。

于 2014-10-11T15:51:54.460 に答える