Babylon-AST 入门指南：从解析到代码生成

2024-01-12 15:40:58

Babylon-AST初探-代码生成(Create)

熟悉JavaScript的同学可能都听说过AST这个词，顾名思义，AST（Abstract Syntax Tree，抽象语法树）就是一棵抽象的语法树，了源码的结构。大家可能也都知道，AST在语法分析、代码检查、编译、转换、优化等方面都有着广泛的应用，是非常基础的一个技术。

本文来介绍一下开源工具Babylon-AST，它能够将JavaScript代码转换成AST，并进一步在AST上进行操作，生成新的代码。

安装

npm install @babel/parser @babel/traverse @babel/types @babel/generator

将代码转换成AST

import { parse } from '@babel/parser';

const code = 'const a = 1;';

const ast = parse(code, {
  sourceType: 'module',
});

遍历AST

import { traverse } from '@babel/traverse';

traverse(ast, {
  enter(path) {
    console.log(path.node.type);
  },
});

修改AST

import { types } from '@babel/types';

traverse(ast, {
  enter(path) {
    if (path.node.type === 'Identifier' && path.node.name === 'a') {
      path.node.name = 'b';
    }
  },
});

生成新的代码

import { generate } from '@babel/generator';

const newCode = generate(ast).code;

示例

const code = `
  const a = 1;
  const b = a + 1;
`;

const ast = parse(code, {
  sourceType: 'module',
});

traverse(ast, {
  enter(path) {
    if (path.node.type === 'Identifier' && path.node.name === 'a') {
      path.node.name = 'b';
    }
  },
});

const newCode = generate(ast).code;

console.log(newCode);