require.js loads dependencies incorrectly

Question

So this is the setup, my base file is main.js which defines the scripts that are needed on all pages of the site I'm building. It looks like this:

define([
        '/javascript/requirePlugins/require-order.js!http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js',
        '/javascript/requirePlugins/require-order.js!/javascript/jquery-global-plugins.js',
        '/javascript/requirePlugins/require-order.js!/javascript/globals.js'
    ], function () {
        loadFonts();
    }
);

It loads jQuery, some plugins and the globals script file. On one page I'm trying to load a jQuery plugin, but the plugin tries to load before jQuery is loaded. It looks like this:

    require(['/javascript/requirePlugins/require-order.js!/main','/javascript/requirePlugins/require-order.js!/javascript/3rdparty/lemon-slider-0.2.js'], function () {
        $j('#carousel<%= ClientID %>').lemmonSlider({loop:false});
    });

The function doesn't appear to be following the order requested. I'm not sure I can even nest ordered functions like this. I've also tried just applying jQuery as a dependency, but this also fails:

    require(['/javascript/requirePlugins/require-order.js!/jquery','/javascript/requirePlugins/require-order.js!/javascript/3rdparty/lemon-slider-0.2.js'], function () {
        $j('#carousel<%= ClientID %>').lemmonSlider({loop:false});
    });

Any suggestions to where I'm doing this wrong is appreciated, thanks

Answer 1

order plugin is removed and you may try shim config to load plugins in order

requirejs.config({
   paths: {
        'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min',
        'bootstrap': '../bootstrap/js/bootstrap.min',
        'select2': 'vendor/select2',
        'jshashtable': 'vendor/jshashtable-2.1',
        'jquery.numberformatter': 'vendor/jquery.numberformatter-1.2.3.min',
        'jq-datepicker': 'vendor/bootstrap-datepicker',
        'jq-datepicker.da': 'vendor/bootstrap-datepicker.da'
    }, 

    // Use shim for plugins that does not support ADM
    shim: {
        'bootstrap': ['jquery'],
        'select2': ['jquery'],
        'jq-datepicker': ['jquery'],
        'jshashtable': ['jquery'],
        'jquery.numberformatter': ['jquery', 'jshashtable']
    },
    enforceDefine: true
});

EDIT:

require-jquery is also no more maintaining.

Answer 2

The order plugin is useful if you just have a few top-level scripts you wanted loaded in order and those scripts do not use the module API supported by requirejs. It does not work out so well if you mix it/use it to load modules that do use the define() module API.

In particular, order just makes sure the script gets loaded first. However, the define() API specifies other scripts to load, and the order plugin does not know to wait for those scripts to load.

For this particular problem, I suggest using require-jquery.js as sinsedrix suggested. That, or wrap the scripts you use in define() calls. volo can help you do this with its amdify command:

volo.js amdify path/to/lemon-slider-0.2.js depends=jquery

Also, I would set the baseUrl and use "module naming" for the dependencies instead of full paths. This will allow the optimizer to work correctly. You can also map 'order' to the requirePlugins path, which helps cut down some of the line noise. I would also create a 'jquery' paths entry so that if you do wrap the other plugins in define calls, it will map back to the jquery loaded in your main.js file. So, in the top level script for your page:

requirejs.config({
    baseUrl: '/javascript/',
    paths: {
        order: 'requirePlugins/require-order',
        jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
    }
});

Then your main.js can be written like so:

define([
        'order!jquery',
        'order!jquery-global-plugins',
        'order!globals'
    ], function () {
        loadFonts();
    }
);

Note that here, the order usage is fine, as long as those dependencies do not call define() themselves.

But if you are wrapping the scripts you use in define calls, then you can get rid of the order! usage above. Keep the jquery paths config though.