胖蔡说技术Broswerify 是一个前端管理依赖的工具，通过它可以在浏览器环境下像nodejs一样遵循commonjs规范的模块化编程。
为什么要使用Browserify
浏览器没有定义require方法，但是Node.js有。使用Browserify可以编写使用require的代码，就像在Node中使用它一样。
原理
Browserify从entry着手，对源代码进行抽象语法树分析，从而获得整个项目的依赖关系图，最后将整个项目打包成一个JavaScript文件。特点如下:
- 浏览器端的前端打包工具
- 主要用于在浏览器中使用 npm 包，最终会转换为 commonJS (require) 类似方式，在浏览器使用
- 方便模块细分，每个模块自成，通过 require 引用其他模块
- 基于流 Stream
实现
- 创建add.js文件
module.exports.add = function(a,b) {
return a + b;
}
- 创建reduce.js文件
module.exports.reduce = function(a,b){
return a-b;
}
- 创建 index.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Browserify 测试</title>
</head>
<body align="center">
<h3>Browserify 测试</h3>
<form style="text-align: left;margin-left: 40%;">
<input name="a" type="input" placeholder="请输入第一个操作数"/>
<input name="b" type="input" placeholder="请输入第二个操作数"/>
<div style="margin-top: 20px;">合计：<span id="result"></span></div>
<div style="margin-top: 20px;">
<button id="add" type="button">加法</button>
<button id="reduce" type="button" style="margin-left: 30px;">减法</button>
</div>
</form>
<script src="./bundle.js" ></script> <!--打包生成文件 -->
</body>
</html>
- 创建main.js文件
var { add } = require('./add');
var { reduce } = require('./reduce');
// 加法
document.getElementById('add').onclick = function () {
const a = document.getElementsByName('a')[0].value;
const b = document.getElementsByName('b')[0].value;
document.getElementById('result').innerHTML = add(a,b);
}
// 减法
document.getElementById('reduce').onclick = function () {
const a = document.getElementsByName('a')[0].value;
const b = document.getElementsByName('b')[0].value;
document.getElementById('result').innerHTML = reduce(a,b);
}
- 生成 bundle.js文件
$ npm install -g browserify
$ browserify main.js > bundle.js效果
