Skip to content

Instantly share code, notes, and snippets.

@tyler-johnson
Last active February 8, 2016 14:08
Show Gist options
  • Save tyler-johnson/0568793600b4c0f36117 to your computer and use it in GitHub Desktop.
Save tyler-johnson/0568793600b4c0f36117 to your computer and use it in GitHub Desktop.
Simple Browserify middleware for Express with basic in-memory caching and watchify support.

Simple Browserify middleware for Express with basic in-memory caching and watchify support.

I created this as a Gist instead of Node module because Browserify bundles are one of those things better left customizable. This function, as it stands, is very limited. It has no support for things like transforms and plugins. Copy this into your app and add any desired functionality there.

Depends on:

  • Browserify - tested on v6.1, expected to work on v4.0+
  • Watchify - tested on v2.0, expected to work on v1.0+. Watchify is optional. Remove watchify require statement if not desired.
  • Express - tested with v4.9, expected to work with v3.0+

Usage

browserifyMiddleware( entryFileName [, options ] )
  • entryFileName (String) - The entry file to be browserified. Relative to current working directory.
  • options (Object) - A hash of options. A few properties are specific to this middleware and the rest are passed to the Browserify bundle.
    • watchify (Boolean) - Use watchify. Clears the cache whenever files change, forcing the bundle to be rebuilt on next request. Useless if cacheResult is false.
    • cacheResult (Boolean) - Cache the result in memory. Without watchify enabled, the browserify bundle will only compile once. The default value is true.

Example

This example creates a bundle from the file client/index.js, with watchify and serves it up at /browser.js.

app.get("/browser.js", browserifyMiddleware("client/index.js", { debug: true, watchify: true });

License

(c) 2014 Tyler Johnson MIT License

/* Node Dependencies */
var browserify = require("browserify"),
watchify = require("watchify"),
path = require("path");
/* Middlware Generator */
var browserifyMiddleware =
module.exports = function(jsfile, options) {
var bundle, cached_src;
// set up options
options = options || {};
options.cacheResult = options.cacheResult == null ? true : options.cacheResult;
options.watchify = options.watchify && options.cacheResult;
// apply watchify options
if (options.watchify) Object.keys(watchify.args).forEach(function(key) {
if (typeof options[key] === "undefined") options[key] = watchify.args[key];
});
// create a new browserify bundle
bundle = browserify(options);
// apply watchify
if (options.watchify) {
watchify(bundle);
bundle.on("update", function(ids) {
cached_src = null;
});
}
// add the initial file
bundle.add(path.resolve(jsfile));
// sends the js source
function send(res, src) {
res.type("js");
res.status(200);
res.send(src);
}
// the actual middleware
return function(req, res, next) {
// check for cached copy
if (options.cacheResult && cached_src) {
return send(res, cached_src);
}
// otherwise build a new one
bundle.bundle(function(err, src) {
if (err) return next(err);
if (options.cacheResult) cached_src = src
send(res, src);
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment