RequireJS: Local fallback for if CDN fails

Question

In my backbone app, I need to provide a fallback for each required file, in the case that the CDN that delivers them fails.

I have tried overwriting require.on

Answer 1

I have found a solution to the problem provided in RequireJS 2.x.x. There was a demand for this solution, so in turn, RequireJS added a paths object to their config. This provides fallback functionality for CDNs, should they fail.

It should also be noted that the order! plugin has been deprecated in Require 2.0, so I also needed to make use of the shim object to define dependencies. It's actually a pretty interesting idea.

Here is my new 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']
    }
});

Answer 2

What version of RequireJS are you using? It seems you might want to configure jQuery's fallback as a path in your config, then set up jQuery as a dependency on the other modules that need it. If you're using ~> 2.0, something like (untested):

// 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
});

They talk about how to do it in the wiki. If you are not using v2.x, there is a method for handling that here too.

If all the modules are configured to specify their own dependencies, you shouldn't need to worry about the order! directives either.