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 moduleexports = entry: 'src/index.js' output: dir: 'build'
Then add a script to your package.json:
"scripts":
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 moduleexports = 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 bundlebuild/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 moduleexports = entry: 'src/index.js' output: dir: 'build' vendor: 'vendor.js' packs:
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