Search code examples
javascriptdependency-injectionrequirejsloaderamd

requirejs dependencies load order doesn't work


I have such a code:

requirejs.config({
    urlArgs: "bust=" + (new Date()).getTime(),
    paths: {
        mods: 'default',
        myFriend: 'myFriend',
        myCoworker: 'myCoworker'
    },
    shim: {
        mods: ['myFriend', 'myCoworker']
    }
});
require(['mods'], function (mods) {
    // something to do
});

and modules which are the dependencies:

myFriend.js

var mess = `<a really huge text, almost 200 Kbytes>`
console.log('This code is ran in the myFriend module...', {mess:mess});

myCoworker.js

console.log('This code is ran in the myCoworker module...');
var wrk = {
    name: 'John'
};

So I hope, that accordingly to shim is should always load myFriend.js (that is checked by console.output) before myCoworker.js. But it doesn't. The console output shows:

This code is run in the myCoworker module...

and then

This code is run in the myFriend module...

Probably I have missed something, but what?

The entire code is here: http://embed.plnkr.co/zjQhBdOJCgg8QuPZ5Q8A/


Solution

  • Your dealing with a fundamental misconception in how RequireJS works. We use shim for files that do not call define. Using shim makes it so that RequireJS will, so to speak, add a kind of "virtual define" to those files. The shim you show is equivalent to:

    define(['myFriend', 'myCoworker'], function (...) {...});
    

    The dependency list passed to a define or require call does not, in and of itself, specifies a loading order among the modules listed in the dependency list. The only thing the dependency list does is specify that the modules in the list must be loaded before calling the callback. That's all.

    If you want myFriend to load first, you need to make myCoworker dependent on it:

    shim: {
        mods: ['myFriend', 'myCoworker'],
        myCoworker: ['myFriend'],
    }
    

    By the way, shim is really meant to be used for code you do not control. For your own code you should be using define in your code instead of setting a shim in the configuration.