媒介

babel是如今险些每一个项目中必备的一个东西，然则其事情道理避不开对js的剖析在天生的历程，babel有引擎babylon，初期fork了项目acron，相识这个之前我们先来看看这类引擎剖析出来是什么东西。不光是babel另有webpack等都是经由过程javascript parser将代码转化成笼统语法树，这棵树定义了代码自身，经由过程操纵这颗树，能够精准的定位到赋值语句、声明语句和运算语句

什么是笼统语法树

我们能够来看一个简朴的例子：

var a = 1;
var b = a + 1;

我们经由过程这个网站，他是一个esprima引擎的网站，非常好用.画成流程图以下：

而他的json对象花样是如许的：

{
    "type": "Program",
    "body": [
        {
            "type": "VariableDeclaration",
            "declarations": [
                {
                    "type": "VariableDeclarator",
                    "id": {
                        "type": "Identifier",
                        "name": "a"
                    },
                    "init": {
                        "type": "Literal",
                        "value": 1,
                        "raw": "1"
                    }
                }
            ],
            "kind": "var"
        },
        {
            "type": "VariableDeclaration",
            "declarations": [
                {
                    "type": "VariableDeclarator",
                    "id": {
                        "type": "Identifier",
                        "name": "b"
                    },
                    "init": {
                        "type": "BinaryExpression",
                        "operator": "+",
                        "left": {
                            "type": "Identifier",
                            "name": "a"
                        },
                        "right": {
                            "type": "Literal",
                            "value": 1,
                            "raw": "1"
                        }
                    }
                }
            ],
            "kind": "var"
        }
    ],
    "sourceType": "script"
}

浩瀚的引擎

chrome有v8，firefix有spidermonkey.另有一些经常使用的引擎有：

• esprima
• acron
• Traceur
• UglifyJS2
• shift

下面是一些引擎的速率对照，以及用差别的框架，引擎们的加载速率：

我个人认为，封装的越圆满的，实在剖析的时候更长，引擎之间也是acron这个速率比较优异，babel引擎前身就是fork这个项目的。

AST的三板斧

• 经由过程esprima天生AST
• 经由过程estraverse遍历和更新AST
• 经由过程escodegen将AST从新天生源码

我们能够来做一个简朴的例子：

1.先新建一个test的工程目次
2.在test工程下装置esprima、estraverse、escodegen的npm模块

npm i esprima estraverse escodegen --save

3.在目次下面新建一个test.js文件,载入以下代码：

const esprima = require('esprima');
let code = 'const a = 1';
const ast = esprima.parseScript(code);
console.log(ast);

你将会看到输出效果：

Script {
  type: 'Program',
  body:
   [ VariableDeclaration {
       type: 'VariableDeclaration',
       declarations: [Array],
       kind: 'const' } ],
  sourceType: 'script' }

4.再在test文件中，载入以下代码：

const estraverse = require('estraverse');

estraverse.traverse(ast, {
    enter: function (node) {
        node.kind = "var";
    }
});

console.log(ast);

输出的效果：

Script {
  type: 'Program',
  body:
   [ VariableDeclaration {
       type: 'VariableDeclaration',
       declarations: [Array],
       kind: 'var' } ],
  sourceType: 'script' }

5.末了在test文件中，到场以下代码：

const escodegen = require("escodegen");
const transformCode = escodegen.generate(ast)

console.log(transformCode);

输出的效果：

var a = 1;

• 经由过程这三板斧：我们将const a = 1转化成了var a = 1

有无babel的觉得0.0

引荐网站

esprima源码
acron源码
speed comparison
AST explorer
esprima可视化
在线可视化AST

总结

笼统树在前端用的许多许多，如今盛行的东西，不管是webpack照样babel都邑经由过程谁人三板斧的流程，这里我只是大抵引见一下，过段时候，会出一篇笼统树的语法，有兴致的也能够把esprima的源码看一下，为何是esprima呢，由于esprima的材料比较多，而acron比较轻量级。有兴致的能够关注一下我的[github](),记得点个star，就当是对笔者的支撑，感谢。