资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Browserify简易入坑指南

Browserify简易入坑指南

vpants / 1888人阅读

摘要：简要说明长处在于使用模块规范，而不是使用的模块规范，以及使用的模块规范。简单使用关于命令行工具使用，请参照官方文档。相同模块重复依赖模块重复依赖很容易理解，模块实现时可能分割为多个子文件实现，每个子文件内部可能会引用同一个模块，如。

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

混合云 专线服务 browserify 入坑篇 小入坑 入坑到放

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/85641.html

相关文章

  • Vuejs自己的构建工具

    摘要：然而，这些模板并不限制你自己对于使用的架构组织和选择类库。目前可用的模板包括全功能的，包括热加载，静态检测，单元测试一个简易的，以便于快速开始。 最近， 尤大在和人对喷的时候，悄然放出了一个大招，于是为了追赶他的步伐，赶紧试验了下，并且把原文给大家翻译下。 原文地址：Announcing vue-cli 译文源地址： Vuejs自己的构建工具 先上原文翻译： 最近有很多大量关于Reac...

    leoperfect 评论0 收藏0

  • 学习不一样的vue实战(1): 环境搭建

    摘要：淘宝镜像是一个完整镜像，你可以用此代替官方版本只读，同步频率目前为分钟一次以保证尽量与官方服务同步。全功能的，包括热加载，静态检测，单元测试一个简易的，以便于快速开始。 showImg(https://segmentfault.com/img/bVOBkJ?w=900&h=500); 首先 首发博客: 我的博客 项目源码: 源码 项目预览: 预览 因为个人的喜好和工作的需要,一直...

    BoYang 评论0 收藏0

  • 学习不一样的vue实战(1): 环境搭建

    摘要：淘宝镜像是一个完整镜像，你可以用此代替官方版本只读，同步频率目前为分钟一次以保证尽量与官方服务同步。全功能的，包括热加载，静态检测，单元测试一个简易的，以便于快速开始。 showImg(https://segmentfault.com/img/bVOBkJ?w=900&h=500); 首先 首发博客: 我的博客 项目源码: 源码 项目预览: 预览 因为个人的喜好和工作的需要,一直...

    Atom 评论0 收藏0

  • 学习不一样的vue实战(1): 环境搭建

    摘要：淘宝镜像是一个完整镜像，你可以用此代替官方版本只读，同步频率目前为分钟一次以保证尽量与官方服务同步。全功能的，包括热加载，静态检测，单元测试一个简易的，以便于快速开始。 showImg(https://segmentfault.com/img/bVOBkJ?w=900&h=500); 首先 首发博客: 我的博客 项目源码: 源码 项目预览: 预览 因为个人的喜好和工作的需要,一直...

    OnlyLing 评论0 收藏0

发表评论

登陆后可评论

0条评论

vpants

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<