Search code examples
javascriptnode.jsrequirejsr.js

RequireJS load only concatenated file


I'm using RequireJS (version 2.1.14) and would like to concatenate my JavaScript files into one single app-built.js. I've created a little node module which reads my app.js, extracts the project paths and gets executed once I run node build in the js directory of my application.

The node module (build.js):

var fs = require('fs'),
    path = require('path'),
    directory = __dirname + path.sep,
    requirejs = require(directory + 'vendor/r.js');

fs.readFile(directory + 'app.js', 'utf8', function(err, data) {
    if (err) {
        console.log('Error: ' + err);
        return
    } else {
        data = data.replace(/'/g, '"').replace(/\s+/g, '');
        var paths = data.substr(data.indexOf('{'), data.indexOf('}')),
            paths = paths.substr(0, paths.indexOf('}') + 1),
            paths = JSON.parse(paths);

        createAppBuilt(paths);
    }
});

function createAppBuilt(paths) {
    var config = {
        baseUrl: __dirname,
        paths: paths,
        name: 'app',
        out: 'app-built.js',
        preserveLicenseComments: false,
        findNestedDependencies: true,
        removeCombined: true
    };

    requirejs.optimize(config, function(buildResponse) {
        var contents = fs.readFileSync(config.out, 'utf8');
        console.log('Created app-built.js');
    }, function(err) {
        console.log('Error: ' + err);
        return;
    });
}

app.js:

var paths = {
    'jquery': 'vendor/jquery-1.11.0.min',
    // other paths
};

// Set language, necessary for validtaion plugin -> validation.js
if (Modernizr.localstorage) {
    localStorage.getItem('language') || localStorage.setItem('language', navigator.language || navigator.userLanguage);
}

requirejs.config({
    paths: paths,
    shim: {
        touchswipe: {
            deps: ['jquery']
        },
        icheck: {
            deps: ['jquery']
        },
        validate: {
            deps: ['jquery']
        },
        mask: {
            deps: ['jquery']
        },
        chosenImage: {
            deps: ['jquery', 'chosen']
        },
        cookie: {
            deps: ['jquery']
        }
    }
});

require(['globals', 'jquery', 'underscore'], function() {

    var initial = ['main'];

    if (!Modernizr.localstorage) {
        initial.push('cookie');
    }

    require(initial, function(Main) {
        $(function() {
            if (!Modernizr.localstorage) {
                $.cookie.json = true;
            }
            Main.init();
        });
    });

});

The app-built.js gets generated but when I include it in my index.php all the other modules get loaded as well. How can I prevent the loading of all modules and only load the app-built.js?

enter image description here


Solution

  • Changing the r.js optimizer (to uglify2) solved the problem for me:

    var config = {
        baseUrl: __dirname,
        paths: paths,
        name: 'app',
        out: 'app-built.js',
        findNestedDependencies: true,
        preserveLicenseComments: false,
        removeCombined: true,
        optimize: 'uglify2'
    };