本文是依據 Browserify 官網及網路參考資料逐步學習記錄的內容

Browserify 讓我們可以在瀏覽器中使用Node.js 風格的模組，不管是 AMD / CMD / ES6 …..風格的模塊化，它都能認識，並且編譯成瀏覽器認識的JS。

Browserify 運作的方式，會先在代碼中以靜態分析(static analysis)搜尋有調用 require()的內容，彙整出調用依賴關係圖(dependency graph)，並且將關鍵字解析成路徑，然後根據路徑找到檔案，接著，檔案會被打包(bundle)成單一獨立的 javascript 檔案，讓你可以直接在網頁中直接使用。並且，打包的檔案預設都會使用嚴格模式 ```use

接下來，開始介紹 Browserify 安裝方式及用法說明:

安裝 browserify

首先，安裝 browserify

CVT2HUGO: strict```
npm install -g browserify

安裝完畢後，接下來將陸續介紹如何透過 Browserify 來編譯 Node 風格的模組:

require(‘modules’)
exports

一、 require(‘modules’)

在 Node 的 require() 函式是用來載入外部的程式碼，且調用的方式有兩種

1.當你填寫的是 require(路徑)，例如 require(’./foo.js’) ，將會直接從 ./ 或者 ../ 前往位置(例如 /beep/boop/bar.js)，呼叫內容 2.如果直接填寫名稱的方式，例如 require(‘xyz’)，Node 就會依照下邏輯方式進行搜索

/beep/boop/node_modules/xyz
/beep/node_modules/xyz
/node_modules/xyz

如果每個目錄都有 xyz，Node會返回檢查package.json 裡的 main ，是否有指定xyz

{
  "name": "xyz",
  "version": "1.2.3",
  "main": "lib/abc.js"
}

如果沒有指定main，Node就會預設採用下列位置的檔案

/beep/node_modules/xyz/index.js

這裡將以 uniq 來進行 require() 演練，及如何透過 browserify 編譯出結果

範例

接下來，會透過一個 uniq modules 來示範

uniq 可以從陣列中刪除所有重複的值安裝 uniq

npm install uniq

建立 Node require

接著，新增 main.js 並寫入底下內容

//main.js
var unique = require('uniq');

var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];

//檢查是否去除掉重複的值
console.log(unique(data));

執行 Node 檢視結果

我們先用 node 來檢視會出現甚麼結果

node main.js

輸出結果

[ 1, 2, 3, 4, 5, 6 ]

Browserify 轉譯檔案

接下來，用browserify 來轉譯main.js的結果，並且儲存為 bundle.js 語法如下:

browserify main.js -o bundle.js

或者，可以透過 > 操作子

browserify main.js > bundle.js

執行轉譯結果

建立一個 test.html，並且使用剛剛轉譯成功的 bundle.js，可直接開啟瀏覽器，從開發者工具中察看 console

<html>
<body>
	<script src="bundle.js"></script>
</body>
</html>

輸出結果

Array(6)
0:1
1:2
2:3
3:4
4:5
5:6
length:6

#二、 export 當我們透過 require 載入模組，當模組載入時，會返回module.exports的內容當然，也可以直接使用 module.exports 的輔助方法 exports，照樣能夠正常返回結果 (建議統一使用module.exports) 首先，使用 module.exports 測試 foo.js

module.exports = function (n) { return n * 111 }

main.js

var foo = require('./foo.js');
console.log(foo(5));

然後執行```node

接下來用 exports 試試看

foo.js

CVT2HUGO: main.js```，就能看到輸出結果為555
exports.name = function() {
    console.log('My name is Adam');
};

main.js

var foo = require('./foo.js');
foo.name();

輸出結果為 My name is Adam

接下來，一樣將上面的結果進行 browserify 轉譯

browserify main.js > bundle.js

再檢查是否正常在瀏覽器上面執行

三、搭配第三方套件

這裡僅以jQuery來示範，其他第三方套件則依照同樣原則來使用即可。

jQuery

