前端模块化工具 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