Giter Club home page Giter Club logo

browserify-incremental's Introduction

browserify-incremental

Incremental rebuild for browserify

Update any source file and re-bundle, and only changed files will be parsed, so it will build super fast (even with big dependencies like React!).

How is this different from watchify?

browserify-incremental can detect changes which occured in between runs, which means it can be used as part of build systems which are invoked on demand, without requiring a long lived process. Whereas watchify is slow for the first run upon each startup, browserify-incremental is fast every time after the very first.

example

Use browserifyinc with all the same arguments as browserify, with the added --cachefile argument specifying where to put the cache file:

$ browserifyinc -r react -o output/bundle.js  -v
556200 bytes written to output/bundle.js (1.38 seconds)
$ browserifyinc -r react -o output/bundle.js  -v
556200 bytes written to output/bundle.js (0.13 seconds)

Now if you change some files and rebuild, only the changed files will be parsed and the rest will reuse the previous build's cached output.

You can use -v/--verbose to get more verbose output to show which files have changed and how long the bundling took:

$ browserifyinc test-module/ -v -o output/bundle.js
changed files:
/Users/jfriend/code/browserify-incremental/example/test-module/index.js
1000423 bytes written to output/bundle.js (0.18 seconds)

If you don't specify --cachefile, a browserify-cache.json file will be created in the current working directory.

usage

CLI

browserifyinc --cachefile tmp/browserify-cache.json main.js > output.js

All the bundle options are the same as the browserify command except for -v and --cachefile.

API

var browserifyInc = require('browserify-incremental')

var b = browserifyInc(opts)

Create a browserify bundle b from opts.

b is exactly like a browserify bundle except that it caches file contents and calling b.bundle() extra times past the first time will be much faster due to that caching.

By default, when used via API, browserify-incremental will only use in-memory caching, however you can pass a cacheFile option which will use an on disk cache instead (useful for build scripts which run once and exit).

You can also pass in a browserify instance of your own, and that will be used instead of creating a new one, however when you create your browserify instance you must include the following options:

{cache: {}, packageCache: {}, fullPaths: true}

For convenience, these options are available as browserifyInc.args, so you can use them like:

var browserify = require('browserify')
var browserifyInc = require('browserify-incremental')

var b = browserify(Object.assign({}, browserifyInc.args, {
  // your custom opts
}))
browserifyInc(b, {cacheFile: './browserify-cache.json'})

b.bundle().pipe(process.stdout)

The cacheFile opt can be passed to either the browserify or browserify-incremental constructor.

events

b.on('bytes', function (bytes) {})

When a bundle is generated, this event fires with the number of bytes written.

b.on('time', function (time) {})

When a bundle is generated, this event fires with the time it took to create the bundle in milliseconds.

b.on('log', function (msg) {})

This event fires to with messages of the form:

X bytes written (Y seconds)

with the number of bytes in the bundle X and the time in seconds Y.

install

With npm do:

$ npm install -g browserify-incremental browserify

to get the browserifyinc command and:

$ npm install --save browserify-incremental browserify

to get just the library.

Contributing

Please see the Contributor Guidelines.

license

MIT

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.