AST看这一篇就够了

抽象语法树（AST）是一种在编程领域中常见的数据结构，用于表示代码的语法结构。AST（抽象语法树）的解析和转换整个流程可以概括为：源代码 → 词法分析 → 语法分析 → AST 转换 → 生成代码 → 最终代码。

在 JavaScript 领域，常用的工具有 Babel、Esprima、Acorn 等，它们提供了丰富的 API 和插件系统，用于解析和转换 JavaScript 代码的 AST。本文相关知识点学习以Babel作为AST解析与转换的工具链。

AST 解析和转换

1. 词法分析（Lexical Analysis）和语法分析（Parsing）阶段： 使用Babel 的解析器@babel/parser将源代码解析为 AST。

js 复制代码

// example.js
function power(n) {
  return n * n;
}

console.log(power(5));

js 复制代码

const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const generator = require('@babel/generator').default;
const t = require('@babel/types');
const fs = require('fs');

// 读取 example.js 文件的源代码
const sourceCode = fs.readFileSync('example.js', 'utf8');

// 解析源代码为 AST
const ast = parser.parse(sourceCode, {
  sourceType: 'module',
});

2. AST 转换（AST Transformation）阶段： 使用@babel/traverse 遍历AST各个节点，使用 @babel/types 提供的 API 来创建、修改和删除 AST 节点。

js 复制代码

// 遍历和修改 AST
traverse(ast, {
  FunctionDeclaration(path) {
    if (path.node.id.name === 'square') {
      // 将 square 函数改名为 power
      path.node.id.name = 'power';

      // 将函数参数 n 名称改为 x
      path.node.params[0].name = 'x';

      // 创建一个新的 ReturnStatement 节点
      const returnStatement = t.returnStatement(
        t.binaryExpression('*', t.identifier('x'), t.identifier('x'))
      );

      // 替换原来的 ReturnStatement 节点
      path.get('body').pushContainer('body', returnStatement);
      path.get('body').unshiftContainer('body', t.variableDeclaration('var', [t.variableDeclarator(t.identifier('y'), t.numericLiteral(10))]));    
    }
  },
});

3. 生成代码（Code Generation）阶段： 使用@babel/generator将修改后的 AST 重新生成为源代码。

js 复制代码

// 生成修改后的代码
const { code } = generator(ast);

// 将修改后的代码写入新文件 output.js
fs.writeFileSync('output.js', code);

结果

js 复制代码

function power(x) {
  var y = 10;
  return x * x;
}

console.log(power(5));

使用Babel转换的常见节点类型

当使用 Babel 进行代码转换时，不同类型的节点对应于不同的代码结构。以下是一些常见的节点类型：

FunctionDeclaration：表示函数声明语句。
VariableDeclaration：表示变量声明语句。
ExpressionStatement：表示表达式语句。
CallExpression：表示函数调用表达式。
Identifier：表示标识符，如变量名、函数名等。
Literal：表示字面量，如数字、字符串等。

1. `FunctionDeclaration`（函数声明）节点：

输入：

javascript 复制代码

function add(a, b) {
  return a + b;
}

对应的 AST 节点：

json 复制代码

{
  "type": "FunctionDeclaration",
  "id": {
    "type": "Identifier",
    "name": "add"
  },
  "params": [
    {
      "type": "Identifier",
      "name": "a"
    },
    {
      "type": "Identifier",
      "name": "b"
    }
  ],
  "body": {
    "type": "BlockStatement",
    "body": [
      {
        "type": "ReturnStatement",
        "argument": {
          "type": "BinaryExpression",
          "operator": "+",
          "left": {
            "type": "Identifier",
            "name": "a"
          },
          "right": {
            "type": "Identifier",
            "name": "b"
          }
        }
      }
    ]
  }
}

对应的代码示例：

javascript 复制代码

function add(a, b) {
  return a + b;
}

2. `VariableDeclaration`（变量声明）节点：

输入：

javascript 复制代码

var x = 5;
let y = 10;
const z = 15;

对应的 AST 节点：

json 复制代码

{
  "type": "VariableDeclaration",
  "declarations": [
    {
      "type": "VariableDeclarator",
      "id": {
        "type": "Identifier",
        "name": "x"
      },
      "init": {
        "type": "NumericLiteral",
        "value": 5
      }
    }
  ],
  "kind": "var"
}

对应的代码示例：

javascript 复制代码

var x = 5;

3. `CallExpression`（函数调用表达式）节点：

输入：

javascript 复制代码

console.log('Hello, world!');

对应的 AST 节点：

json 复制代码

{
  "type": "ExpressionStatement",
  "expression": {
    "type": "CallExpression",
    "callee": {
      "type": "MemberExpression",
      "object": {
        "type": "Identifier",
        "name": "console"
      },
      "property": {
        "type": "Identifier",
        "name": "log"
      }
    },
    "arguments": [
      {
        "type": "StringLiteral",
        "value": "Hello, world!"
      }
    ]
  }
}

对应的代码示例：

javascript 复制代码

console.log('Hello, world!');

4. `Identifier`（标识符）节点：

输入：

javascript 复制代码

var x = 5;
console.log(x);

对应的 AST 节点：

json 复制代码

{
  "type": "Identifier",
  "name": "x"
}

对应的代码示例：

javascript 复制代码

5. `Literal`（字面量）节点：

输入：

javascript 复制代码

var x = 5;
var str = 'Hello, world!';

对应的 AST 节点：

json 复制代码

{
  "type": "NumericLiteral",
  "value": 5
}

对应的代码示例：

javascript 复制代码

