fast & optimized browserify builds

about.md

Small script for development + builds with browserify.

Uses loose-envify for faster inlining and cross-env to handle windows/unix shells.

Dev features:

• fast rebuilds w/ watchify, LiveReload, syntax errors in DOM, etc.

Build features:

• uglify, simple dead code elimination, optimized bundle.

npm install --save-dev cross-env browserify budo babelify loose-envify bundle-collapser uglify-js unreachable-branch-transform

build.js

var entry = 'index.js';

// Some options shared in dev + prod
var bundleOpts = {
  debug: true, // inline source maps
  transform: [
    'babelify',
    'loose-envify'
  ]
};

if (process.env.NODE_ENV === 'development') {
  // fast dev server
  require('budo')(entry, {
    serve: 'bundle.js',
    stream: process.stdout, // log requests in terminal
    live: true, // enable LiveReload
    browserify: bundleOpts
  });
} else {
  // optimized production bundle
  require('browserify')(entry, bundleOpts)
    .transform('unreachable-branch-transform', { // dead code elimination
      global: true // so that it runs on dependencies, e.g. react, react-dom
    })
    .plugin('bundle-collapser/plugin') // smaller bundle size
    .bundle()
    .pipe(process.stdout);
}

package.json

...
  "scripts": {
    "start": "cross-env NODE_ENV=development node build.js",
    "build": "cross-env NODE_ENV=production node build.js | uglifyjs -cm > app/bundle.js"
  }
...