Question

I am loading jQuery like this

require({
    baseUrl: '{{ STATIC_URL }}js',
    paths: {
        jQuery: 'https://ajax.googleapis.com/ajax/libs/jQuery/1.5.1/jquery.min',
        jQueryui: 'http://ajax.googleapis.com/ajax/libs/jQueryui/1.8.12/jquery-ui.min'
    },
    priority: ['jQuery','jQuery-UI']
}, ['main']);

How can order this such that jQuery-UI i is loaded after jQuery

Answer 1

There are some options:

1) Use the order plugin, then there is not a need for the priority config:

require({
    baseUrl: '{{ STATIC_URL }}js',
    paths: {
        jQuery: 'https://ajax.googleapis.com/ajax/libs/jQuery/1.5.1/jquery.min',
        jQueryui: 'http://ajax.googleapis.com/ajax/libs/jQueryui/1.8.12/jquery-ui.min'
    }
}, ['order!jQuery', 'order!jQueryui', 'order!main']);

2) You can nest require calls. In this scenario there is no “priority” config. It ends up being a bit slower loading since it serially loads the scripts:

//Set up config
require({
    baseUrl: '{{ STATIC_URL }}js',
    paths: {
        jQuery: 'https://ajax.googleapis.com/ajax/libs/jQuery/1.5.1/jquery.min',
        jQueryui: 'http://ajax.googleapis.com/ajax/libs/jQueryui/1.8.12/jquery-ui.min'
    }
});

//Do the loading.
require(['jQuery'], function () {
    //This assumes 'main' has explicitly indicated
    //jQueryui as a dependency.
    require(['jQueryui', 'main'] {

    });
});

3) If just ‘jQuery’ is put in the priority config, then just require(‘jQueryui’, ‘main’, assuming ‘main’ has also set ‘jQueryui’ as an explicit dependency. Actually with that in place, you can just require([‘main’]) and jQuery UI will be loaded as part of processing main.js.