Browserify可以打包Node（npm）模块的依赖环境，让这些模块在浏览器中运行。React在布暑生产环境前，一般也需要使用Browserify打包编译。随着项目的变大，每次打包编译的时间也会变的越来越长，这时我们需要Watchify模块。Watchify会监视源文件的变化，并使用与Browserify相同的配置，自动完成源文件变化部分的打包编译，在打包编译速度上有了极大的提升。
1. watchify与browserify
接下来我们用一个React示例来演示项目打包编译及browserify和watchify的使用。
有如下一个React组件，其文件名为itbilu.js：
var App = React.createClass({
render: function () {
return (
<div>
<h1>IT笔录</h1>
<h2>itbilu.com</h2>
</div>
)
}
});
在介绍React服务端渲染时，我们使用了Gulp来构建渲染后的页面。除使用Gulp外，我们也可以使用browserify模块和reactify模块直接打包编译。
1.1 browserify构建
NPM安装browserify和reactify模块后，我们需要在package.json文件中添加以下编译配置：
"browserify" : {
"transform": [
["reactify", {"es6": true}]
]
}
在上一步，配置了使用reactify转换React的JSX语法，并通过{"es6": true}添加了对ES6的支持。然后我们可以使用以下命令打包编译：
browserify itbilu.js -o itbilu.out.js
执行完成后，会生成打包编译后的文件itbilu.out.js。这时，我们已经不用编写Gulp脚本，支持可以通过browserify输出打包文件。但同时我们也可以看到，每次修改代码后都需要重新打包编译，随着模块的增加和项目的扩大，这一过程会变的越来越慢。
1.2 watchify更快的构建方式
watchify会监视文件的改动，并且只重新打包编译必要的文件。watchify和browserify使用相同的配置，这样我们就不需要再添加单独的配置。NPM安装watchify后，直接执行以下命令即可：
watchify itbilu.js -o itbilu.out.js
2. watchify模块的使用
2.1 watchify使用示例
watchify也可替换browserify使用。使用watchify更新文件时，可以引用某一个文件或目录自动增量构建：
watchify main.js -o static/bundle.js
-o选项可以在文件或是shell命令中使用：
watchify main.js -o 'exorcist static/bundle.js.map > static/bundle.js' -d
watchify main.js -o 'uglifyjs -cm > static/bundle.min.js'
通过-v参数，我们可以查看文件在多长时间前编译：
watchify browser.js -d -o static/bundle.js -v 610598 bytes written to static/bundle.js (0.23 seconds) 610606 bytes written to static/bundle.js (0.10 seconds) 610597 bytes written to static/bundle.js (0.14 seconds) 610606 bytes written to static/bundle.js (0.08 seconds) 610597 bytes written to static/bundle.js (0.08 seconds) 610597 bytes written to static/bundle.js (0.19 seconds)
2.2 watchify安装
NPM安装watchify时，推荐使用-g参数全局安装：
npm install -g watchify
2.3 watchify选项
watchify与browserify使用相同的选项参数，除-o（--outfile）二者选项配置相同。
标准选项： --outfile=FILE, -o FILE 必选参数。输出到browserify的绑定文件，如果文件中有`|` 或 `>`操作符，会像shell命令一样处理。 --verbose, -v [默认: false] 显示一个文件的需要的写入时间（秒数） --version 显示 watchify 和 browserify在模块中的版本
高级选项： --delay [默认: 600] 毫秒级的一个在“更新”事件前的等待时间 --ignore-watch=GLOB, --iw GLOB [默认: false] 忽略文件修改匹配模式，默认的匹配模式为 "**/node_modules/**" --poll=INTERVAL [默认: false] 使用轮询监控变化。默认的省略间隔为100毫秒
2.4 watchify方法
watchify(b, opts)
watchify是一个browserify插件，你可像其它插件一样使用它。
参数b，是一个browserify对象实例，创建时必须添加 cache和packageCache属性。
var b = browserify({ cache: {}, packageCache: {} });
b.plugin(watchify);
也可以像下面这样添加watchify插件：
var b = browserify({
cache: {},
packageCache: {},
plugin: [watchify]
});
默认情况下watchify不会有任何输出，可以在其事件中查看相关信息。
添加watchify插件后，b还是像一个普通的browserify实例一样，但它会缓存文件内容，而且会在文件文件更新后发送'update'事件（通过bundle()方法绑定后）。
注意：watchify默认不会发送'update'事件，你需要调bundle()方法产生一个新的绑定。
var fs = require('fs');
var browserify = require('browserify');
var watchify = require('watchify');
var b = browserify({
entries: ['path/to/entry.js'],
cache: {},
packageCache: {},
plugin: [watchify]
});
b.on('update', bundle);
bundle();
function bundle() {
b.bundle().pipe(fs.createWriteStream('output.js'));
}
参数opts是一个可选参数。它是一个包含以下属性的对象：
opts.delay，整数。表示在文件修改后发送'update'事件的时间间隔（毫秒）。默认为：100opts.ignoreWatch，要忽略监视的文件。默认为：100。如果设置为true，则会忽略**/node_modules/**。也可以使用数组形式。opts.poll，启用轮询监视文件。如果设置为true，则表示每100ms轮询一次。也可以设置为一个整数。
var b = browserify({ cache: {}, packageCache: {} });
// watchify 默认值:
b.plugin(bundle, {
delay: 100,
ignoreWatch: ['**/node_modules/**'],
poll: false
});
b.close()
停止所有已打开的监视处理。
2.5 watchify事件
b.on('update', function (ids) {})
当绑定了文件变化监视器后，会在绑定文件修改后触发。
b.on('bytes', function (bytes) {})
绑定监视后，这个事件表示改变的字节数
b.on('time', function (time) {})
绑定监视后，这个事件表示绑定多长时间后（毫秒）后文件发生了改变
b.on('log', function (msg) {})
当绑定事件发生后触发的消息。其格式为：
X bytes written (Y seconds)