Browserify 让Node（npm）模块在浏览器中运行

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

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

安装Browserify
使用
使用示例

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>

1. 安装Browserify

2. 使用

3. 使用示例

1. 安装`Browserify`