broswerify
“Browserify lets you require('modules') in the browser by bundling up all of your dependencies.”
Browserify 可以让你在浏览器中通过 require('modules') 的写法加载依赖的模块。
浏览器本身不支持 require 和 define 的模块化开发,但是 nodejs 支持。使用 broswerify,就可以让浏览器支持和 nodejs 一样的开发方式。(这里不讨论 CMD 和 AMD)
首先是安装
$npm install broswerify --save-dev
编写一段 nodejs 脚本
//main.js
var unique = require('uniq');
var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
console.log(unique(data));
uniq 是 nodejs 的一个模块
在 nodejs 环境中安装 uniq 模块
$npm install uniq --save-dev
现在可以测试下这段脚本在 nodejs 下的效果
$node main.js
//[ 0, 1, 2, 3, 4, 5 ]
之后就可以通过 broswerify 生成 budle.js:
$browserify main.js > bundle.js
在 html 中加载生成的 js 脚本,
<script src="./bundle.js"></script>
就能在浏览器中运行刚才的结果。
watchify
和 broswerify 组队的自动对文件修改做出响应的工具
// 安装
$npm install watchify --save-dev
// 监听当前目录文件状态,代替执行了 broswerify main.js > bundle.js
$watchify main.js > bundle.js
// -d debug 模式,会生成 sourceMap
// =v 输出日志
$watchify main.js > bundle.js -d -v
// -o --outfile
$ watchify browser.js -d -o static/bundle.js -v
// -o 也可以执行语句
watchify main.js -o 'exorcist static/bundle.js.map > static/bundle.js' -d
Beefy
官方推荐的基于 broswerify 和 watchify 开发的快捷启动服务的插件。
// 安装
$npm install beefy
// 在127.0.0.1:9966启动一个 node 的服务,当通过这个服务访问 main.js 这个文件时,自动 bundle 并加载,参数-l 表示启用 liveloader
$beefy main.js -l
//> browserfy@1.0.0 start /your/path
//> beefy main.js -l
//
//beefy (v2.1.5) is listening on http://127.0.0.1:9966
实际使用中发现一个 bug,保存时自动加载的页面的 Js经常是上一次保存的内容。
看了源码后发现原来刷新页面和启动 broswerify 用的是两个文件监听,有个不太完美的解决方法就是:
修改文件 node_modules/beefy/lib/frontend-js/live-reload.js
window.location.reload();
setTimeout(function(){window.location.reload()}, 200);