Browserify 让Node(npm)模块在浏览器中运行

 2016年02月08日    639     声明


NPM中有几十万Node.js模块,利用这些模块可以帮助我们快速构建应用,减少开发工作量。通过Browserify可以让我们使用类似 Node.js 的require()方式来组织浏览器端的 Javascript 代码,并可以浏览器直接使用一些NPM包。

Browserify会递归分析所有通过require()引用的程序约束,并最终构建一个的可以浏览器端通过<script>标签引用的独立文件。


  1. 安装Browserify
  2. 使用
  3. 使用示例


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()引用模块。

如,我们使用了throughduplexer两个模块,使用下面命令可以导出一个在浏览器端使用的输出文件:

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>