关于前端:从Babel开始认识AST抽象语法树

前言

AST形象语法树想必大家都有听过这个概念，然而不是只停留在听过这个层面呢。其实它对于编程来讲是一个十分重要的概念，当然也包含前端，在很多中央都能看见AST形象语法树的影子，其中不乏有vue、react、babel、webpack、typeScript、eslint等。简略来说凡是须要编译的中央你根本都能发现AST的存在。

babel是用来将javascript高级语法编译成浏览器可能执行的语法，咱们能够从babel登程来理解AST形象语法树。

如果这篇文章有帮忙到你，❤️关注+点赞❤️激励一下作者，文章公众号首发，关注 前端南玖 第一工夫获取最新文章～

babel编译流程

理解AST形象语法树之前咱们先来简略理解一下babel的编译流程，以及AST在babel编译过程中起到了什么作用？

我这里画了张图不便了解babel编译的整个流程

• parse： 用于将源代码编译成AST形象语法树
• transform： 用于对AST形象语法树进行革新
• generator： 用于将革新后的AST形象语法树转换成指标代码

很显著AST形象语法树在这里充当了一个中间人的身份，作用就是能够通过对AST的操作还达到源代码到指标代码的转换过程，这将会比暴力应用正则匹配要优雅的多。

AST形象语法树

在计算机科学中，形象语法树（Abstract Syntax Tree，AST） 是源代码语法结构的一种形象示意。它以树状的模式体现编程语言的语法结构，树上的每个节点都示意源代码中的一种构造。

尽管在日常业务中咱们可能很少会波及到AST层面，但如果你想在babel、webpack等前端工程化上有所深度，AST将是你深刻的根底。

预览AST

说了这么多，那么AST到底长什么样呢？

接下来咱们能够通过工具AST Explorer来直观的感受一下！

比方咱们如下代码：

let fn = () => {  console.log('前端南玖')}

它最终生成的AST是这样的：

• AST形象语法树是源代码语法结构的一种形象示意
• 每个蕴含type属性的数据结构，都是一个AST节点
• 它以树状的模式体现编程语言的语法结构，每个节点都示意源代码中的一种构造

AST构造

为了对立ECMAScript规范的语法表白。社区中衍生出了ESTree Spec，是目前前端所遵循的一种语法表白规范。

节点类型

公共属性

AST是如何生成的

一般来讲生成AST形象语法树都须要javaScript解析器来实现

JavaScript解析器通常能够蕴含四个组成部分：

• 词法分析器（Lexical Analyser）
• 语法解析器（Syntax Parser）
• 字节码生成器（Bytecode generator）
• 字节码解释器（Bytecode interpreter）

词法剖析

这里次要是对代码字符串进行扫描，而后与定义好的 JavaScript 要害字符做比拟，生成对应的Token。Token 是一个不可分割的最小单元。

词法分析器里，每个关键字是一个 Token ，每个标识符是一个 Token，每个操作符是一个 Token，每个标点符号也都是一个 Token，词法剖析过程中不会关怀单词与单词之间的关系.

除此之外，还会过滤掉源程序中的正文和空白字符、换行符、空格、制表符等。最终，整个代码将被宰割进一个tokens列表

javaScript中常见的token次要有：

关键字：var、let、const等标识符：没有被引号括起来的间断字符，可能是一个变量，也可能是 if、else 这些关键字，又或者是 true、false 这些内置常量运算符： +、-、 *、/ 等数字：像十六进制，十进制，八进制以及迷信表达式等字符串：变量的值等空格：间断的空格，换行，缩进等正文：行正文或块正文都是一个不可拆分的最小语法单元标点：大括号、小括号、分号、冒号等

比方咱们还是这段代码：

let fn = () => {  console.log('前端南玖')}

它在通过词法剖析后生成的token是这样的：

工具：esprima

[    {        "type": "Keyword",        "value": "let"    },    {        "type": "Identifier",        "value": "fn"    },    {        "type": "Punctuator",        "value": "="    },    {        "type": "Punctuator",        "value": "("    },    {        "type": "Punctuator",        "value": ")"    },    {        "type": "Punctuator",        "value": "=>"    },    {        "type": "Punctuator",        "value": "{"    },    {        "type": "Identifier",        "value": "console"    },    {        "type": "Punctuator",        "value": "."    },    {        "type": "Identifier",        "value": "log"    },    {        "type": "Punctuator",        "value": "("    },    {        "type": "String",        "value": "'前端南玖'"    },    {        "type": "Punctuator",        "value": ")"    },    {        "type": "Punctuator",        "value": "}"    }]

