Question

I’m new to RequireJS and I’m stuck with the loading order.

I have a global project configuration that I need to be loaded before the modules located in js/app/*.

Here’s my struture :

index.html
config.js
js/
    require.js
    app/
        login.js
    lib/
        bootstrap-2.0.4.min.js

Here’s the config.js file :

var Project = {
    'server': {
        'host': '127.0.0.1',
        'port': 8080
    },
    'history': 10,      // Number of query kept in the local storage history
    'lang': 'en',       // For future use
};

And here’s my requirejs file (app.js) :

requirejs.config({
    //By default load any module IDs from js/lib
    baseUrl: 'js/lib',
    //except, if the module ID starts with "app",
    //load it from the js/app directory. paths
    //config is relative to the baseUrl, and
    //never includes a ".js" extension since
    //the paths config could be for a directory.
    paths: {
        bootstrap: '../lib/bootstrap-2.0.4.min',
        app: '../app',
    },
    shim: {
        'app': {
            deps: ['../../config'],
            exports: function (a) {
                console.log ('loaded!');
                console.log (a);
            }
        } // Skual Config
    },
});

var modules = [];
modules.push('jquery');
modules.push('bootstrap');
modules.push('app/login');


// Start the main app logic.
requirejs(modules, function ($) {});

But sometimes, when I load the page, I have a "Project" is undefined, because login.js has been loaded BEFORE config.js.

How can I force config.js to be loaded at first, no matter what ?

Note: I saw order.js as a plugin for RequireJS but it’s apparently not supported since the v2, replaced by shim.

Answer 1

You won’t have to worry about the load order if you define your js files as AMD modules. (Or you can use the shim config if you can’t modify the config.js and login.js to call define).

config.js should look something like this:

define({project: {
    'server': {
        'host': '127.0.0.1',
        'port': 8080
    },
    'history': 10,      // Number of query kept in the local storage history
    'lang': 'en',       // For future use
}});

login.js:

define(['jquery', '../../config'], function($, config) {

    // here, config will be loaded
    console.log(config.project)

});

Again, shim config should only be used if calling define() inside the modules is not an option.