JavaScript AST介绍
在《上篇》中，对AST进行了初步介绍，本文将重点介绍如何使用AST，如果您还不知道AST是什么的话，建议先翻一翻《上篇》的内容
目的
将 es6 中的 箭头函数 转换成 es5 中的 普通函数
转换前：
const sum = (a,b) => a+b;
转换后：
const sum = function(a, b){
return a+b;
}
思路
我么需要先将待转化的js代码转换成AST，然后操作AST生成新的AST，最终通过新的AST生成目标js代码
依赖安装
操作 AST ，需要借助两个库，分别是 @babel/core 和 babel-types，
假设您已经安装了nodejs
cd 任意目录
npm -y init // 初始化
npm i @babel/core babel-types @babel/generator -D // 依赖安装
关键API介绍
- 三个库简介
//babel 核心库，用来实现核心转换引擎
const babel = require('@babel/core')
//类型判断，替换AST节点
const types = require('babel-types')
//代码生成
const generate = require('@babel/generator').default
-
babel中traverse方法，它可以遍历AST所有树节点，并可对指定节点做特殊操作，更多节点详细信息可以参考此地址：https://babel.docschina.org/docs/en/6.26.3/babel-types/
traverse(ast, {
CallExpression(p) {
// 对语法树中特定的节点进行操作 参考@babel/types （特定节点类型）
// CallExpression 特定节点
},
FunctionDeclaration: function(path) {
// 对语法树中特定的节点进行操作 参考@babel/types （特定节点类型）
// FunctionDeclaration 特定节点
}
// .....
enter(path) {
// 进入节点
if (path.node.type === "ThisExpression") {
// 对所有的操作
};
}
exit(path) {
// 退出节点
console.log(` exit ${path.type}(${path.key})`)
}
})
babel-types.blockStatement(body, directives) 可以用来创建AST节点
//原 params
let params = path.node.params;
//创建一个blockStatement
let blockStatement = types.blockStatement([
types.returnStatement(types.binaryExpression(
'+',
types.identifier('a'),
types.identifier('b')
))
]);
//创建一个函数
let func = types.functionExpression(null, params, blockStatement, false, false);
完整代码示例
了解以上API之后，便可动手实现功能了
完整示例：
const babel = require('@babel/core')
const types = require('babel-types')
const generate = require('@babel/generator').default
const code = `const sum=(a,b)=>a+b;`
// 源码 -> ast
const ast = babel.parse(code)
// ast节点替换
babel.traverse(ast, {
//代表处理 ArrowFunctionExpression(箭头函数表达式) 节点
ArrowFunctionExpression(path){
let params = path.node.params
//创建一个blockStatement
let blockStatement = types.blockStatement([
types.returnStatement(types.binaryExpression(
'+',
types.identifier('a'),
types.identifier('b')
))
])
//创建一个函数
let func = types.functionExpression(null, params, blockStatement, false, false)
//替换ast节点
path.replaceWith(func)
}
})
// ast -> 生成代码
const output = generate(ast, code);
// 打印目标代码
console.log(output.code);
我们在命令行界面敲下node test01.js即可运行
运行结果：
image-20210601180856699.png
