web-dev-qa-db-ja.com

RequireJS：CDNが失敗した場合のローカルフォールバック

私のバックボーンアプリでは、ファイルを配信するCDNが失敗した場合に備えて、必要なファイルごとにフォールバックを提供する必要があります。

私はrequire.onErrorを次のように上書きしてみました：

require.onError = function (err) {
    if (err.requireType === 'timeout') {
        var url = err.requireModules;

        if (!!~url.indexOf("jquery/"))
            console.warn("CDN timed out, falling back to local jQuery.js")
            require(["libs/jquery"]);
            return;
        if (!!~url.indexOf("jqueryui/"))
            console.warn("CDN timed out, falling back to local jQueryUI.js")
            require(["libs/jqueryui"]);
            return;
        if (!!~url.indexOf("underscore"))
            console.warn("CDN timed out, falling back to local underscore.js")
            require(["libs/underscore"]);
            return;
        if (!!~url.indexOf("backbone"))
            console.warn("CDN timed out, falling back to local backbone.js")
            require(["libs/backbone"]);
            return;
    }
}

問題は、これが非同期でフォールバックファイルをロードすることです。 order!プラグインを使用する元のrequireステートメントと同様に、これらのファイルを順番にロードする必要があります。

オーバーライドされたonErrorを使用すると、CDNがロードに失敗すると、フォールバックロードが開始されますが、待機されません。スクリプトは依存関係に基づいてロードされるように注文されているため、これは問題を引き起こします。 CDNに依存する、元のrequireステートメントを次に示します。

require([
    "order!http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js",
    "order!http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js",
    "order!http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js",
    "order!http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js",
    "order!utils/date",
    "order!core/core",
    "order!core/errors",
    "order!core/constants"
], function() {
    ...
}
javascriptrequirejscdn
29
Austin

使用しているRequireJSのバージョンは何ですか？ jQueryのフォールバックを構成内のパスとして構成し、それを必要とする他のモジュールへの依存関係としてjQueryをセットアップすることをお勧めします。 〜> 2.0を使用している場合、（テストされていない）のようなもの：

// in your requirejs config
requirejs.config({
    //To get timely, correct error triggers in IE, force a define/shim exports 
    // check.
    enforceDefine: true,
    paths: {
        jquery: [
            'http://somecdn.com/jquery.min', // your cdn
            'lib/jquery' // your fallback
        ],
        jqueryui: "http://somecdn.com/jquery-ui.min.js"
    },
    shim: {
      jqueryui: ['jquery']
    }
});

// then in your requires
require([jquery, jqueryui, foo, bar], function($) {
    // stuff
});

彼らはそれを行う方法について話します wikiで 。 v2.xを使用していない場合は、ここでもそれを処理する方法があります。

すべてのモジュールが独自の依存関係を指定するように構成されている場合は、order!ディレクティブについても心配する必要はありません。

58
numbers1311407

RequireJS 2.x.xで提供される問題の解決策を見つけました。このソリューションに対する需要があったため、RequireJSはpathsオブジェクトを設定に追加しました。これにより、CDNに障害が発生した場合のフォールバック機能が提供されます。

order!プラグインはRequire 2.0で廃止されたため、依存関係を定義するためにshimオブジェクトを使用する必要もありました。それは実際にはかなり興味深いアイデアです。

これが私の新しいrequire.configです。

require.config({
    urlArgs: "ts="+new Date().getTime(), // disable caching - remove in production
    paths: {
        jquery: [
            "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min",
            "libs/jquery"
        ],
        jqueryui: [
            "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min",
            "libs/jqueryui"
        ],
        underscore: [
            "http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min",
            "libs/underscore"
        ],
        backbone: [
            "http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min",
            "libs/backbone"
        ]
    },
    shim: {
        'jqueryui': ['jquery'],
        'underscore': ['jquery'],
        'backbone': ['underscore'],
        'core/core': ['underscore'],
        'core/errors': ['core/core'],
        'core/constants': ['core/core']
    }
});
19
Austin