RequireJs: Use autoloading-deps with shim

Question

I have defined a RequireJs configuration which defines paths and shims:

require.config({
    // define application bootstrap
    deps: ["main"],

    // define library shortcuts
    paths: {
        app: "app"
        , jquery: "lib/jquery"
        , underscore: "lib/underscore"
        , backbone: "lib/backbone"
        , bootstrap: "lib/bootstrap"
    },

    // define library dependencies
    shim: {
        jquery: {
            exports: "$"
        },
        underscore: {
            exports: "_"
        },
        backbone: {
            deps: ["underscore", "jquery"],
            exports: "Backbone"
        },
        bootstrap: {
            deps: ['jquery'],
            exports: "bootstrap"
        },

        // main application
        app: {
            deps: ["backbone"],
            exports: "App"
        }
    }
});

As you see the last "shim" declaration should make it able to access backbone (and it deps) when I load the main App(-namespace).

In reality this doesn't work:

require(["app"], function($, _, Backbone, App){
    app.router = new Backbone.Router.extend({
        // routing and route actions
    });
});

What makes me wondering is that in the "backbone-boilderplate"-project, Backbone (and its deps) are available this way: https://github.com/tbranyen/backbone-boilerplate/blob/master/app/main.js

The not even had to define this in the function.

So what am I doing wrong?

try to remove the $, _, Backbone from the require-function where you extend the router. I think that the shims work so that they just export global values that you don't need to add to any calls — jakee
Hey, that works great :) I even can drop the "backbone" keyword in the deps-array of the define function although this doesn't work in every module... Would you create an answer so I can close the question? — dev.pus

Mihai Alexandru Bîrsan Mihai Alexandru Bîrsan · Accepted Answer · 2013-01-22T11:02:52

From what I've read, requirejs passes arguments based on what you specify in the array... Thus your call should look like this:

require(["app"], function (App) { // less arguments
});

Or like this:

require(
    ["jquery", "underscore", "backbone", "app"], // more deps
    function ($, _, Backbone, App) {
    }
);

RequireJs: Use autoloading-deps with shim

2 Answers