Quickly Setting up an ES6 Project with Browserify, Babel & Hot Reloading

Intro

There are a bunch of starter kits for ES2015 and React projects. If you are starting a quick prototype or playing around with some code, you probably just want a minimum setup.

The required set of tools includes: transpiler, bundler and hot reloader (because it’s 2015 and you don’t want to waste your time on reloading the page).

Browserify is really good bundler and it’s easy to use. And what’s important — it’s modular, so you can connect plugins and transforms in no time.

Babel is our transpiler of choice, no matter if you are using React or not, it’s doing a very good job. And hot reloading is a step forward towards productivity.

Instead of reloading the whole page, manually or automatically, hot reloader just applies patches to the code in the browser. Thus, it’s fast and makes it possible to maintain application state so you won’t need to repeat yourself to get to the same UI state as it was before the patch.

This article is not aiming to introduce another starter kit, but to help you figure out the minimum required tools to get started with an ES2015 project.

Getting Started

Create a package.json file and install the following packages:

$ npm i -D browserify babelify watchify serve

The first three packages are a bundler, a Babel plugin, and a files watcher; the serve package is a static server.

Add these into package.json so Browserify will use Babel transform in a specified stage.

{
  "browserify": { "transform": [ ["babelify", {"stage": [0]}] ]
}

Finally, here’s the NPM script to start the bundler in watch mode with source maps, and to run a static server from specified directory.

"scripts": {
  "start": "watchify src/index.js -o public/js/bundle.js -dv & serve public"
}

For hot module replacement, I’m using Browserify to install the following plugin and required packages for reloading React components:

$ npm i -D livereactload react-proxy babel-plugin-react-transform

Create .babelrc file with the following contents to tell Babel transform to use the plugins you've installed.

{
  "env": {
    "development": {
      "plugins": [ "react-transform" ],
      "extra": {
        "react-transform": {
          "transforms": [{
            "transform": "livereactload/babel-transform",
            "imports": ["react"]
          }]
        }
      }
    }
  }
}

Now add the livereactload plugin into the NPM script, and you are good to go.

"scripts": {
  "start": "watchify src/index.js -o public/js/bundle.js -dv -p livereactload & serve public"
}

Don’t forget about production build, you’ll need uglify-js to minify the code.

npm i -D uglify-js

And your build script, which runs transpilation and minification.

"build": "browserify src/index.js -t [ babelify --stage 0 ] | uglifyjs --screw-ie8 -c=dead_code,evaluate,loops,unused > public/js/bundle.js"

Feel free to also search on GitHub for tools and starter kits, as there are tons of ready-to-use boilerplates.