创建 AST 节点写法示例---用户2930719

AST (Abstract Syntax Tree(抽象语法树)) 是源代码语法结构的一种抽象表示。不了解 AST 的，可以看这篇文章。

创建 AST 节点是转换AST节点时的常见操作。本文用 @babel/types 来创建 AST节点。@babel/types 是根据 babel 的 AST 规范来创建 AST。规范说明见这里。

下面，我们来具体看代码。代码中的 t 为 require('@babel/types')。完整代码见这里。

创建数字t.numericLiteral(1)

输出:

1创建字符串t.stringLiteral('a str')

输出:

"a str"创建布尔值t.booleanLiteral(true) t.booleanLiteral(false)

输出:

true false创建nullt.nullLiteral()

输出:

null创建对象const nameKey = t.objectProperty( t.identifier('name'), t.stringLiteral('Joel') ) const agetKey = t.objectProperty( t.identifier('age'), t.numericLiteral(18) ) t.objectExpression([nameKey, agetKey])

输出:

{ name: "Joel", age: 18 }创建获取对象的属性t.memberExpression( t.identifier('obj'), t.identifier('name') ) t.memberExpression( t.identifier('obj'), t.identifier('name'), true )

输出:

obj.name obj[name]创建数组const item1 = t.numericLiteral(1) const item2 = t.numericLiteral(2) t.arrayExpression([item1, item2])

输出:

[1, 2]创建获取数组的内容t.memberExpression( t.identifier('arr'), t.numericLiteral(1), true )

输出:

arr[1]创建二元表达式t.binaryExpression( '+', // 操作符。 还支持：==, ===, != 等 item1, // 左操作数 item2 )

输出:

1 + 2创建三元表达式t.conditionalExpression( t.binaryExpression( '>', t.numericLiteral(4), t.numericLiteral(3) ), t.numericLiteral(4), t.numericLiteral(3) )

输出:

4 > 3 ? 4 : 3创建逻辑表达式t.logicalExpression( '||', t.identifier('num'), t.numericLiteral(0) ) t.logicalExpression( '&&', t.identifier('obj'), t.memberExpression( t.identifier('obj'), t.identifier('name') ) )

输出:

num || 0 obj && obj.name创建条件语句ift.binaryExpression( '>', t.numericLiteral(4), t.numericLiteral(3) ), t.blockStatement( [ t.expressionStatement( t.callExpression( t.memberExpression( t.identifier('console'), t.identifier('log') ), [ t.booleanLiteral(true) ] ) ) ] )

输出:

if (4 > 3) { console.log(true); }

不知到怎么创建 else if 和 else。

创建for循环t.forStatement( t.variableDeclaration( 'let', [ t.variableDeclarator( t.identifier('i'), t.numericLiteral(0) ) ] ), t.binaryExpression( '<', t.identifier('i'), t.numericLiteral(3) ), t.updateExpression( '++', t.identifier('i') ), t.blockStatement([ t.emptyStatement() ]) )

输出:

for (let i = 0; i < 3; i++) { ; }创建变量定义t.variableDeclaration( 'let', // 还支持 const 和 var [ t.variableDeclarator( t.identifier('b'), // 变量名 ) ] ) t.variableDeclaration( 'let', // 还支持 const 和 var [ t.variableDeclarator( t.identifier('b'), // 变量名 ) ] ) t.assignmentExpression( '=', t.identifier('b'), t.numericLiteral(1) )

输出:

let a = 1; let b; b = 1创建定义函数t.functionDeclaration( t.identifier('add'), // 函数名 [t.identifier('a'), t.identifier('b')], // 参数 t.blockStatement([ // 函数体 t.variableDeclaration(// const sum = a + b 'const', [ t.variableDeclarator( t.identifier('sum'), // 变量名 t.binaryExpression('+', t.identifier('a'), t.identifier('b')) // a + b ), ] ), t.returnStatement(t.identifier('sum')) // return sum ]) )

输出:

function add(a, b) { const sum = a + b; return sum; }创建箭头函数const declarationArrowFun = t.arrowFunctionExpression( [t.identifier('a'), t.identifier('b')], // 参数 t.blockStatement([ // 函数体 t.variableDeclaration(// const sum = a + b 'const', [ t.variableDeclarator( t.identifier('sum'), // 变量名 t.binaryExpression('+', t.identifier('a'), t.identifier('b')) // a + b ), ] ), t.returnStatement(t.identifier('sum')) // return sum ]) ) t.variableDeclaration( 'let', // 还支持 const 和 var [ t.variableDeclarator( t.identifier('add2'), // 变量名 declarationArrowFun ) ] )

输出:

function add(a, b) { const sum = a + b; return sum; } let add2 = (a, b) => { const sum = a + b; return sum; };创建函数调用t.callExpression( t.identifier('add'), [ t.numericLiteral(1), t.numericLiteral(2) ] )

输出:

add(1, 2) ---来自腾讯云社区的---用户2930719