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