通常，我們會先前往jQuery官網，下載最新的檔案，但現在，只要透過 npm 就能直接下載最新的檔案，再透過browserify 即可在瀏覽器中使用

首先，先安裝 jQuery，並且透過 –save 將jquery 自動加入 package.json 行列

npm install jquery --save

在main.js載入jquery並且使用 main.js

var $ = require('jquery');
$(function(){
	$("h1").hide();
	console.log('h1 hided');
});

用browserify將main.js打包成bundle.js

browserify main.js > bundle.js

編輯 test.html 內容

<body>
	<h1>Hello world</h1>

	<!--js-->
	<script type="text/javascript" src="bundle.js"></script>
</body>

其他

Gulp + Browserify

如果想在Gulp使用Browserify，不推薦使用 gulp-browserify，

而是直接 require(‘browserify’) 即可，

先安裝 browserify 並儲存在本地gulp

npm install browserify --save

如果遇到下方錯誤

Refusing to install browserify as a dependency of itself

請檢查你的package.json name是否命名為 browserify，如果是就會引發衝突，請更名

另外，Gulp 使用的是 Vinyl File Object Stream，而不是普通的Node Stream，無法支援取得 Node stream 庫，

所以，需透過 vinyl-source-stream 把 Node Stream 轉換為Gulp支援的 Vinyl File Object Stream，讓一般的 Node Stream 可以連結到 Gulp體系。(詳細可參考這裡)

npm install vinyl-source-stream --save

順帶一提，vinyl-source-stream 和gulp.src()一樣，會依照來源名進行新增，因此可搭配gulp.dest()將檔案複製到指定位置，因此不必再寫使用 gulp-rename 重新命名

另外，一定要確認有在 package.json 加入 babelify package.json

{
  "browserify": {
    "transform": [["babelify", { "presets": ["latest"] }]]
  },
  "name": "browserifys",
  "version": "1.0.0",
  "babel": {
    "plugins": [
      [
        "transform-runtime",
        {
          "helpers": false,
          "polyfill": false,
          "regenerator": true,
          "moduleName": "babel-runtime"
        }
      ]
    ]
  },
  ...
}

範例如下:

gulpfile.js

var browserify = require('browserify'),
    gulp = require('gulp'),
    source = require('vinyl-source-stream');//returns a streaming vinyl object where as uglify expects buffered vinyl file objects.

gulp.task('browserify', function() {
    return browserify('./main.js')
        .bundle()
        // pass desired output filename to vinyl-source-stream
        .pipe(source('boundle.js'))
        .pipe(gulp.dest('./'));
});

gulp.task('default',['browserify']);

進階一點的使用方式: gulpfile.js

var browserify = require('browserify'),
    gulp = require('gulp'),
    uglify =  require('gulp-uglify'),//will compress source code
    source = require('vinyl-source-stream'),//returns a streaming vinyl object where as uglify expects buffered vinyl file objects.
    buffer     = require('vinyl-buffer');// will convert streaming vinyl files to use buffer. 

gulp.task('browserify', function() {
    return browserify('./main.js')
        .bundle()
        // pass desired output filename to vinyl-source-stream
        .pipe(source('boundle.js'))
        .pipe(buffer())
        .pipe(uglify())
        .pipe(gulp.dest('./'));
});

gulp.task('default',['browserify']);

watchify 即時監聽

將上面 browserify修改成監聽模式，先安裝 watchify

npm install watchify --save

要等到檔案變更之後，才會觸發 gulpfile.js

var browserify = require('browserify'),
    gulp = require('gulp'),
    watchify = require('watchify'),//watchify
    source = require('vinyl-source-stream');//returns a streaming vinyl object where as uglify expects buffered vinyl file objects.

var b = browserify({
  entries: ['./main.js'],
  cache: {},// required for watchify
  packageCache: {},// required for watchify
  plugin: [watchify]
});
 
function bundle() {
    return b.bundle()
        // pass desired output filename to vinyl-source-stream
        .pipe(source('boundle.js'))
        .pipe(gulp.dest('./'));
}
bundle();

b.on('update', bundle);

gulp.task('default');

Browserify 入門