Javascript – RequireJS: How to exclude certain paths when building to single file

javascriptrequirejs

I have a Backbone app which uses RequireJS 2.1.8 (i.e., all my Backbone views use define() to specify their dependencies). Everything works great and now I'm trying to use r.js (installed via NPM) to concat/minify all of my JavaScript into a single file.

How can I set up a r.js config which excludes dependencies that begin with certain paths?

I've included my main.js file below. In this case, I want the "built" output file to exclude the 3rd-party libraries (i.e., jquery, backbone, etc.). Also, I want to exclude any dependency that starts with "webapp/" (e.g., "webapp/dynamic_cfg", which results in a request being sent to my Djang app for a dynamically-generated JavaScript file/module).

Folder structure:

|--static/
    |--main.js
    |--myapp/
        |--views/
            |-- MyView.js
            |-- ...
    |--lib
        |--backbone-1.0/
        |--underscore-1.5.1/
        |-- ...

index.html (a Django template):

<script src="{% static 'lib/requirejs-2.1.8/require.min.js' %}" data-main="{% static 'main.js' %}" ></script>

main.js:

requirejs.config({

    paths: {
        "jquery": 'lib/jquery-1.10.2/jquery.min',
        "text_loader": 'lib/requirejs-text-2.0.10/requirejs-text',
        "fuelux": 'lib/fuelux-2.3.1',
        "backbone": 'lib/backbone-1.0/backbone.min',
        "underscore": 'lib/underscore-1.5.1/underscore.min',

        // Any module that requires 'webapp/*' will result Require.js
        // making a request to the server webapp.
        "webapp": '..'
    },

    shim: {

        'backbone': {
            deps: ['underscore', 'jquery'], // Load these dependencies first
            exports: 'Backbone' // Create global var with this name for the module
        },
        'underscore': {
            exports: '_'
        }
    }

});

// Startup
require(['webapp/dynamic_cfg', 'myapp/util/logger', 'myapp/view/AppView', 'myapp/AppRouter', 'fuelux/all'],

    // Dependencies are loaded and passed to this function
    function(cfg, logger, AppView, AppRouter, fuelUx) {

        logger.info("Starting up with config:", cfg);

        var appView = new AppView();
        var appRouter = new AppRouter();
    }
);

Best Answer

Setting the paths to "empty:" in my r.js config worked. Example:

// This is a RequireJS config file
(function(){
    return {

        // Name of input file (without the .js extention)
        "name": "main",

        // Directory containing input file
        "baseUrl": "static/",

        // Look in this file for the require.config() call and extract it
        "mainConfigFile": "static/main.js",

        "paths": {
            // Don't attempt to include dependencies whose path begins with webapp/
            "webapp": "empty:",

            // Ditto for the following 3rd-party libraries
            "jquery": "empty:",
            "fuelux": "empty:",
            "backbone": "empty:",
            "underscore": "empty:"
        },

        "optimize": "uglify2",
    };
})()
Related Topic