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 –

What's the one thing every developer wants? More screens! Enhance your coding experience with an external monitor to increase screen real estate.

$ 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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Author: Rishabh

Rishabh is a full stack web and mobile developer from India. Follow me on Twitter.

Leave a Reply

Your email address will not be published. Required fields are marked *