npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

browserify-incremental-asterisk

v1.0.1

Published

Fast incremental rebuilds for extension browserify-asterisk

Downloads

1

Readme

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