browserify使用简介

概述

最近在使用vue框架重构公司的一个微信端产品，要想发挥vue的强大功能，离不开browserify或者webpack这些构建工具，基于这些构建工具可以在vue开发中使用ES6语法，单文件组件等特性，我个人更倾向于使用browserify构建工具,使用browserify工具可以在浏览器平台上提供像在node平台一样的开发体验，下面几篇文章将介绍下browserify构建的详细用法。

安装

cd app;
//初始化项目
npm init
//安装browserify
npm install browserify --save-dev

基本用法

在package.json中的scripts属性中添加以下命令：

 "xxx"   : "browserify ./source/module.js -o ./dist/dist.js"
或者
"xxx"   : "browserify ./source/module.js > ./dist/dist.js"

在当前目录打开命令窗口:

npm run xxx

即可在dist目录下看到打包后的dist.js文件。
browserify 后面的第一个参数表示要打包的前端程序的入口，-o或者>表示打包后的输出文件。browserify会根据入口文件中的require或者import(ES6,需要安装babel)自动完成依赖分析，并将依赖文件打包为一个单文件。

下面是API的调用方式:

var Browserify = require("browserify");
var fs = require("fs");

var b = new Browserify();
//入口文件
b.add("../source/module.js");
//打包输出
b.bundle().pipe(fs.createWriteStream("../dist/dist.js"));

将部分依赖文件打包为符合commonjs规范的模块，外部可以通过require调用其中暴露的api,输入结果仍为单文件

下面是测试代码，有三个模块(文件):modulea,moduleb,module,其中module依赖modulea和moduleb

modulea:

module.exports = {
    name:"moduleA",
    getName:function(){
        console.log(this.name);
    }
}

moduleb:

module.exports = {
    name:"moduleB",
    getName:function(){
        return this.name;
    }
}

module:

var moduleA = require("ma");
var moduleB = require("mb");

moduleA.getName();

命令脚本:

browserify -r ./source/modulea.js:ma -r ./source/moduleb.js:mb  ./source/module.js > ./dist/bundle.js

新建index.html，源码如下:

控制台打印如下:

上述过程也可以通过调用API编码实现,结果和上面是一样的:

var browserify = require("browserify");
var path = require("path");
var fs = require("fs");

var sourcepath = path.resolve(__dirname,"../","source");
var dist = path.resolve(__dirname,"../","dist");

var b = browserify();
b.add(path.join(sourcepath,"module.js"));
b.require(path.join(sourcepath,"modulea.js"),{expose:"ma"});
b.require(path.join(sourcepath,"moduleb.js"),{expose:"mb"});
b.bundle().pipe(fs.createWriteStream(path.join(dist,"bundle.js")));

将依赖模块独立打包，最终输出多个文件，模块间可以通过require调用

有些场景下，比如有多个页面，每个页面都需要依赖common.js，这个时候将每个页面的js打包为一个文件就不合适，commonjs的代码会重复出现在多个文件中，而且也不利于缓存优化。

browserify提供了三种方式支持多JS文件：

第一种方式目前不知道有什么用处，第三种方式打包的时候，我在win10平台上打包的文件路径有问题，需要对引用路径特别注意，尤其是调用API打包的时候。因此我推荐使用第二种打包方式。

举例：有两个文件base.js和demo2.js，其中base.js是基础类包，可能在多个页面中都需要，现在将base.js和demo2.js分别打包：

base.js:

module.exports = {
    name:"base",
    getName:function(){
        return this.name;
    }
}

demo2.js:

var com = require("common");
console.log(com.getName());

打包脚本:

browserify -r ./source/base.js:common > ./dist/common.js
browserify -u common ./source/demo2.js > ./dist/bundle.js

index.html源码如下:

<script type="text/javascript" src="./dist/common.js"></script>
    <script type="text/javascript" src="./dist/bundle.js"></script>
    <script type="text/javascript">
        var com = require("common");
        console.log(com.getName());
    </script>

控制台输出如下：

调用API打包源码如下：

var browserify = require("browserify");
var path = require("path");
var fs = require("fs");

var b = new browserify();
b.require(path.resolve(__dirname,"../source/base.js"),{
    expose:"common"
});
b.bundle().pipe(fs.createWriteStream("../dist/common.js"));

var b2 = new browserify();
b2.exclude("common");
b2.add("../source/demo2.js");
b2.bundle().pipe(fs.createWriteStream("../dist/bundle.js"));

使用browserify构建工具可以直接使用一些原来只有在node平台上才有的API

比如url,path,stream,buffer,process等等。

transform

browserify提供了非常方便的transform接口来扩展打包行为。一个基本的transform接口定义格式如下：

var through2 = require("through2");

module.exports = function(file,opts){
    return through2(function(chunk,enc,next){
        //自定义transform逻辑
    });
}

定义完成后，可以通过-t命令指定该文件，将自定义行为应用到打包中，也可以通过package.json的配置文件来配置过滤器：

"browserify":{
"transform":[
  "./customTransform.js"
]
}

许多知名的框架为了用户方便的使用browserify，都提供了现成的xxxify模块，比如babelify,vueify等。