155 lines
4.9 KiB
Markdown
155 lines
4.9 KiB
Markdown
# watchify-middleware
|
|
|
|
[](http://github.com/badges/stability-badges)
|
|
|
|
A simple middleware for watchify which provides a few features for a better development experience:
|
|
|
|
- suspends the server response so you are never served a stale or empty bundle
|
|
- removes the default 600ms delay (left up to the developer to reconfigure)
|
|
- emits timing information in a `'log'` event
|
|
- (optional) allows for a browser-based error handler (eg: print to DevTools console)
|
|
|
|
For practical implementations, see [watchify-server](https://www.npmjs.com/package/watchify-server) or [budo](https://www.npmjs.com/package/budo).
|
|
|
|
## Install
|
|
|
|
```sh
|
|
npm install watchify-middleware --save
|
|
```
|
|
|
|
## Example
|
|
|
|
```js
|
|
var watchifyMiddleware = require('watchify-middleware')
|
|
var defaultIndex = require('simple-html-index')
|
|
|
|
var staticUrl = 'bundle.js'
|
|
var bundler = browserify('app.js', {
|
|
// config for watchify
|
|
cache: {},
|
|
packageCache: {},
|
|
basedir: __dirname
|
|
})
|
|
var watchify = watchifyMiddleware(bundler)
|
|
|
|
var server = http.createServer(function (req, res) {
|
|
if (req.url === '/') {
|
|
defaultIndex({ entry: staticUrl }).pipe(res)
|
|
} else if (req.url === '/' + staticUrl) {
|
|
watchify(req, res)
|
|
}
|
|
})
|
|
|
|
server.listen(8000, 'localhost', function () {
|
|
console.log('Listening on http://localhost:8000/')
|
|
})
|
|
```
|
|
|
|
For a more complete example, see [example/server.js](example/server.js).
|
|
|
|
## Usage
|
|
|
|
[](https://www.npmjs.com/package/watchify-middleware)
|
|
|
|
#### `middleware = watchifyMiddleware(browserify[, opt])`
|
|
|
|
Returns a `middleware(req, res)` function from the given `browserify` bundler instance and options:
|
|
|
|
- `delay` (default 0) a delay to debounce the rebuild, useful for things like git branch switches (where hundreds of files may change at once)
|
|
- `errorHandler` (default false) a boolean or function for handling errors
|
|
- `initialBundle` (default true) whether to initially bundle and emit `'pending'`
|
|
|
|
`errorHandler` can be a function that accepts `(err)` parameter and optionally returns the new contents (String|Buffer) of the JavaScript bundle. If `errorHandler` is `true`, it will default to the following:
|
|
|
|
```js
|
|
var stripAnsi = require('strip-ansi')
|
|
|
|
function defaultErrorHandler (err) {
|
|
console.error('%s', err)
|
|
var msg = stripAnsi(err.message)
|
|
return ';console.error(' + JSON.stringify(msg) + ');'
|
|
}
|
|
```
|
|
|
|
<sup>(some plugins produce ANSI color codes in error messages)</sup>
|
|
|
|
Otherwise, it assumes the normal behaviour for error handling (which is typically just an uncaught error event).
|
|
|
|
#### `emitter = watchifyMiddleware.emitter(browserify[, opt])`
|
|
|
|
The same as above, except this returns an EventEmitter for handling bundle updates.
|
|
|
|
##### `emitter.middleware`
|
|
|
|
The `middleware(req, res)` function for use in your server.
|
|
|
|
##### `emitter.bundle()`
|
|
|
|
Triggers a bundle event. Usually should only be called if `initialBundle` is set to false, to trigger the initial bundle.
|
|
|
|
##### `emitter.on('pending', fn)`
|
|
|
|
Called when watchify begins its incremental rebuild.
|
|
|
|
##### `emitter.on('update', fn)`
|
|
|
|
Called when bundling is finished, with parameter `(contents, rows)`.
|
|
|
|
`contents` is a Buffer/String of the bundle and `rows` is a list of dependencies that have changed since last update. On first run, this will be an empty array.
|
|
|
|
##### `emitter.on('log', fn)`
|
|
|
|
Provides timing and server request logging, passing an `(event)` parameter.
|
|
|
|
Server request logs look like this:
|
|
|
|
```js
|
|
{ level: 'debug', type: 'request', message: 'bundle (pending|ready)'}
|
|
```
|
|
|
|
Bundle updates look like this:
|
|
|
|
```js
|
|
{ elapsed: Number, level: 'info', type: 'bundle' }
|
|
```
|
|
|
|
These events work well with [garnish](https://github.com/mattdesl/garnish) and other ndjson-based tools.
|
|
|
|
##### `emitter.on('error', fn)`
|
|
|
|
If `errorHandler` was `fasle`, this will get triggered on bundle errors. If an error handler is being used, this will not get triggered.
|
|
|
|
##### `emitter.on('bundle-error', fn)`
|
|
|
|
This will get triggered on bundle errors, regardless of whether `errorHandler` is being used. This can be used to respond to syntax errors, such as showing a stylized notification.
|
|
|
|
##### `emitter.close()`
|
|
|
|
Closes the `watchify` instance and stops file watching.
|
|
|
|
#### `version = watchifyMiddleware.getWatchifyVersion()`
|
|
|
|
Primarily useful for debugging, this will return the *actual* version number of the `watchify` module being used by `watchify-middleware`.
|
|
|
|
## running the demo
|
|
|
|
To run the example, first git clone and install dependencies.
|
|
|
|
```sh
|
|
git clone https://github.com/mattdesl/watchify-middleware.git
|
|
cd watchify-middleware
|
|
npm install
|
|
```
|
|
|
|
Then:
|
|
|
|
```sh
|
|
npm start
|
|
```
|
|
|
|
And open [http://localhost:8000/](http://localhost:8000/). Try making changes to [example/app.js](example/app.js) and you will see timing information in console, and reloading the browser will provide the new bundle.
|
|
|
|
## License
|
|
|
|
MIT, see [LICENSE.md](http://github.com/mattdesl/watchify-middleware/blob/master/LICENSE.md) for details.
|