Requirejs configuration in different file

Question

I am using requirejs. My main.js content is like following.

requirejs.config({
    async: true,
    parseOnLoad: true,
    packages: [],
    paths: {
        jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min'
    }
});

require(["login"], function (loginService) {

    loginService.login('validUser');

});

Now, my config elements are little. But later, I will add packages, paths and others, so the require.config lines will increase.

1. I wanna separate require.config as a different file and use it?
2. If jquery load delays, does the error occurs? My other javascript files are using it.

Answer 1

Yes you can, require your config before you require anything else, like this:

config example:

require.config({
    baseUrl: '/Public/js',
    paths: {
        jquery: '../../Scripts/jquery-1.10.2.min',
        jqueryui: '../../Scripts/jquery-ui-1.10.2.min',
    },
    shim: {
        jqueryui: {
            deps: ['jquery']
        },
    }
    waitSeconds: 3
});

and, then I load it:

require(['/Public/js/config.js'], function() {
    require(['home/index'], function() {                
    });
});

Just remember that you reference the config.js by path in the first require-statement because require.js can not resolve by baseUrl since it has not been loaded. When you get to the inner require()-statement, its loaded and you can reference dependencies relative to baseUrl.

Answer 2

1. You can put the config into a separate JS file, that's not a problem. Just make sure that file is loaded prior to the require() call in your main code.

2. If you're using jQuery for other scripts that are not loaded via requireJS, you will get errors if they happen to load sooner than jQuery. What you need to do is convert all those static files into requireJS modules and load them all via requireJS. By using a define() function in each of the modules, you can set up dependencies, so all modules will wait for jQuery to load prior to executing their own code.