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学习过程。