Question

I’m working on a mobile website (it’s not a single page app) which has a very small JS footprint (less than 10KB minified and gzipped). There are no libraries or external dependencies, all the code is vanilla javascript written in house. It’s logically separated into several files that are concatenated before deplyment in order to reduce the number of HTTP requests. There is no explicit namespacing in the files. That is, they look something like:

// crossbrowser.js
function getScrollOffset() {
    // implementation
}

function ...

This is less than ideal, there is no explicit dependency resolution and the scope can get easilly polluted from inside the functions. There is no processing done to check this (lint or compiler). As a first step I thought implementing an explicit module system could safeguard against this and make the code better.

Reading into the CommonJS module format and loaders like RequireJS, Lab.js and others, as far as I understood, when using modules on the browser side, they all expect to load them via XHR. I don’t want that, I want to keep the single script format which contains all the modules. My file would look something like:

var define = function () { /* ... */ };
var require = function () { /* ... */ };
define("crossbrowser", function (require, exports, module) {
    exports.getScrollOffset = function() {
        //
    };

    // etc.
});

define("foo", function (require, exports, module) {
    var crossbrowser = require('crossbrowser');
    exports.getNewOffset = function () {
        var offset = crossbrowser.getScrollOffset();
        // do something
        return offset;
    }
});

window.addEventListener('DOMContentLoaded', function () {
    // really dumb example, but I hope it gets the point across
    var crossbrowser = require('crossbrowser'),
        foo = require('foo');
    crossbrowser.scrollTo(foo.getNewOffset());
});

The question is wether any of the loaders work this way or do I have to write my own implementation of define and require?

Answer 1

One of the benefit with loaders like requirejs is that you can use optimizers to combine all your modules into one minified script during your build process, see RequireJS Optimizer

This would allow you to develop in a modular structure but deploy an optimized version