Serve Your JavaScript Files Bundled using Browserify with Node Enchilada

If you’re using Browserify to bundle assets in an Express or Connect application then you may want to consider using node-enchilada middleware to faciliate your bundling process.

Installation

Install it via npm –

$ npm install enchilada

Usage

The basic usage is pretty easy –

var express = require('express')

  , enchilada = require('enchilada');

var app = express();

// Serve JS files with Enchilada

app.use(enchilada(__dirname + '/public'));

// Fallback for other static resources

app.use(express.static(__dirname+'/public'));

Now whenever a URL mapping to a .js path under /public folder is requested, Enchilada will serve the packaged file by passing it through browserify.

For advanced usage you can pass in several options to the middleware –

app.use(enchilada({

	// Use true to disable file watching (caches in-memory), default false

	cache: true || false,

	// Compress with uglifyjs, default false

	compress: true || false,

	// Enable sourcemaps (via browserify), default false

	debug: true || false,

	// External requires, put rarely changing files that

	// you don't want to send along with your JS bundles

	routes: {

		// key is the url route, value is either a file relative to src

		"/js/jquery.js": "./js/jquery.js",

		// or a node module, in-built local or installed via npm

		"/js/util.js": "util"

	},

	// Location of your JS assets

	src: __dirname + '/public',

	// Apply source transforms

	transforms: [ coffeeify, brfs, es6ify ]

	// Callback fired after bundle generation

	watchCallback: function(filename) {},

}));

What does these options do ?

1. cache lets you enable or disable file watching for the JS files.
2. compress uses uglifyjs to compress and minify the contents of the bundle.
3. debug toggle sourcemaps via browserify.
4. routes lets you put shared code (that rarely changes) into separate files/routes that can be required by your main bundle. This way the main bundle will not contain the code of the specified libraries/modules allowing you to serve less code and leverage browser caching.
5. src specifies location of your resources.
6. transforms lets you apply various source transforms.
7. watchCallback is just a callback fired right after the bundle is generated during the file watching process. You can use it to do something clever like making the client reload the assets (or the page).

If you’re not sure about routes and transforms then consider reading this. After you’ve specified your routes you’ll need to load them in script tags –

<!- load scripts with shared code ->

<script src="/js/jquery.js"></script>

<script src="/js/util.js"></script>

<!- load your bundles ->

<script src="/js/main.js"></script>

This module uses the browserify API to achieve bundling and other functions like external requires, enabling sourcemaps and source transforms. All the code is contained in a single file that you can check out.

Conclusion

Its a nice module for auto “browserifying”, i.e., automatic bundling of your JavaScript assets via browserify when working on an express/connect application. Saves time by not having to create the bundle manually via command line.