CODEWITHSUNDEEP
requirejs
Cyril N.
Cyril N.

Reputation: 39859

Load files in specific order with RequireJs

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.

Upvotes: 23

Views: 29693

Answers (3)

fantactuka
fantactuka

Reputation: 3334

There's a possible solution to build a queue for modules to be loaded. In this case all modules will be loaded one-by-one in exact order:

var requireQueue = function(modules, callback) {
  function load(queue, results) {
    if (queue.length) {
      require([queue.shift()], function(result) {
        results.push(result);
        load(queue, results);
      });
    } else {
      callback.apply(null, results);
    }
  }

  load(modules, []);
};

requireQueue([
  'app',
  'apps/home/initialize',
  'apps/entities/initialize',
  'apps/cti/initialize'
], function(App) {
  App.start();
});

Upvotes: 21

tomconnors
tomconnors

Reputation: 945

Ran into a similar problem today - we have bootstrapped data that we want to make sure is loaded before anything else, and that the module exposing that data is set up before any other modules are evaluated.

The easiest solution I found to force load order is to simply require a module be loaded before continuing on with app initialization:

require(["bootstrapped-data-setup", "some-other-init-code"], function(){
    require(["main-app-initializer"]);
});

Upvotes: 26

ekuusela
ekuusela

Reputation: 5282

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.

Upvotes: 15

Related Questions