Browserify簡易入坑指南

簡介

browerify: http://browserify.org/index.html

browserify能夠看作瀏覽器端的又一個模塊化工具，在ES6模塊規範在前端大規模落地以前更優雅的選擇。

簡要說明

browserfify長處在於使用node-flavor模塊規範，而不是requirejs使用的AMD模塊規範，以及seajs使用的CMD模塊規範。打包處理後通常單頁面僅爲一個js文件（固然，文件size至關可觀）。相對於其餘規範，最直接的好處是能夠直接使用Node生態中先後端功用模塊，例如uniq, underscore等不依賴Node環境的包，以及superagent這種作過瀏覽器適配的包。

簡單使用

關於命令行工具使用，請參照官方文檔。在使用中，由於使用webstorm，使用watch的話，每次自動保存都會自動觸發，加劇系統無謂的負擔，因此在開發中，能夠選擇直接調用API的方式，以下使用koa做爲簡單的server，部分代碼以下：

javascript"use strict";

var util = require('util');
var through = require('through-gulp');

function streamToPromise(stream) {
  if (util.isUndefined(stream.pipe)) return Promise.reject('argument is not stream');

  return new Promise(function(resolve, reject) {
    var destiny = new Buffer('');

    stream.pipe(through(function(data, encoding, callback) {
      destiny = Buffer.concat([destiny, data]);
      callback();
    }, function(callback) {
      resolve(destiny);
      callback();
    }))
  });
}

module.exports = streamToPromise;

此處代碼將stream轉換爲promise。

javascriptvar transform = require('./promise-stream');
app.use(function *(next) {
  if (this.path.startsWith('/browserify')) {
    var bundle = browserify(path.join(__dirname, 'static', this.path)).bundle();
    bundle = yield transform(bundle);
    this.type = "application/javascript";
    this.body = bundle.toString();
    return null;
  }
  yield next;
});

此處代碼，將browserify文件夾內部的js文件，都是用browserify處理，返回處理後的數據。若是依賴文件較大的話，時間會比較長，視具體環境而定。

相同模塊重複依賴

模塊重複依賴很容易理解，模塊實現時可能分割爲多個子文件實現，每一個子文件內部可能會引用同一個模塊，如util。在node環境下很好理解，在browserify處理後的瀏覽器環境下，該模塊能夠看作是個單例，不一樣文件內部引用的同名模塊，能夠看作引用的同一個變量，簡單示例全部文件均放置於browserify文件夾下，代碼以下：

javascript// core.js
var utils = { "age" : 12 };
utils.increase = function() {
  this.age += 1;
};
module.exports = utils;

javascript// repeat.js
var repeat = require('./core');
module.exports = repeat;

javascript// pristine.js
var pristine = require('./core');
module.exports = pristine;

javascript// index.js
var first = require('./pristine');
var second = require('./repeat');

first.increase();
second.increase();
console.log(first);
console.log(second);

瀏覽器執行，輸出結果result.age均爲14，和預想結果匹配。

Karma集成測試

須要用到文件預處理器，karma-browserify: https://www.npmjs.com/package/karma-browserify。

與karma的AMD模塊測試文件組織結構與引入不一樣，AMD將測試文件以模塊方式定義，配置中將待測試文件，測試文件設置爲served，而後由單一入口文件加載測試文件。使用browserify做爲模塊化工具時，須要顯式引入測試文件，配合karma-browerify使用，示例以下：

javascript// ./browserify/utils.js
var uniq = require('uniq');
var utils = {};

utils.uniq = uniq;
utils.sum = function(value) {
  return value.reduce(function(prev, next) {
    return prev + next;
  }, 0);
};

module.exports = utils;

javascript// ./browserify_test/utils.spec.js
var utils = require('../browserify/utils');

describe('browserify style module', function () {
  it('should uniq array with repeat value', function () {
    var source = [1, 2, 3, 2, 3, 4];
    expect(utils.uniq(source)).toEqual([1, 2, 3, 4]);
  });

  it('should sum array with number value', function () {
    var source = [1, 2, 3, 4];
    expect(utils.sum(source)).toEqual(10);
  });
});

詳情移步https://github.com/bornkiller/ModuleBoilerplate。
注意若是使用webstorm，會出現https://github.com/nikku/karma-browserify/issues/23 BUG，修改測試文件，若是不重啓karma server的話，測試文件內容不會改變。

後記

學習使用React的過程當中，由於React ES-forward的代碼風格，略顯不適應，因此選擇先學習使用browserify工具，而後延續React學習過程。