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