1. Browserify介绍
Browserify的出现可以让Nodejs模块跑在浏览器中,用require()的语法格式来组织前端的代码,加载npm的模块。在浏览器中,调用browserify编译后的代码,同样写在<script>标签中。
用 Browserify 的操作,分为3个步骤。
- 1. 写node程序或者模块
- 2. 用Browserify 预编译成 bundle.js
- 3. 在HTML页面中加载bundle.js
Browserify 的发布页:http://browserify.org/
2. Browserify安装
1 | npm install browserify -g |
3. Browserify命令行参数
- –outfile, -o: browserify日志打印到文件
- –require, -r: 绑定模块名或文件,用逗号分隔
- –entry, -e: 应用程序的入口
- –ignore, -i: 省略输出
- –external, -x: 从其他绑定引入文件
- –transform, -t: 对上层文件进行转换
- –command, -c: 对上层文件使用转换命令
- –standalone -s: 生成一个UMB的绑定的接口,提供给其他模块使用。
- –debug -d: 激活source maps调试文件
- –help, -h: 显示帮助信息
- –insert-globals, –ig, –fast: 跳过检查,定义全局变量。[default:false]
- –detect-globals, –dg: 检查全局变量是否存在。 [default:true]<
- –ignore-missing, –im: 忽略require()函数。[default: false]
- –noparse=FILE: 不解析文件,直接build。
- –deps: 打印完整输出日志
- –list: 打印每个文件的依赖关系
- –extension=EXTENSION: 指名扩展名的文件做为模块加载,允许多次设置
4. Browserify使用:在浏览器中运行Nodejs程序
使用命令 :
1 | browserify index.js > bundle.js |
将你的node程序 index.js 编译为浏览器可用的文件 bundle.js,然后就可以像普通的js那样使用bundle.js
5. 在浏览器中调用Nodejs模块
使用命令:
1 | browserify -r zlib > zlib.js |
就可以将nodejs内置模块zlib编译为浏览器可用的文件zlib.js,使用
1 | <script src="zlib.js"></script> |
将其加载到浏览器,
然后你就可以像node中一样:
1 | var zlib = require('zlib'); |
了。 同样它也可以编译你自己写的模块 ,或将node代码打包成模块
browserify -r ./sign.js:sign > sign2.js
这里./sign.js 前面的./ 不能少 否则browserify会去找名叫sign.js 的模块;
冒号后面是打包成的模块名,即require('sign');
sign2.js 是打包后的文件名