0

私は TypeScript プロジェクトに requirejs と AMD モジュールを使用しています。現時点では 20 の異なるソース ファイルがあり、大幅に増加する可能性があります。これはすべて機能しますが、20 個のファイルすべてを読み込むのは非常に遅いため、ファイルを縮小した方がよいでしょう。しかし、requirejs はすべてをロードしたいので、モジュールを別々のファイルに保存する必要があるようです。生成された module1.js と module2.js ファイルを 1 つに縮小することはできないと思います。ファイルを作成し、一部のコードを変更せずに requirejs でそれらをロードします。（これについては私が間違っている可能性があります。）

これを行うもう 1 つの方法は、requirejs が提供する r.js ファイルを使用して、requirejs を満足させる方法ですべての異なるファイルを一緒にマージすることです。しかし、r.js には node.js が必要です。他に方法があれば、ビルド プロセスでそれを依存関係として導入したくありません。

それでは、これに飛び込んでさまざまなソリューションを試す前に、他の人々は大きなプロジェクトでこれにどのように取り組んでいますか?

4

2 に答える 2

1

あなたができることは、縮小されたビルドで使用する薄い RequireJS shim を実装することです。使用したい RequireJS API の量にもよりますが、ごくわずかで済みます。簡単にするために、名前付きモジュールを使用することもできます。

たとえば、開発中に RequireJS を使用してモジュールをロードするとします。縮小ビルドを作成する場合は、縮小ファイルに単純なローダーを含めるだけです。

次のようなファイル app.js、foo.js、および bar.js がある場合:

//from app.js  
define("app", ["foo", "bar"], function(foo, bar) { 
    return {
        run: function() { alert(foo + bar); }
    }
});

//from foo.js
define("foo", [], function() { 
    return "Hello ";
});

//from bar.js
define("bar", [], function() { 
    return "World!";
});

そして、それらすべてのファイルを一緒に縮小するとしましょう。ファイルの先頭に、次の shim を含めます。

//from your-require-shim.js
(function(exports) {

    var modules = {};

    var define  = function(name, dependencies, func) { 
        modules[name] = {
            name:name,
            dependencies:dependencies,
            func:func,
            result:undefined
        };
    };

    var require = function(name) {

        var module = modules[name];

        //if we have cached result -> return
        if(module.result) { return module.result; }

        var deps = [];
        //resolve all dependencies
        for(var i=0,len=module.dependencies.length;i<len;i++) { 
            var depName = module.dependencies[i];
            var dep = modules[depName];
            if(!dep.result) { 
                //resolve dependency
                require(depName);
            }
            deps.push(dep.result);
        }

        module.result = module.func.apply(this, deps );

        return module.result;
    };
    exports.require = require;
    exports.define = define;
}(window));

そして app.js で定義されたモジュールを実行します

require("app").run();

このフィドルのように。

もちろん大まかなPoCですが、意味はわかると思います。

于 2012-12-11T20:24:06.580 に答える
0

ASP.NET MVC 4 を使用している場合は、一連のファイルまたはフォルダーで本番環境にデプロイするときにすべてを縮小するバンドルを作成できます。バンドルの詳細については、こちらをご覧ください。

于 2012-12-12T02:21:04.257 に答える