android o ify模块汉化,watchify 模块加速 browserify 编译

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

1. watchify与browserify

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

有如下一个React组件，其文件名为itbilu.js：

var App = React.createClass({

render: function () {

return (

)

}

});

在介绍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'事件的时间间隔(毫秒)。默认为：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)