watchify 模块加速 browserify 编译

 2016年03月17日    457     声明


Browserify可以打包Node(npm)模块的依赖环境,让这些模块在浏览器中运行。React在布暑生产环境前,一般也需要使用Browserify打包编译。随着项目的变大,每次打包编译的时间也会变的越来越长,这时我们需要Watchify模块。Watchify会监视源文件的变化,并使用与Browserify相同的配置,自动完成源文件变化部分的打包编译,在打包编译速度上有了极大的提升。


  1. watchifybrowserify
  2. watchify模块的使用

1. watchifybrowserify

接下来我们用一个React示例来演示项目打包编译及browserifywatchify的使用。

有如下一个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安装browserifyreactify模块后,我们需要在package.json文件中添加以下编译配置:

"browserify" : {
  "transform": [
      ["reactify", {"es6": true}]
  ]
}

在上一步,配置了使用reactify转换ReactJSX语法,并通过{"es6": true}添加了对ES6的支持。然后我们可以使用以下命令打包编译:

browserify itbilu.js -o itbilu.out.js

执行完成后,会生成打包编译后的文件itbilu.out.js。这时,我们已经不用编写Gulp脚本,支持可以通过browserify输出打包文件。但同时我们也可以看到,每次修改代码后都需要重新打包编译,随着模块的增加和项目的扩大,这一过程会变的越来越慢。


1.2 watchify更快的构建方式

watchify会监视文件的改动,并且只重新打包编译必要的文件。watchifybrowserify使用相同的配置,这样我们就不需要再添加单独的配置。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选项

watchifybrowserify使用相同的选项参数,除-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对象实例,创建时必须添加 cachepackageCache属性。

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'事件的时间间隔(毫秒)。默认为:100
  • opts.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)