Question

I’m having a Backbone application using Require.js for AMD. I’m loading jQuery from Google CDN, but after build, the path to jQuery seems to be broken.

The build is happening without any trouble or error. But once I use the build version, jQuery is added to page using this URL:

http://example.com/assets/js/jquery.js

Instead of the CDN url. I feel this is due to the fact that my path config is lost and that require a dependency on “jquery” isn’t taken as a reference to the path but as a normal call to a script.

Here’s my main file:

main.js

require.config({
    baseUrl: '/assets/js/',
    paths: {
            use: 'libs/use-0.2.0.min',
            jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min',
            underscore: 'libs/underscore-1.3.1.min',
            backbone: 'libs/backbone-0.9.2.min'
},
    use: {
            'underscore': {
                    attach: '_'
            },
            'backbone': {
                    deps: ['use!underscore', 'jquery'],
                    attach: function(_, $) {
                            return Backbone;
                    }
            }
    }
});

require(['views/app'], function(AppView){
    var app_view = new AppView();
});

app.build.js

({
appDir: "../../www",
baseUrl: "assets/js",
dir: "../../build",
optimizeCss: "none",
optimize: "uglify",
findNestedDependencies: true,
preserveLicenseComments: false,
paths: {
    use: 'libs/use-0.2.0.min',
    jquery: 'empty:',
    underscore: 'libs/underscore-1.3.1.min',
    backbone: 'libs/backbone-0.9.2.min'
},
modules: [
    {
        name: "main",
        include: ["views/app"],
        exclude: ["jquery"]
    }
],
use: {
    'underscore': {
        attach: '_'
    },
    'backbone': {
        deps: ['use!underscore', 'jquery'],
        attach: function(_, $) {
            return Backbone;
        }
    }
}
})

(and I’m using use.js for loading non-AMD plugins)

Answer 1

I would first upgrade to the lastest RequireJS and check out this link:

http://requirejs.org/docs/optimization.html#empty

And the notes on CDN in this section:

http://requirejs.org/docs/api.html#config

An example of a local fallback for require.config( { paths : {} } ):

The above pattern for detecting a load failure, undef()ing a module, modifying paths and reloading is a common enough request that there is also a shorthand for it. The paths config allows array values:

requirejs.config( {
    // To get timely, correct error triggers in IE, 
    // force a define/shim exports check.
    enforceDefine : true,
    paths : {
        jquery : [
            '//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min',
            //If the CDN location fails, load from this location
            'lib/jquery'
        ]
        // etc.
    }
} );