NPM中有几十万Node.js模块,利用这些模块可以帮助我们快速构建应用,减少开发工作量。通过Browserify
可以让我们使用类似 Node.js 的require()
方式来组织浏览器端的 Javascript 代码,并可以浏览器直接使用一些NPM包。
Browserify
会递归分析所有通过require()
引用的程序约束,并最终构建一个的可以浏览器端通过<script>
标签引用的独立文件。
1. 安装Browserify
使用npm
命令安装:
npm install -g browserify
2. 使用
命令格式:
browserify [输入文件] {选项}
标准选项:
--outfile, -o
,输出browserify绑定文件到这个文件。如果未指定,将输出到标准输出--require, -r
,绑定文件名或模块名。多个以逗号分隔--entry, -e
,应用程序入口--ignore, -i
,省略输出--exclude, -u
,从输出包中省略的文件--external, -x
,从其它绑定文件引入的文件--transform, -t
,使用转换模块对上层文件进行转换--command, -c
,使用转换命令对上层文件进行转换--standalone -s
,生成一个UMB的绑定的接口,提供给其他模块使用。--debug -d
,使用source maps的调试文件
高级选项:
--insert-globals, --ig, --fast
,默认false。跳过检查--insert-global-vars, --igv
,插入逗号分隔的全局变量。默认:__filename、__dirname、process、Buffer、global–detect-globals, –dg
,检查全局变量:__filename、__dirname、process、Buffer、global是否存在--ignore-missing, --im
,忽略'require()'声明--noparse=FILE
,不解析的文件FILE
,直接绑定到输出--no-builtins
,关闭内置,当要在一个节点上运行绑定时,需要设置此项提供内部核心功能--no-commondir
,关闭 commondir 设置,当需要保留包的原始路径时,要设置此项--no-bundle-external
,关闭所有外部模块的绑定。当只需要绑定本地模块时,需要设置此项--bare
,--no-builtins, --no-commondir两个命令的别名,并设置__filename、__dirname
全局变量。--no-browser-field, --no-bf
,在浏览器环境关闭package.json
--node
,--bare 和 --no-browser-field的别名--full-paths
,关闭转换模块的id为数字索引。需要保留包的原始路径时,要设置此项--deps
,替换绑定的输出,打印依赖模块的数组--list
,打印依赖关系图--extension=EXTENSION
,指定模块的扩展名EXTENSION
,这个选项可以多次指定--global-transform=MODULE, -g MODULE
,在普通转换后,使用一个转换模块运行所有文件--plugin=MODULE, -p MODULE
,将模块注册为插件
3. 使用示例
外部使用require
使用Browserify
,我们可以轻松的创始一个绑定输出,它会导出require()
函数,这样我们能够在浏览器端另一个<script>
标签中使用require()
引用模块。
如,我们使用了through和duplexer两个模块,使用下面命令可以导出一个在浏览器端使用的输出文件:
browserify -r through -r duplexer -r ./my-file.js:my-module > bundle.js
在浏览器端,我们可以像下面这样引用:
<script src="bundle.js"></script> <script> var through = require('through'); var duplexer = require('duplexer'); var myModule = require('my-module'); /* ... */ </script>
source maps的使用
当你要建立一个单独的.js.map
文件,exorcist模块能帮你实现:
browserify main.js --debug | exorcist bundle.js.map > bundle.js
多绑定
如果browserify
发现require()
函数在页面范围已经存在,那么就会使用这个函数。当没有找到时,就会绑定模块输出。
在这种模式下,browserify
会分隔多个页面的缓存共享,没有变化的模块可以继续使用require()
。这时,在输出命令中使用--external
和--external
参数即可。
如,一个站点中两个页面使用了beep.js
文件
var robot = require('./robot.js'); console.log(robot('beep'));
和boop.js
文件
var robot = require('./robot.js'); console.log(robot('boop'));
而这两个文件都依赖robot.js
文件:
module.exports = function (s) { return s.toUpperCase() + '!' };
browserify -r ./robot.js > static/common.js browserify -x ./robot.js beep.js > static/beep.js browserify -x ./robot.js boop.js > static/boop.js
然后可以在两个共用的页面像下面这样使用:
<script src="common.js"></script> <script src="beep.js"></script>