抽象语法树AST以及babel原理

什么是AST？

借用一下百度百科的解释：
在计算机科学中，抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

其实意思就是将代码以树的格式展现出来，举个例子你就明白了：
大家可以在这个网站 https://astexplorer.net/ 上输入代码，会被解析为 AST，如图：

可以看到，代码的每一个字符都以树的形式展示了出来。

AST的应用场景

常见的场景：

IDE的错误提示、代码格式化、代码高亮、代码自动补全等
JSLint、JSHint对代码错误或风格的检查等
webpack、rollup进行代码打包等
CoffeeScript、TypeScript、JSX等转化为原生Javascript、babel把es6转换成es5语法

代码执行的步骤

从js程序到机器可执行的机器码需要经历两个阶段：

语法检查（源代码 -> 抽象语法树AST）
- 词法分析（源代码 -> Token序列）
- 语法分析（Token序列 -> 抽象语法树AST）
编译运行（抽象语法树AST -> 机器码）

1、词法分析

源代码 -> Token序列
将整个代码字符串分割成最小语法单元数组，也就是一个个的标识Tokens（type 和 value )。
https://esprima.org/demo/parse.html#

[{"type": "Keyword","value": "var"},{"type": "Identifier","value": "a"},{"type": "Punctuator","value": "="},{"type": "Numeric","value": "1"},{"type": "Punctuator","value": ";"}
]

常见的type：
Keyword （关键词）
Identifier （标识符）
Punctuator （标点符号）
Numberic（数字）
String （字符串）
Boolean（布尔）
Null（空值）

2、语法分析

Token序列 -> 抽象语法树

{// 表示是一段程序代码"type": "Program",// 代码的具体内容"body": [{// 表示这个内容块是干什么的"type": "VariableDeclaration",// 装变量内容的块"declarations": [{// 声明的类型是个变量"type": "VariableDeclarator",// 表示变量名"id": {"type": "Identifier","name": "a"},// 表示为这个变量设置的初值"init": {"type": "Literal","value": 1,"raw": "1"}}],"kind": "var"}],// 表示语言的种类"sourceType": "script"
}

3、编译运行

这个阶段会处理AST，生成机器可执行的机械码。

举个例子

上面讲了 AST 可以对代码进行转换，那么我们举个例子详细说明一下。

比如我们要实现：

将源代码中的 == 变成 ===
将源代码中的 var 变成 let
将源代码中的 console注释掉

这个例子用到的工具：

esprima（源代码 -> 抽象语法树AST）
estraverse（遍历AST）
escodegen（将AST反编译为js代码）

originCode.js 为要转换的源代码

function fun() {var opt = 1;console.log(1);if (opt == 1) {console.log(2);}
}

index.js 是我们要执行的 node 文件

let fs  = require('fs');
const esprima = require('esprima');//将JS代码转化为语法树模块
const estraverse = require('estraverse');//JS语法树遍历各节点
const escodegen = require('escodegen');//将JS语法树反编译成js代码模块/**
* 由源代码得到抽象语法树
*/
function  getAst(jsFile) {let jsCode;return new Promise((resolve)=>{fs.readFile(jsFile, (error, data) => {jsCode = data.toString();resolve(esprima.parseScript(jsCode));});});
}/*** 设置全等*/
function setEqual(node) {if (node.operator === '==') {node.operator = '===';}
}/*** 删除console*/
function delConsole(node) {if (node.type === 'ExpressionStatement' && node.expression.type === 'CallExpression' && node.expression.callee.object.name==='console') {node.expression.callee.object.name = '//console';}
}/*** 把var变成let*/
function setLet(node){if(node.kind === 'var'){    node.kind = 'let';}
}/*** 遍历语法树*/
function travel(ast){estraverse.traverse(ast, {enter: (node) => {setEqual(node);setLet(node);delConsole(node);}});
}/**
* 生成文件
*/
function  writeCode(file,data) {fs.writeFile(file,data,(error)=>{console.log(error);});
}/**
* 入口函数
*/
function main(){let file = './originCode.js';let distFile = './distCode.js';getAst(file).then(function(jsCode) {travel(jsCode);// 删掉 console ， 通过parseScript在生成一变ast去掉注释的内容// let distCode = escodegen.generate( esprima.parseScript( escodegen.generate(jsCode)));// 注释 consolelet distCode = escodegen.generate(jsCode);console.log('distcode',distCode);writeCode(distFile,distCode);});
}main();

执行

node index.js

得到的结果 distCode.js

function fun() {let opt = 1;//console.log(1);if (opt === 1) {//console.log(2);}
}

总结

再看一遍这个流程：
源代码 -> 抽象语法树AST -> 机器码/新的js

从上面的这个例子可以看出，我们可以通过修改 AST，从而修改成我们想要的结果，那么像IDE代码高亮、代码混淆压缩、Babel es6转es5、ts转js等等就很好理解了。

babel原理

babel 原理也是 AST，babel 有许多工具可以直接使用，如下：

babel把es6转换成es5语法的原理？

解析（parse）。将源代码解析变成AST。@babel/parser模块
转换（transform）。对AST 进行遍历，在此过程中对节点进行添加、更新及移除等操作。因此这是bebel处理代码的核心步骤，是我们的讨论重点，主要使用@babel/traverse和@babel/types模块。
生成（generate）。将更改后的AST，再变回代码。@babel/generate模块。

举例：将 var 变为 let

const generator = require('@babel/generator');
const parser = require('@babel/parser');
const traverse = require('@babel/traverse');
const transToLet = code => {const ast = parser.parse(code);// 访问者对象const visitor = {// 遍历声明表达式VariableDeclaration(path) {if (path.node.type === 'VariableDeclaration') {// 替换if (path.node.kind === 'var') {path.node.kind = 'let';}}},};traverse.default(ast, visitor);// 生成代码const newCode = generator.default(ast, {}, code).code;return newCode;
};const code = `const a = 1
var b = 2
let c = 3`;
transToLet(code);

结果

const a = 1;
let b = 2;
let c = 3;

参考资料

AST规范