Jordan Rousseau recently gave a presentation at OKC.JS about Browserify. Jordan is the fearless leader of the web team, of which I happen to be a member, at Weather Decision Technologies.

Jordan spends the first 18 slides talking about bad ways to handle loading JavaScript. When I say "bad ways" I mean ways that are difficult to maintain and/or do not scale well. After a lot of investigation, we landed on Browserify.

Browserify is a utility that builds CommonJS modules into a single bundle browser code with Node.js-style requires. Just like node Browserify allows you to write modules in separate files and use module.exports to expose external methods and properties. You can also use (some) npm modules!

Getting Started #

To begin, simply install browserify using npm.

npm i browserify -g

This installs the CLI for Browserify. It can be a bit annoying to use at times so we use grunt-browserify. If you are dead set on using the CLI, I recommend you look into watchify. If you use Gulp, I believe you can use it with Browserify but I have never used Gulp so I can't speak to it personally.

Using with Grunt #

npm i grunt-browserify -D

This will install the grunt-browserify task and save it in the package.json file as a devDependency.

browserify: {
  dev: {
    files: {
      'js/bundle.js': ['js/app.js']
    },
    options: {
      transform: ['brfs'],
      alias: [
              './node_modules/lodash/dist/lodash.underscore:underscore'
      ],
      debug: false
    }
  }
}

Here is kind of the boilerplate code for the browserify task of our web projects. Nothing super special here. LoDash is being aliased to underscore because Backbone attempts to require Underscore and it will throw an error if we are using LoDash in place of Underscore.

Jordan has some interesting demos in his slides, available at the bottom of the post. They are definitely worth checking out.

Transforms #

Transforms in are essentially Browserify middleware that run source transformations on files before they are parsed by Browserify. An example of a transform is deAMDify, a module that converts AMD modules to CommonJS so they will play nice with Browserify. A few other transforms to check out are brfs, es6ify, and coffeeify (if you are that kind of person). For a more comprehensive list see the Browserify wiki on transforms.

Resources #

• How Browserify Works
• Introducing RequireBin, Browserify-CDN and npmsearch
• Browserify Wiki
• Browserify.org

The slides for Jordan's talk are available on github. Hopefully, you now have everything you need to become a Browserify Wizard! Feel free to ask if you have any questions.