简介
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
。
javascript
var 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学习过程。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。