随着JavaScript程序逐渐模块化，在ECMAScript 6推出官方的模块处理方案之前，有两种方案在实践中广泛采用：一种是AMD模块规范，针对模块的异步加载，主要用于浏览器端；另一种是CommonJS规范，针对模块的同步加载，主要用于服务器端，即node.js环境。

Browserify是一个node.js模块，主要用于改写现有的CommonJS模块，使得浏览器端也可以使用这些模块。使用下面的命令，在全局环境下安装Browserify。

$ npm install -g browserify

基本用法

先看一个例子。假定有一个很简单的CommonJS模块文件foo.js。

// foo.js module.exports = function(x) { console.log(x); };

然后，还有一个main.js文件，用来加载foo模块。

// main.js var foo = require("./foo"); foo("Hi");

使用Browserify，将main.js转化为浏览器可以加载的脚本compiled.js。

browserify main.js > compiled.js # 或者 browserify main > compiled.js # 或者 browserify main.js -o compiled.js

之所以转化后的文件叫做compiled.js，是因为该文件不仅包括了main.js，还包括了它所依赖的foo.js。两者打包在一起，保证浏览器加载时的依赖关系。

使用上面的命令，在浏览器中运行compiled.js，控制台会显示Hi。

我们再看一个在服务器端的backbone模块转为客户端backbone模块的例子。先安装backbone和它所依赖的jQuery模块。

npm install backbone jquery

然后，新建一个main.js文件。

// main.js var Backbone = require('backbone'); var $ = Backbone.$ = require('jquery/dist/jquery')(window); var AppView = Backbone.View.extend({ render: function(){ $('main').append('
Browserify is a great tool.
'); } }); var appView = new AppView(); appView.render();

接着，使用browserify将main.js转为app.js。

browserify main.js -o app.js

app.js就可以直接插入HTML网页了。

注意，只要插入app.js一个文件就可以了，完全不需要再加载backbone.js和jQuery了。

管理前端模块

Browserify的主要作用是将CommonJS模块转为浏览器可以调用的格式，但是纯粹的前端模块，也可以用它打包。

首先，新建一个项目目录，添加package.json文件。

{ "name": "demo", "version": "1.0.0" }

接着，新建index.html。

    
   Roll over to see the tip   

可以看到，-r参数的另一个作用，就是为浏览器端提供require方法。

脚本文件的实时生成

Browserify还可以实时生成脚本文件。

下面是一个服务器端脚本，启动Web服务器之后，外部用户每次访问这个脚本，它的内容是实时生成的。

var browserify = require('browserify'); var http = require('http'); http.createServer(function (req, res) { if (req.url === '/bundle.js') { res.setHeader('content-type', 'application/javascript'); var b = browserify(__dirname + '/main.js').bundle(); b.on('error', console.error); b.pipe(res); } else res.writeHead(404, 'not found') });

browserify-middleware模块

上面是将服务器端模块直接转为客户端脚本，然后在网页中调用这个转化后的脚本文件。还有一种思路是，在运行时动态转换模块，这就需要用到 browserify-middleware模块 。

比如，网页中需要加载app.js，它是从main.js转化过来的。

你可以在服务器端静态生成一个app.js文件，也可以让它动态生成。这就需要用browserify-middleware模块，服务器端脚本要像下面这样写。

var browserify = require('browserify-middleware');var express = require('express');var app = express(); app.get('/app.js', browserify('./client/main.js')); app.get('/', function(req, res){ res.render('index.html'); });

参考链接

• Jack Franklin,Dependency Management with Browserify

• Seth Vincent,Using Browserify with Express

• Patrick Mulder,Browserify - Unix in the browser

• Patrick Catanzariti,Getting Started with Browserify

• Lin Clark,Using jQuery plugins with npm