5

简介

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

karmaAMD模块测试文件组织结构与引入不同,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学习过程。


怀疑真爱的流浪者jason
923 声望62 粉丝

For every single second in life, I want to fight with the monster deep within my heart , and I want to win.........