關於網路那些事...

網路行銷,SEO,網路趨勢,教學文章,網頁設計,生活時事

Browserify 入門


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

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

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

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

安裝 browserify

首先,安裝 browserify

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 main.js,就能看到輸出結果為555

接下來用 exports 試試看

foo.js

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

如果你喜歡我們的文章內容,請在這裡按個讚



最新文章推薦