这些示例展示了不同节点类型与对应输入和代码之间的关系。通过遍历 AST 并处理不同类型的节点，你可以对代码进行修改、分析或生成新的代码。

场景与应用

1. 静态代码分析

静态代码分析是指在不执行代码的情况下，通过分析代码的结构和语义来发现潜在的问题和错误。抽象语法树为静态代码分析提供了一个强大的基础。通过遍历 AST，可以检查代码中的代码风格问题、潜在的错误、未使用的变量等。

2. 代码转换和重构

抽象语法树还可以用于代码转换和重构。通过分析和修改 AST，可以对代码进行自动化的转换和重构。例如，可以使用 AST 将一种编程语言转换为另一种，或者对现有代码进行重构以提高性能或可读性。

2.1 场景：修改函数调用参数

假设我们有以下输入代码：

javascript 复制代码

function add(a, b) {
  return a + b;
}

console.log(add(2, 3));

现在，我们想要使用 Babel 修改函数调用 add(2, 3) 的参数为 add(5, 10)。

具体的可执行代码示例如下：

javascript 复制代码

const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const generator = require('@babel/generator').default;

const code = `
function add(a, b) {
  return a + b;
}

console.log(add(2, 3));
`;

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

traverse(ast, {
  CallExpression(path) {
    if (
      path.node.callee.type === 'Identifier' &&
      path.node.callee.name === 'add' &&
      path.node.arguments.length === 2
    ) {
      path.node.arguments[0] = {
        type: 'NumericLiteral',
        value: 5,
      };
      path.node.arguments[1] = {
        type: 'NumericLiteral',
        value: 10,
      };
    }
  },
});

const modifiedCode = generator(ast, {}, code);
console.log(modifiedCode);

运行上述代码，输出的结果将是：

javascript 复制代码

function add(a, b) {
  return a + b;
}

console.log(add(5, 10));

代码中的 traverse 遍历了 AST，并在遇到 CallExpression 节点时进行检查和修改。我们通过判断调用的函数名、参数数量等条件，找到了目标函数调用并修改了其中的参数。

2.2 场景：在函数体内插入代码

假设我们有以下输入代码：

javascript 复制代码

function greet(name) {
  console.log('Hello, ' + name + '!');
}

greet('Alice');

现在，我们想要使用 Babel 在 greet 函数的函数体内插入一条额外的 console.log 语句。

具体的可执行代码示例如下：

javascript 复制代码

const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const t = require('@babel/types');
const generator = require('@babel/generator').default;

const code = `
function greet(name) {
  console.log('Hello, ' + name + '!');
}

greet('Alice');
`;

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

traverse(ast, {
  FunctionDeclaration(path) {
    if (path.node.id.name === 'greet') {
      path.node.body.body.push(
        t.expressionStatement(
          t.callExpression(
            t.memberExpression(
              t.identifier('console'),
              t.identifier('log')
            ),
            [t.stringLiteral('Additional console.log')]
          )
        )
      );
    }
  },
});

const modifiedCode = generator(ast, {}, code);
console.log(modifiedCode);

运行上述代码，输出的结果将是：

javascript 复制代码

function greet(name) {
  console.log('Hello, ' + name + '!');
  console.log('Additional console.log');
}

greet('Alice');

代码中的 traverse 遍历了 AST，并在遇到函数声明的节点时进行检查和修改。我们找到了名为 greet 的函数声明，并在其函数体内部插入了一条新的 console.log 语句。

2.3 场景：修改变量声明的初始值

javascript 复制代码

const parser = require('@babel/parser');
const traverse = require('@babel/traverse').default;
const t = require('@babel/types');
const generator = require('@babel/generator').default;

const code = `
var x = 5;
let y = 10;
const z = 15;
`;

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

traverse(ast, {
  VariableDeclarator(path) {
    const { id } = path.node;
    if (id.name === 'x') {
      path.node.init = t.numericLiteral(10);
    } else if (id.name === 'y') {
      path.node.init = t.numericLiteral(20);
    } else if (id.name === 'z') {
      path.node.init = t.numericLiteral(30);
    }
  },
});

const modifiedCode = generator(ast, {}, code);
console.log(modifiedCode.code);

运行上述代码，输出的结果将是：

js 复制代码

var x = 10;
let y = 20;
const z = 30;

3. 语法高亮和编辑器插件

许多文本编辑器和集成开发环境（IDE）使用抽象语法树来实现语法高亮和智能提示功能。通过解析代码为 AST，编辑器可以更好地理解代码的结构，并提供准确的代码高亮和自动补全功能。

写在最后

总得来说，AST提供了许多强大的功能，包括代码转换、静态分析、代码生成、语言转换和编辑器增强等。通过利用AST，开发人员可以更好地理解、操作和优化代码，提高开发效率并实现更高质量的应用程序。

AST看这一篇就够了

AST 解析和转换

使用Babel转换的常见节点类型

1. FunctionDeclaration（函数声明）节点：

2. VariableDeclaration（变量声明）节点：

3. CallExpression（函数调用表达式）节点：

4. Identifier（标识符）节点：

5. Literal（字面量）节点：

场景与应用

1. 静态代码分析

2. 代码转换和重构

2.1 场景：修改函数调用参数

2.2 场景：在函数体内插入代码

2.3 场景：修改变量声明的初始值

3. 语法高亮和编辑器插件

写在最后

1. `FunctionDeclaration`（函数声明）节点：

2. `VariableDeclaration`（变量声明）节点：

3. `CallExpression`（函数调用表达式）节点：

4. `Identifier`（标识符）节点：

5. `Literal`（字面量）节点：