创建 AST 节点写法示例

AST (Abstract Syntax Tree(抽象语法树)) 是源代码语法结构的一种抽象表示

创建 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)

输出:

truefalse

创建null

t.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

创建条件语句if

t.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)