Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

RequireJs: Use autoloading-deps with shim

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?

like image 505
dev.pus Avatar asked Jul 09 '12 05:07

dev.pus


People also ask

What is RequireJS shim?

As per RequireJS API documentation, shim lets you. Configure the dependencies, exports, and custom initialization for older, traditional "browser globals" scripts that do not use define() to declare the dependencies and set a module value.

What is the main purpose of the RequireJS framework?

RequireJS is a JavaScript file and module loader. It improves perceived page load times because it allows JavaScript to load in the background. In particular, it enables asynchronous JavaScript loading.

Should I use RequireJS?

Generally you only use RequireJS in its loading form during development. Once the site is done and ready for deployment, you minify the code. The advantage here is RequireJS knows exactly what your dependencies are, and thus can easily minify the code in the correct order.

What is shim in jQuery?

jQuery uses shim configuration to define the dependencies for jQuery plugins and set a module value by declaring dependencies.


2 Answers

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) {
    }
);
like image 142
Mihai Alexandru Bîrsan Avatar answered Sep 27 '22 20:09

Mihai Alexandru Bîrsan


Remove the $, _, Backbone-parameters from the require-function where you extend the Router. The shims export global values, so there is no need to reference to them in require or define calls like you do for regular dependencies.

Passing them as parameters messes with the global variables and most likely results in them being undefined.

like image 39
jakee Avatar answered Sep 27 '22 18:09

jakee