0

grunt-contrib-requirejs の Gruntfile.js では、1 つのタスクしか登録できず、1 つの出力ファイル、つまり home_scripts.pack.js しか持つことができません。ただし、さまざまな「インクルード」基準に基づいて、必要な数の出力ファイルが必要です。たとえば、home_scripts.pack.js、checkout_scripts.pack.js、product_scripts.pack.js などです。このようにして、各ページは以下を使用する JS のみをロードします。

これは無効ですが、似たようなことをしたいです:

requirejs: {
    compile1: {
        options: {
            baseUrl: 'C:/project/js',
            mainConfigFile: 'C:/project/js/app.js',
            name: 'app',             
            paths: {
                requireLib: 'C:/project/js/require.min' 
            },
            *include: ['requireLib', 'home_page_internal.js'],*
            *out: 'C:/project/js/home_scripts.pack.js'*
            }
        }
    },
    compile2: {
        options: {
            baseUrl: 'C:/project/js',
            mainConfigFile: 'C:/project/js/app.js',
            name: 'app',             
            paths: {
                requireLib: 'C:/project/js/require.min' 
            },
            *include: ['requireLib', 'checkout_internal.js'],*
            *out: 'C:/project/js/checkout_scripts.pack.js'*
            }
        }
    }
}

上記のアスタリスクが付いたコードは、ページごとに異なる出力ファイルを生成したいコードです。ただし、grunt を使用して requireJS オプティマイザーを介して多数の JS プラグイン ファイルとモジュールを生成およびロードするより効率的な方法がある場合は、提案をお待ちしています。

ありがとう、

4

1 に答える 1

1

RequireJS Multipage Exampleを見る必要があります

ページの必要性に基づいて連結を使用する方法を示しています。

したがって、オプションは次のようになります。

requirejs : {
  compile : {
    "baseUrl": "app",
    "dir": "app/built",
    "include": "main.js",
    "paths": {
        "angular": "bower_components/angular/angular.min",
        "css" : "bower_components/require-css/css.min",
        "text" : "bower_components/requirejs-text/text",
        "css-builder" : "bower_components/require-css/css-builder",
        "normalize" : "bower_components/require-css/normalize"
    },
    "modules" : [
        {
            "name" : "app",
            "include" : ["text", "css"]
        },
        {
            "name" : "modules/module1",
            "include" : [],
            "exclude" : ["app"]
        },
        {
            "name" : "modules/module2",
            "include" : [],
            "exclude" : ["app"]
        },
        {
            "name" : "modules/module3",
            "include" : [],
            "exclude" : ["app"]
        }    ]
    }
}

他の構成を無視して、モジュールの構成を確認します。これは、複数の AMD モジュールを使用する配列であり、それぞれが独自のファイルに連結されます。

SPA の場合、後続のモジュールに含めたくない共通モジュールを除外する必要がある場合。この場合app、モジュールにはすべてのライブラリ層が組み込まれているため、後続のモジュールから除外されます。

于 2015-01-19T14:15:05.817 に答える