学习笔记 broswerify + watchify + beefy

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);