monobrow

browserify, with opinions.

Install

First add to your project:

npm install --save-dev monobrow

Quick start

After installing, run npx monobrow init

This will:

• create a config file with default settings (monobrow/config.js)
• add some aliases to your package.json scripts

Editing config by hand

Monobrow config is just a js module that exports an object. For example, a simple one looks like this:

// your-project/monobrow/config.js

module.exports = {
  entry: 'src/index.js',
  output: {
    dir: 'build'
  }
}

Then add a script to your package.json:

"scripts": {
  "build": "monobrow"
}

And npm run build

You can also npm run build -- -w to watch, or npm run build -- -h to hot-reload.

You can also specify hostname for the hot reload server: npm run build -- -h 127.0.0.1. If you supply -h (or --hot) with no value, the default hostname of 0.0.0.0 is used.

Simple bundle splitting

Any packages listed in the vendor array will be split into a separate bundle. The default name is vendor.js, but can be specified in the output.vendor option. Eg.

// your-project/monobrow/config.js

module.exports = {
  entry: 'src/index.js',
  output: {
    dir: 'build'
  },
  vendor: [
    'react',
    'react-dom',
    'classnames'
  ]
}

This will produce 2 files in the build directory:

• build/index.js: just your application bundle
• build/vendor.js: a bundle with externalized vendor files

When you do this, don't forget to add a new <script src="build/vendor.js"></script> to your page, before the <script> tag that includes your application bundle.

Vendor files provided by packs

Packs can provide a prebuilt bundle of vendor modules. Eg.

// your-project/monobrow/config.js

module.exports = {
  entry: 'src/index.js',
  output: {
    dir: 'build',
    vendor: 'vendor.js'
  },
  packs: [
    require('monobrow-react-pack')
  ]
}

Tech

• browserify-hmr: hot reloading
• browserify-incremental: faster builds

Example

Take a look at monobrow-todomvc to see a simple example of:

• splitting app code and dependencies into separate bundles
• adding transforms (eg. babelify)

License

MIT