RequireJS: loading different files according environment

Question

Is there any functionality to load different files according on current project environment (development or production for example)? I mean something, that helps me transparently loading minified or full files. I read about multiversion loading, but multiversioning means that I need to specify version of file.
For example I have module.js file with my module. In this file I need to load jQuery:

require(['jquery]);

But I have minified and full version of jQuery and I want to load different files. I am thinking about something like this in config:

   require.config({
        paths: {
            'jquery' : function(){
                if( MODE == 'DEV' ){
                    return 'jquery';
                }else{
                    return 'jquery.min'
                }
            }
        }
    });

Or, maybe, something similar.

Answer 1

If you use the r.js optimizer then this process can be taken care of for you. In your scripts folder leave all modules, libs and other code uncompressed for dev purposes. I often have something like this

scripts/
    lib/
    modules/

When ready to deploy, create a build.js and configure the various options. I'll give an example of a similar config I have used:

({
    baseUrl: '../scripts',
    dir: '../scripts.min',

    paths: {
        'jquery': 'lib/jquery'
    },

    removeCombined: true,

    optimize: 'uglify',
    preserveLicenseComments: false,
    uglify: {
        max_line_length: 3500,
        no_copyright: true
    },

    modules: [
        {
            name: 'module1'
        },
        {
            name: 'module2',
            exclude: ['jquery']
        }
    ]
})

More details on each of this options can be found in this example configuration but I will draw attention to dir and removeCombined

dir is obviously where your scripts will end up. I tend to create a folder adjacent to my scripts with the suffix .min or something similar. Then, when you're ready to go to production, simply change your require config baseUrl to scripts.min

require.config({
    baseUrl: '/scripts.min' // Now the site will load scripts from the optimised folder

    // Other options
})

By default, r.js will copy all the scripts over regardless of whether they have already been combined into another js file or not. Setting the removeCombined to true will ensure your scripts.min folder only has the necessary files for production.

Answer 2

If someone still want to know how to do that:

require.config({
    paths: {
        'jquery' : (function(){
            if( MODE == 'DEV' ){
                return 'jquery';
            }else{
                return 'jquery.min'
            }
        })()
    }
});

This function is self invoking anonymous function. It invokes immediately in the definition place.