@babel/traverse

What is @babel/traverse?

The @babel/traverse package is part of the Babel toolchain and is used for traversing and manipulating the abstract syntax tree (AST) generated by Babel. It provides methods to visit nodes in the tree, update them, add or remove nodes, and perform various transformations on the code represented by the AST.

What are @babel/traverse's main functionalities?

Visiting Nodes

This feature allows you to visit specific nodes in the AST. You can specify the types of nodes you're interested in and provide functions that will be called when those nodes are encountered during traversal.

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

Modifying Nodes

With @babel/traverse, you can modify nodes in the AST. This can include changing node types, adding or removing properties, or even replacing a node with a different one.

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

Adding and Removing Nodes

This feature allows you to add new nodes to the AST or remove existing ones. This is useful for code transformations where you need to introduce new variables, functions, or other constructs, or clean up unused code.

{"type": "VariableDeclaration", "declarations": [{"type": "VariableDeclarator", "id": {"type": "Identifier", "name": "c"}, "init": {"type": "Literal", "value": 3, "raw": "3"}}], "kind": "const"}

Scope Management

The package provides utilities for managing scope within the AST. This includes tracking variable declarations, bindings, and references, which is crucial for correctly transforming code without introducing errors.

{"type": "BlockStatement", "body": [], "directives": []}

Other packages similar to @babel/traverse

estraverse

Estraverse is a simple and flexible library for traversing and manipulating JavaScript ASTs. It is similar to @babel/traverse but is not tied to the Babel ecosystem and can be used with other ASTs conforming to the ESTree spec.

acorn-walk

Acorn-walk is a small module for walking the AST generated by the Acorn parser. It provides a simple interface for visiting nodes but does not offer the same level of manipulation capabilities as @babel/traverse.

recast

Recast provides AST traversal and manipulation capabilities, with a focus on preserving the original formatting of the code as much as possible. It uses esprima or babel as the parser and is more focused on code printing than @babel/traverse.

README

@babel/traverse

@babel/traverse maintains the overall tree state, and is responsible for replacing, removing, and adding nodes.

Install

$ npm install --save @babel/traverse

Usage

We can use it alongside Babylon to traverse and update nodes:

import * as babylon from "babylon";
import traverse from "@babel/traverse";

const code = `function square(n) {
  return n * n;
}`;

const ast = babylon.parse(code);

traverse(ast, {
  enter(path) {
    if (path.isIdentifier({ name: "n" })) {
      path.node.name = "x";
    }
  }
});

:book: Read the full docs here