Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

RequireJS: How to exclude certain paths when building to single file?

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();
    }
);
like image 210
Clint Harris Avatar asked Aug 27 '13 14:08

Clint Harris


1 Answers

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",
    };
})()
like image 199
Clint Harris Avatar answered Sep 30 '22 18:09

Clint Harris