Browserify: Transforms and Plugins

Welcome to Part 3 of this review of the Pluralsight course Creating JavaScript Modules with Browserify by Jeff “coding with spike” Valore.


Jeff has over 15 years of experience in software development including Java, C#, JavaScript, CoffeeScript, and TypeScript.

His belief that clean, well-organized code is key to making software maintainable has led him to focus on unit testing and solid programming practices and principles as a cornerstone of everyday coding.

He is also the author of Require JS: Dependency Injection and Module Loading

Also in this series:

Part 1 – Getting Started

Part 2 – Easing the Development Process

This episode takes a look at the 4th module of the course:

Using Transforms and Plugins


We see the Browserify processing pipeline:

  • recorder
  • deps
  • json
  • unbom
  • syntax
  • sort
  • dedupe
  • label
  • emit-deps
  • debug
  • pack
  • wrap

Further details on the processing pipeline can be found here on Github.

Transforms apply early on this pipeline.

Transforms are a bit like loaders in webpack: you can use them to load CoffeeScript, TypeScript, ES6 code, plan text, HTML etc.

Plugins are more powerful than transforms and can change the entire way that Browserify processes files. They apply to every step in the above processing pipeline.

Hbsfy (Handlebarsify) Transform

For more information on Handlebars, see the Handlebars Plugin section of Jeff’s RequireJS course, or watching JavaScript Templating with Handlebars by Ryan Lewis.

Jeff explains the syntax highlighting and other benefits that Handlebarsify gives you.

He moves the inline template into the handlebars file task.hbs

Without Handlebarsify we get an unexpected token error from Browserify, so we must install it as well as Handlebars.

Now we can run Browserify with -t hbspfy and see that the application still works.

Writing Custom Transforms

We begin this by installing through2, which is a tiny wrapper around streams2 Transform.

For much more information on streams in Node, see James Halliday’s stream handbook.

Jeff write the base transform handlebars-transform.js with three functions:

  • transform
  • flush
  • processFile

All this does so far is take the browserify contents and pass them back unchanged. Jeff explains each of these functions, and then builds on this foundation, adding handlebars as a dependency, and extending the processFile function to process .hbs files.

Next transform and flush are updated, and we run browserify with our new transform.


You probably won’t need to write your own Browserify plugin, and it’s best to first look at the plugins that are already available from NPM.

From the command line, we load plugins with the -p option.

Further Reading

James “substack” Halliday has written the browserify handbook. It is very popular with over 3000 Github stars. Here are the section that complement this module of the course:

Writing your own transforms


Part 4 – Unit Testing Browserify Modules is coming soon

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s