简介

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进修历程。