Follow me if you want to grow your full-stack JavaScript skills with my screencasts and courses.

An intro to browserify

Resources

Browserify handbook, also the best explanation of npm ever: https://github.com/substack/browserify-handbook

Browserify github repo: https://github.com/substack/node-browserify

Intro

Browserify is awesome. It allows you to use npm modules in the browser. This is made possible with a compilation step that happens on the server, where the browserify module traverses your files, figures out the dependencies and concatenates it into one file that contains everything that it needs. This file can be run in the browser. This is a game changer.. Man, I love it.

Installing

Install the browserify npm module globally

terminal
  
  $ npm install browserify --save
  

For this introduction, we pull in lodash and jQuery from npm

terminal
  
  $ npm install jquery lodash --save
  

Setting up a basic structure

We create two files, an HTML file to pull in the browserify prepared JS and a JS file that requires the npm modules with node style require statements

We create the bundle.js file in our folder's root. We require the modules like we would do on the server, this looks exactly like a node file. We are using lodash to dedup an array of integers, and jquery to append some list items to the dom. Best of both worlds!

bundle.js
  

  var _ = require('lodash');
  var $ = require('jquery');

  _([1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,1,2,3,4,5,6,1,2,3,3,1])
    .uniq()
    .each(function(i){
        console.log(i);
        $("#items").append("
  • " + i + "
  • "); });

    Our html file is called index.html and we create it in the root directory. Note that we reference a JS file called bundle.js, but from the dist folder. We create this folder manually, but leave it empty, meaning when we hit this up in the browser, it can't find the file. That's fine, becasue we're going to use brwoserify to generate the file and save it to the dist folder.

    index.html
      
    
    <!DOCTYPE html>
    <html>
    <head>
        <title>A browserify intro</title>
    </head>
    <body>
    
    <ul id="items">
    
    </ul>
    
    <script type="text/javascript" src="dist/bundle.js"></script>
    </body>
    </html>
      
    

    Compiling with browserify

    We open up terminal at the root folder of our app, and to scope out the parameters, we run browserify without any arguments

    terminal
      
      $ browserify
    
      Usage: browserify [entry files] {OPTIONS}
    
      Standard Options:
    
          --outfile, -o  Write the browserify bundle to this file.
                         If unspecified, browserify prints to stdout.
    
          --require, -r  A module name or file to bundle.require()
                         Optionally use a colon separator to set the target.
    
            --entry, -e  An entry point of your app
    
           --ignore, -i  Replace a file with an empty stub. Files can be globs.
    
          --exclude, -u  Omit a file from the output bundle. Files can be globs.
    
         --external, -x  Reference a file from another bundle. Files can be globs.
    
        --transform, -t  Use a transform module on top-level files.
    
          --command, -c  Use a transform command on top-level files.
    
        --standalone -s  Generate a UMD bundle for the supplied export name.
                         This bundle works with other module systems and sets the name
                         given as a window global if no module system is found.
    
             --debug -d  Enable source maps that allow you to debug your files
                         separately.
    
             --help, -h  Show this message
    
      For advanced options, type `browserify --help advanced`.
    
      Specify a parameter.
      
    

    There are a bunch of arguments, and they are explained well. For now we are only interested in the -o parameter, which tells browserify where we want the compiled file saved to. We run browserify to compile our ./bundle.js file to ./dest/bundle.js:

    terminal
      
      $ browserify bundle.js -o dist/bundle.js
    
      
    

    This compiles a JS file at dist/bundle.js which is browser friendly and pulls in the npm modules in such a way that your code works! When we hit this up in the browser it works as expected!

    Wrap up

    And that folks, is browserify at it's simplest level. Browserify is extremely cool. I love it, and you should too. In upcoming episodes we're gonna have a look at better ways to introduce it to your workflow.