Browserify the ultimate

March 10, 2014

In my last post, I compared JavaScript module systems and pronounced Browserify (which supports a superset of the features of CommonJS) my favorite.

But a cool thing I didn’t mention about Browserify the tool (as opposed to its module system) is the availability of numerous filters.

For example, Browserify can be used with Handlebars templates via hbsfy. I used that until I switched to React, which has its own HTML-in-JavaScript syntax called JSX. No matter, the reactify transform handles compiling JSX.

Since not everyone has been persuaded by the wisdom of CommonJS yet, some useful libs are still built to the AMD module standard. The deamdify transform automatically wraps AMD modules to work with Browserify. You don’t even have to list which modules are AMD — it just figures that out.

What about libraries that just attach to the global object (window)? Surprisingly, there’s a deglobalify transform to address that too. Deglobalify does need a little bit of configuration: you pass require a second argument, an array of stuff exported onto the window object. Also, it doesn’t let you specify dependencies the library looks for. But it’s still useful for simple cases; otherwise, you can write a shim.

For completeness, Browserify transforms also work with modules installed via Bower or Component.js, and will soon consume ECMAScript 6 modules.

You can follow me on Mastodon or this blog via RSS.