Mastering AST: How Frontend Compilers Transform Code with Babel

Introduction

In computer science, an abstract syntax tree (AST) is an abstract representation of the syntactic structure of source code. Each node corresponds to a construct occurring in the source.

In frontend infrastructure, ASTs are essential because operating on an AST is equivalent to operating on the source code itself.

Applications of AST

Development assistance: eslint, prettier, TypeScript checks.

Code transformation: minification, obfuscation, CSS modules.

Code conversion: JSX, Vue, TypeScript to JavaScript.

Generating an AST

ASTs are produced through lexical analysis and syntax analysis.

Lexical analysis

Lexical analysis feeds code to a finite‑state machine, converting characters into tokens. For example, the code const a = 1 + 1 is tokenized as:

[
  {type: "关键字", value: "const"},
  {type: "标识符", value: "a"},
  {type: "赋值操作符", value: "="},
  {type: "常数", value: "1"},
  {type: "运算符", value: "+"},
  {type: "常数", value: "1"}
]

Syntax analysis

Parsing builds AST nodes incrementally. For the statement const a = 1, the process creates a VariableDeclaration node, a VariableDeclarator node, a NumericLiteral node, and links them via the init and declaration properties.

Frontend compilation

Modern frontend code (TypeScript, JSX, Vue, etc.) cannot run directly in browsers and must be compiled and bundled. Tools like webpack construct a dependency graph from import / export / require statements and emit one or more bundles. For non‑JavaScript assets, a preceding compiler (e.g., babel-loader for .ts files) is required.

// webpack.config.js
const path = require('path');
module.exports = {
  module: {
    rules: [{
      test: /.ts$/,
      use: 'babel-loader',
      options: { presets: ['@babel/typescript'] }
    }]
  }
};

Compilation tools

Babel – the most popular JavaScript‑written compiler.

esbuild – a Go‑based bundler that also performs compilation (used by Vite in dev mode).

SWC – a Rust‑written compiler.

Babel and SWC expose a visitor‑based AST API; esbuild does not provide direct AST manipulation but can be combined with other tools.

Compilation process

The three steps are parse (source → AST), transform (modify AST), and generate (AST → code).

Babel plugins

Babel plugins hook into the transform step. A plugin exports a visitor object; Babel calls the visitor methods when it traverses matching node types.

// my-plugin.js
module.exports = () => ({
  visitor: {
    FunctionDeclaration: {
      enter: enterFunction,
      exit: exitFunction
    },
    "FunctionDeclaration|FunctionExpression|ArrowFunctionExpression": {
      enter: enterFunction
    },
    Function: enterFunction
  }
});

function enterFunction() {
  console.log('hello plugin!');
}
function exitFunction() {}

To enable the plugin, add it to .babelrc:

{
  "plugins": ["./my-plugin.js"]
}

Practical example: measuring function execution time

The plugin inserts a variable fnName_start_time = Date.now() at the beginning of each function and logs the elapsed time before each return and at the end of the function.

Creating and inserting nodes

Two Babel helpers are used: @babel/types – programmatic AST node creation. @babel/template – generate AST from code strings.

// Using @babel/types
import * as t from 'babel-types';
const ast = t.variableDeclarator(
  t.identifier(`${fnName}_start_time`),
  t.callExpression(t.memberExpression(t.identifier('Date'), t.identifier('now')), [])
);

// Using @babel/template
import template from 'babel-template';
const start = template(`const ${fnName}_start_time = Date.now()`)();

These nodes are inserted with path.get('body').unshiftContainer('body', start) and pushContainer for the logging statement.

Handling early returns

The plugin performs an explicit traversal inside the function visitor, skipping nested functions, and adds logging before any ReturnStatement. It also rewrites the return to a sequence expression that logs the duration and then returns the original value.

function returnEnter(path, state) {
  const { fnName } = state;
  const varName = `${fnName}_start_time`;
  const endLog = template(`console.log('${fnName} cost:', Date.now() - ${varName})`)();
  const resultVar = t.identifier(`${fnName}_result`);
  const resultAssign = template(`const RESULT_VAR = RESULT`)({
    RESULT_VAR: resultVar,
    RESULT: path.node.argument || t.identifier('undefined')
  });
  path.insertBefore(resultAssign);
  path.node.argument = t.sequenceExpression([endLog.expression, resultVar]);
}

Final transformed code

// Original code
function a() {
  function b() {
    for (let i = 0; i < 10000000; i += Math.random()) {}
    function c() { for (let i = 0; i < 10000000; i += Math.random()) {} }
    return c();
  }
  b();
  for (let i = 0; i < 10000000; i += Math.random()) {}
}

// After Babel plugin
function a() {
  var a_start_time = Date.now();
  function b() {
    var b_start_time = Date.now();
    for (var i = 0; i < 10000000; i += Math.random()) {}
    function c() {
      var c_start_time = Date.now();
      for (var _i = 0; _i < 10000000; _i += Math.random()) {}
      console.log('c cost:', Date.now() - c_start_time);
    }
    var b_result = c();
    return console.log('b cost:', Date.now() - b_start_time), b_result;
    console.log('b cost:', Date.now() - b_start_time);
  }
  b();
  for (var i = 0; i < 10000000; i += Math.random()) {}
  console.log('a cost:', Date.now() - a_start_time);
}
// Console output example
c cost: 290
b cost: 603
a cost: 895