12

systemjsのドキュメントを見ると、複数の依存関係を同時にロードする例が見つかりません。私は次のようなAPIを期待しています...

System.import(['jquery.js','underscore.js']).then(function($, _) {
    // ready to go with both jQuery and Underscore...
});

プロミスを使用してすべての依存関係を並行してロードし、すべてが完了したらコールバックを実行することを期待しています。これは可能ですか？そうでない場合、この機能が実装されていない理由はありますか?

4

4 に答える 4

15

これは Promise.all で可能です:

Promise.all([
    System.import('jquery'),
    System.import('underscore')
]).then(function(modules) {
    var jquery = modules[0];
    var underscore = modules[1];
});

でも見ての通りダサい。あなたの例のような配列を仕様レベルで許可することを検討するという話がありますが、これは仕様ローダーであるため、モジュール仕様に含める必要があります。

より良い代替手段は、アプリケーションのエントリ ポイントを 1 つだけにして、app.jsその負荷依存関係を持たせることです。

于 2014-03-22T19:04:26.047 に答える
3

おそらく、最短かつ最も乾燥した方法は、 に a を適用し、[].map()そのSystem.import結果を分解することです。

Promise.all([
    'jquery',
    'underscore'
].map(url => System.import(url))).then(function ([$, _]) {
    // do stuff with results
});

これを書いている時点では、 Destructuringはまだトランスパイルする必要があることに注意してください。

トランスパイルしたくない場合は、独自のラッパーとスプレッド スクリプトを作成できます。

function spread(callback) {
    return function (args) {
        return callback.apply(undefined, args);
    }
}
function import(deps) {
    return Promise.all(deps.map(function (url) {return System.import(url);}));
}

次のようにロードします。

import(['jquery', 'underscore']).then(spread(function ($, _) { /*...*/ }));
于 2015-07-20T20:09:31.990 に答える
3

これは私が行う方法です。注意してください。テストされていません。

var SystemImport = System.import;
System.import = function (name, options) {
    if (Object.prototype.toString.call(name) !== '[object Array]')
        return SystemImport.apply(this, arguments);
    var self = this,
        imports = Promise.all(name.map(function (name) {
            return SystemImport.call(self, name); // should i pass options ?
        }));
    return {
        then: function (onfulfill, onreject) {
            return imports.then(function (dependencies) {
                return onfulfill.apply(null, dependencies);
            }, onreject);
        }
    };
};

このスニペットはSystem.import、それ自体のラップされたバージョンに置き換えられ、依存関係の配列を使用できるようになります。

「thennable」オブジェクトを返します。これは、準拠した promise 実装で正常に機能するはずです。

メソッドは Promise A+ 仕様にないため.spread、これは私が考えることができる最も仕様に準拠した方法です...

于 2015-02-06T23:00:44.360 に答える
0

私は同じものを探していました。現在、これを行うために Bluebird、Promise.all、および Promise.spread を使用しています。それは私が書くことができるのと同じくらい「いい」です。

Promise.all([
  SystemJS.import('jquery'),
  SystemJS.import('axios')
]).spread(function(jquery, axios){
  return jquery < axios;
});

于 2016-07-08T15:07:12.447 に答える