前端模块化工具 Browserify

Browserify 是什么

Browserify 是一个浏览器端代码模块化的工具

为什么要使用 Browserify 

浏览器端的代码模块化有2个明显的好处：

1）前端JS可以使用npm包

我们知道 npm 中有非常丰富的功能包，但没法在浏览器中直接用，因为他们是按照 nodejs 模块化标准写的，使用 require 和 module.exports 引用和构造模块，浏览器不支持此类语法，所以需要浏览器端模块化工具的支持，这样就相当于给浏览器端增加了 npm 库

2）模块化开发

现在前端JS代码越来越多，可以通过模块化，把一个大的JS代码分割成不同的模块，存储在不同文件中，提高项目规范化，便于开发和维护

Browserify 工作原理

开发时使用nodejs的模式，正常使用 require 和 module.exports，在部署前使用 Browserify 进行编译

Browserify 会对代码进行解析，整理出代码中的所有模块依赖关系，然后把相关的模块代码都打包在一起，形成一个完整的JS文件，这个文件中不会存在 require 这类的模块化语法，变成可以在浏览器中运行的普通JS

使用实例

先安装 Browserify

$ npm install -g browserify

安装完成后，开始实践

实例1：使用 npm 包

安装一个 npm 包

$ npm install uniq

新建 main.js，使用 uniq 的功能

var uniq = require('uniq');
var nums = [1, 2, 2, 3, 4, 5, 5, 5, 6];
console.log(uniq(nums));

执行测试

$ node main.js

输出

[ 1, 2, 3, 4, 5, 6 ]

使用 Browserify 编译打包

$ browserify main.js > bundle.js

新建 test.html，引用 bundle.js

<script src="bundle.js"></script>

在浏览器中测试，会在console成功打印出结果信息



实例2：自定义模块

定义模块，新建 foo.js

module.exports = function (n) { 
    return n * 111 
}

调用模块，新建 test.js

var foo = require('./foo.js');
console.log(foo(5));

执行测试 

$ node test.js

输出 555

使用 Browserify 编译打包

$ browserify test.js > bundle.js

和上个例子一样，还是输出到 bundle.js，刷新浏览器中的 test.html，就可以在 console 中看到输出：555

Debug

Browserify 打包出来的是混合代码，不利于查看

例如

比我们原始的 test.js 复杂很多，所以 Browserify 提供了 debug 模式，可以让我们在开发阶段使用

编译打包时加上 debug 选项

$ browserify test.js > bundle.js --debug

刷新浏览器



这时显示的就不是 bundle.js 而是 test.js



点击进来后，进入了原始的 test.js

自动打包

在开发过程中，频繁的手动执行 browserify 命令也是挺麻烦的，最好能在源文件变化后自动打包

watchify 可以实现这个需求，先安装

$ npm install -g watchify

然后使用 watchify 替代 browserify 命令

$ watchify test.js -d -o bundle.js -v
1840 bytes written to bundle.js (0.05 seconds)
1840 bytes written to bundle.js (0.01 seconds)
1840 bytes written to bundle.js (0.01 seconds)

这样就会监听 test.js 及其引用的相关模块的变化，代码被修改后，马上会自动打包，并输出打包信息，所以修改代码后，直接刷新浏览器就可以了

从上面的信息中可以看到，第二次打包的时间比第一次短了不少，这是因为 watchify 有加速功能，这在大项目中非常有用

小结

简单介绍了一下 Browserify 的基本用法，希望对您的前端开发有帮助，更多用法可以查看官网 http://browserify.org