自动打包
每次运行一条命令去重新打包会很慢, 以及乏味. 幸运的是有许多的工具可以解决这个问题, 其中某些支持不同程度的热更新(live-reloading), 其他的则是传统的手动刷新机制.
这里有一堆可以使用的工具, 但是npm上有更多可用的工具.
这里介绍了许多不同的工具, 围绕着不同的利弊权衡以及开发方式. 找到最适合的你的期望以及经验的工具还需要你点点工作, 但是我认为这种分歧是能够帮助码农变得更高效, 以及提供更多创造、实验的空间. 我认为周边工具的多样化, 以及保持browserify核心最小在中长期策略中是比从挑选出一些更优秀的winners继承进browserify核心这种方式更加健康. 上述集成的方式会在有意义的版本中创建浩劫以及对核心的破坏.
就是说, 这里有一些工具, 你可以以之建立起你的开发流程. 但是留个心眼, 还有许多其他的工具没有被列出!
watchify
你可以使用 watchify 与 browserify 互换, 但是watchify不是只写入到输出文件一次, watchify会写入到输出文件, 然后监控你的依赖树中的所有文件改变. 当你修改一个文件时, 新的输出文件将会很快地被重新写入, 因为使用到了聚合缓存.
你可以使用 -v 参数使每次写入新文件的时候打印一条信息:
$ watchify browser.js -d -o static/bundle.js -v610598 bytes written to static/bundle.js 0.23s610606 bytes written to static/bundle.js 0.10s610597 bytes written to static/bundle.js 0.14s610606 bytes written to static/bundle.js 0.08s610597 bytes written to static/bundle.js 0.08s610597 bytes written to static/bundle.js 0.19s
这里有一个实用的配置代码片段, 当你使用package.json的fields字段来配置 browserify 和 watchify的使用:
{ "build": "browserify browser.js -o static/bundle.js", "watch": "watchify browser.js -o static/bundle.js --debug --verbose",}
使用 npm run build 来生成生产环境的文件, 使用 npm run watch来进行开发.
beefy
如果你更喜欢建立一个服务器来自动编译修改的文件, 查看 beefy 这个包. 只需要给beefy一个入口文件
beefy main.js
然后他会建立在一个http端口上建立输出服务器.
wzrd
同beefy一样的理念, 但是形式更简洁 wzrd
只需 npm install -g wzrd 然后你可以:
wzrd app.js
browserify-middleware, enchilada
若果你使用express, 请查看 browserify-middleware 或者 enchilada.
它们都提供了为express提供borswerify 生成服务的中间件.
livereactload
livereactload 是一款为 react 提供当你更改代码时自动更新页面的工具. livereactload 是一个普通的transform,你可以使用 -t livereactload 加载它, 你应该查看该项目的说明文件 project readme 了解更多.
browserify-hmr
browserify-hmr is a plugin for doing hot module replacement (hmr).
Files can mark themselves as accepting updates. If you modify a file that accepts updates of itself, or if you modify a dependency of a file that accepts updates, then the file is re-executed with the new code.
For example, if we have a file, main.js:
document.body.textContent = require('./msg.js')if (module.hot) module.hot.accept()
and a file msg.js:
module.exports = 'hey'
We can watch main.js for changes and load the browserify-hmr plugin:
$ watchify main.js -p browserify-hmr -o public/bundle.js -dv
and serve up the static file contents in public/ with a static file server:
$ ecstatic public -p 8000
Now if we load http://localhost:8000, we see the message hey on the page.
If we change msg.js to be:
module.exports = 'wow'
then a second later, the page updates to show wow all by itself.
Browserify-HMR can be used with react-hot-transform to automatically allow all React components to be updated live in addition to code using the module.hot API. Unlike livereactload, only modified files are re-executed instead of the whole bundle on each modification.
budo
budo 提供一个browserify开发服务器, 主要提供增量更新以及LiveReload集成(也包括注入CSS).
使用如下命令安装
npm install budo -g
然后使用它运行你的entry文件:
budo app.js
这条命令在 http://localhost:9966 创建了一个服务器, 带有一个默认的 index.html 页面, 以及增量更新的功能. 这些请求是延迟的,直到生成文件结束, 所以你在页面更新过程中刷新会得到旧的或者空的生成文件.
使用 --live 来开启 LiveReload 功能:
budo app.js --live