學習筆記 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);