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 ?
cachelets you enable or disable file watching for the JS files.compressuses uglifyjs to compress and minify the contents of the bundle.debugtoggle sourcemaps via browserify.routeslets 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.srcspecifies location of your resources.transformslets you apply various source transforms.watchCallbackis 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.
