Pic by Michael Dolan

Pic by Michael Dolan

You are working with require.js (AMD modules)? And you want to have a very simple way to build your project into one file? And later apply the minifier of your choice? Here is the easiest it gets.
But a bit of history first. David Aurelio has built undef already over a year ago, which we had in production for a while and it eased lots of our build pains. It simply speaking converts AMD modules which are mostly spread across multiple files into one JavaScript file and makes it ready for production. Run your favourite minifier over it and you are ready to roll.

The setup

The undef-example app provides a simple setup of three JS files, that depend on each other and use require.js to load in dependencies.

app.js configures the app so require.js knows how to resolve modules

requirejs.config({
    baseUrl: './js',
    paths: {
        app: 'app'
    }
});

requirejs(['app/main']);

app/main.js is the file which is the app’s starting point, which just requires the print module and executes it like so:

define([
  'app/print'
], function (print) {
  print();
});

app/print.js implements the actual (dumb) logic that does all the (hard) work

define(function() {
  function print() {
    document.body.innerHTML = 'It DOES work :)';
  }
  return print;
});

I guess you get the idea. Simple and straight forward.

Development

AMD modules (or require.js modules, which is the library used to do the file organizing and loading at runtime) are a standardized way of encapsulating functionality into modules, that reside in separate files and can depend on each other, by requiring them. During development, this is very helpful in order to create a well-structured project layout.
In the browser require.js is used to load the modules on demand and it does all the path resolving at runtime, taking a config given to it into account.
While this works fine for development it is pure overhead in production and has only been introduced due to the lack of a proper package management system in JavaScript (ES6 ftw).

Deployment

Now, that it’s time to deploy our app. We want all the requires and defines to disappear from our code. That is where undef comes into play. I just give it the base directory (basedir), the output directory and the app’s starting point.

undef --basedir src/js --output dist/app.js app/main

and out I get one file where all the requires and defines are stripped out and including this file works just as the code used with require.js before.
Here is what the output looks like:

(function () {
    var _0, _1;
    _0 = function () {
        function print() {
            document.body.innerHTML = 'It DOES work :)';
        }
        return print;
    }();
    _1 = function (print) {
        print();
    }(_0);
}());

Normally you pipe this output into a google closure or uglify in order to minify it and you have the final production ready code, which you can deploy now.

Conclusion

It has no support for any AMD plugins which e.g. allow you to import files other than JavaScript files and pre-process them.
As linked above, if you want an example project where the setup is already done use undef-example app, run `npm install` and you are set (more info).
Have fun reducing your deploy file size.