使用Browserify

Browserify,可以让你在浏览器端编程,使用nodejs的require('modules')管理javascript代码之间的依赖关系。

安装

建议使用nvm安装的nodejs,好处是npm install -g也不需要sudo权限。

安装browserify

1
npm install -g browserify

极简示例,说明browserify的使用

见:https://github.com/MarshalW/BrowserifyDemo/tree/m1

想使用这个示例,还需要先生成bundle.js文件:

1
$ browserify script/app.js -o > script/bundle.js

然后,浏览器打开index.html,查看日志有如下文字:

1
>>>>generate!

这里,app.js是网页javascript的总入口:

1
2
3
var generator=require('./generator');

generator.generate();

browserify会根据这个文件中的require做递归分析,将所有相关javascript文件生成一个大的文件: bundle.js。单一文件的好处是减少网络IO的时间。

这里创建了一个module,即:generator.js

1
2
3
exports.generate = function(name) {
console.log('>>>>generate!');
};

自动化browserify过程

这里使用gulp实现自动化生成bundle.js

代码见:https://github.com/MarshalW/BrowserifyDemo/tree/m2

使用前,需要先:

1
$ npm install

然后执行:

1
$ gulp

script目录下将生成bundle.js文件。