Load files in specific order with RequireJs

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

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"]); });