browserify的介绍

Browserify 的介绍

browserify 是一个编译工具，是目前比较流行的模块打包工具之一(另外一个是webpack)，browserify 是基于流式思想设计；可以通过命令行，也可以通过API来使用，是模块化的逆过程，但是推动模块化的快速发展，它可以使用类似于node的require()的方式来组织浏览器端的JavaScript代码，通过预编译可以让前端的JavaScript直接使用npm安装一些库

安装和简单的使用

全局安装：npm install -g browserify

使用：browserify main.js > compiled.js

也就意味着main.js这个文件和依赖的的其他文件都会编译进compiled.js

编译好的文件的使用：

    <script src="./compiled.js"></script>

browserify 的工作原理

总体过程可以分为两个部分：预编译阶段和执行阶段

预编译阶段

1.从入口模块开始，分析代码中 require 函数的调用

2.生成AST

3.根据AST找到每个模块require的模块名

4.得到每个模块的依赖关系

5.包装每个模块,生成用于执行的

执行阶段

从入口模块开始执行，递归执行所有的require的模块，得到依赖对象

具体分析

由于浏览器原生是没有原生的require函数，所以require函数是需要自己实现的，因此第一步我们需要知道一个模块的代码中，哪些地方用了require函数，依赖了什么模块，browserify实现的原理是为了代码文件生成抽象语法树（AST，也称语法树，也就是语法分析的产物），根据AST，就可以找到require函数依赖的模块

举个例子，如下面的代码

var velement = require('./velement');
var diff = require('./diff');
var patches = diff(vdom, newVdom);

生成的抽象语法树的样子：查看这里

代码如下：

var diff = require('./diff');
var patches = diff(vdom, newVdom);

生成的语法树如下：网站

与之对应的JSON结构：网站

{"type": "Program","start": 0,"end": 245,"body": [{"type": "VariableDeclaration","start": 180,"end": 209,"declarations": [{"type": "VariableDeclarator","start": 184,"end": 208,"id": {"type": "Identifier","start": 184,"end": 188,"name": "diff"},"init": {"type": "CallExpression","start": 191,"end": 208,"callee": {"type": "Identifier","start": 191,"end": 198,"name": "require" },"arguments": [{"type": "Literal","start": 199,"end": 207,"value": "./diff","raw": "'./diff'" }]}}],"kind": "var"},{"type": "VariableDeclaration","start": 210,"end": 244,"declarations": [{"type": "VariableDeclarator","start": 214,"end": 243,"id": {"type": "Identifier","start": 214,"end": 221,"name": "patches"},"init": {"type": "CallExpression","start": 224,"end": 243,"callee": {"type": "Identifier","start": 224,"end": 228,"name": "diff" },"arguments": [{"type": "Identifier","start": 229,"end": 233,"name": "vdom" },{"type": "Identifier","start": 235,"end": 242,"name": "newVdom" }]}}],"kind": "var"}],"sourceType": "module"
}

在上面的结构中，也可以很轻易的看到使用require的地方，就在第一个init里面，由此也可以发现，它的type为callExpression，callee的name为require，arguments的value为引入的模块的名称，所以也就可以根据这些特点找到require的模块名，得到每个模块的依赖关系之后，生成一个依赖字典，这个字典记录了哪些模块，以及模块各自依赖的模块，通过依赖字典，就很容易得知代码中的依赖关系。

下面就需要代码执行了，也就是要实现浏览器并不支持的export和require，所以就需要对原有的模块进行包装，所以就需要实现export和require，export的实现，创建一个对象作为该模块的export，require的实现就要依赖之前的依赖字典，根据传入的模块名，在依赖字典里找到依赖的函数模块，然后一直执行（递归执行）

在browserify生成的JavaScript文件当中，会添加以下require的实现代码，并传递给每个模块函数

(function e(t,n,r){   //t是传入的依赖字典，n是一个空对象，用于保存所有新创建的模块（exports对象）function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s
})