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