拆分进去的每个字符都是一个token

语法分析

这个过程也称为解析，是将词法剖析产生的token依照某种给定的模式文法转换成AST的过程。也就是把单词组合成句子的过程。在转换过程中会验证语法，语法如果有错的话，会抛出语法错误。

还是下面那段代码，在通过语法分析后生成的AST是这样的：

工具：AST Explorer

{    "type": "VariableDeclaration",  // 节点类型： 变量申明    "declarations": [   // 申明      {        "type": "VariableDeclarator",          "id": {          "type": "Identifier",  // 标识符          "name": "fn"  // 变量名        },        "init": {          "type": "ArrowFunctionExpression",    // 箭头函数表达式          "id": null,          "generator": false,          "async": false,          "params": [],  // 函数参数          "body": {  // 函数体            "type": "BlockStatement",  // 语句块            "body": [                 {                "type": "ExpressionStatement",  // 表达式语句                "expression": {                  "type": "CallExpression",                   "callee": {                    "type": "MemberExpression",                    "object": {                      "type": "Identifier",                        "identifierName": "console"                      },                      "name": "console"                    },                    "computed": false,                    "property": {                      "type": "Identifier",                      "name": "log"                    }                  },                  "arguments": [  // 函数参数                    {                      "type": "StringLiteral",  // 字符串                      "extra": {                        "rawValue": "前端南玖",                        "raw": "'前端南玖'"                      },                      "value": "前端南玖"                    }                  ]                }            ],            "directives": []          }        }      }    ],    "kind": "let"    // 变量申明类型  }

在失去AST形象语法树之后，咱们就能够通过革新AST语法树来转换成本人想要生成的指标代码。

常见的解析器

• Esprima

第一个用JavaScript编写的合乎EsTree标准的JavaScript的解析器，后续多个编译器都是受它的影响

• acorn

一个玲珑、疾速的 JavaScript 解析器，齐全用 JavaScript 编写

• @babel/parser(Babylon)

babel官网的解析器，最后fork于acorn，起初齐全走向了本人的路线，从babylon改名之后，其构建的插件体系十分弱小

• UglifyJS

UglifyJS 是一个 JavaScript 解析器、放大器、压缩器和丑化器工具包。

• esbuild

esbuild是用go编写的下一代web打包工具，它领有目前最快的打包记录和压缩记录，snowpack和vite的也是应用它来做打包工具，为了谋求卓越的性能，目前没有将AST进行裸露，也无奈批改AST，无奈用作解析对应的JavaScript。

AST利用

理解完AST，你会发现咱们能够用它做许多简单的事件，咱们先来利用@babel/core简略实现一个移除console的插件来感受一下吧。

这个其实就是找法则，你只有晓得console语句在AST上是怎么体现的就可能通过这一特点准确找到所有的console语句并将其移出就好了。

• 先来看下console语句的AST长什么样
  

很显著它是一个表达式节点，所以咱们只须要找到name为console的表达式节点删除即可。

• 编写plugin

const babel  = require("@babel/core")let originCode = `    let fn = () => {        const a = 1        console.log('前端南玖')        if(a) {            console.log(a)        }else {            return false        }    }`let removeConsolePlugin = function() {    return {        // 拜访器        visitor: {            CallExpression(path, state) {                const { node } = path                if(node?.callee?.object?.name === 'console') {                    console.log('找到了console语句')                    path.parentPath.remove()                }            }        }    }}const options = {    plugins: [removeConsolePlugin()]}let res = babel.transformSync(originCode, options)console.dir(res.code)

从执行后果来看，它找到了两个console语句，并且都将它们移除了

这就是对AST的简略利用，学会AST能做的远不止这些像前端大部分比拟高级的内容都能看到它的存在。前面会持续更新Babel以及插件的用法。

原文首发地址点这里，欢送大家关注公众号 「前端南玖」，如果你想进前端交换群一起学习，请点这里

我是南玖，咱们下期见！！！