@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

The Babel Traverse module maintains the overall tree state, and is responsible for replacing, removing, and adding nodes

See our website @babel/traverse for more information or the issues associated with this package.

Install

Using npm:

npm install --save-dev @babel/traverse

or using yarn:

yarn add @babel/traverse --dev

Changelog

v7.18.6 (2022-06-27)

:eyeglasses: Spec Compliance

• babel-parser
  • #14650 [ts] Disallow property access after instantiation expression (@nicolo-ribaudo)
  • #14636 [ts] Allow ...<...> followed by newline or binary operator (@nicolo-ribaudo)
• babel-generator, babel-parser, babel-preset-env, babel-template
  • #14668 JSON modules should be imported with default (@JLHwung)

:bug: Bug Fix

• babel-helper-remap-async-to-generator, babel-plugin-proposal-async-generator-functions
  • #14391 Transform await in computed class keys (@Yokubjon-J)
• babel-plugin-transform-parameters
  • #14694 fix: preserve function params type if possible (@magic-akari)
• babel-core
  • #14583 fix: Memory leak when deep cloning in babel-core (@liuxingbaoyu)
• babel-core, babel-helper-check-duplicate-nodes, babel-plugin-bugfix-safari-id-destructuring-collision-in-function-expression, babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining, babel-plugin-proposal-destructuring-private, babel-plugin-proposal-optional-chaining, babel-plugin-transform-runtime
  • #14663 Fix import { types } from "@babel/core" with native ESM (@nicolo-ribaudo)

:house: Internal

• babel-standalone
  • #14697 Add proposal-unicode-sets-regex to @babel/standalone (@nicolo-ribaudo)
• Other
  • #14687 chore: Update bench baselines (@liuxingbaoyu)
• babel-generator, babel-types
  • #14685 enable TS compiler option: strictBindCallApply (@JLHwung)
• babel-code-frame, babel-core, babel-generator, babel-helper-annotate-as-pure, babel-helper-builder-binary-assignment-operator-visitor, babel-helper-builder-react-jsx, babel-helper-check-duplicate-nodes, babel-helper-compilation-targets, babel-helper-create-class-features-plugin, babel-helper-create-regexp-features-plugin, babel-helper-define-map, babel-helper-explode-assignable-expression, babel-helper-fixtures, babel-helper-function-name, babel-helper-hoist-variables, babel-helper-member-expression-to-functions, babel-helper-module-imports, babel-helper-module-transforms, babel-helper-optimise-call-expression, babel-helper-plugin-test-runner, babel-helper-plugin-utils, babel-helper-remap-async-to-generator, babel-helper-replace-supers, babel-helper-simple-access, babel-helper-split-export-declaration, babel-helper-transform-fixture-test-runner, babel-helper-validator-option, babel-helper-wrap-function, babel-helpers, babel-highlight, babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining, babel-plugin-external-helpers, babel-plugin-proposal-async-generator-functions, babel-plugin-proposal-class-static-block, babel-plugin-proposal-decorators, babel-plugin-proposal-destructuring-private, babel-plugin-proposal-function-bind, babel-plugin-proposal-function-sent, babel-plugin-proposal-json-strings, babel-plugin-proposal-object-rest-spread, babel-plugin-proposal-optional-chaining, babel-plugin-proposal-partial-application, babel-plugin-proposal-pipeline-operator, babel-plugin-proposal-private-property-in-object, babel-plugin-proposal-record-and-tuple, babel-plugin-syntax-typescript, babel-plugin-transform-block-scoped-functions, babel-plugin-transform-block-scoping, babel-plugin-transform-classes, babel-plugin-transform-computed-properties, babel-plugin-transform-destructuring, babel-plugin-transform-duplicate-keys, babel-plugin-transform-exponentiation-operator, babel-plugin-transform-flow-comments, babel-plugin-transform-flow-strip-types, babel-plugin-transform-for-of, babel-plugin-transform-function-name, babel-plugin-transform-modules-amd, babel-plugin-transform-modules-commonjs, babel-plugin-transform-modules-systemjs, babel-plugin-transform-modules-umd, babel-plugin-transform-object-super, babel-plugin-transform-parameters, babel-plugin-transform-property-mutators, babel-plugin-transform-proto-to-assign, babel-plugin-transform-react-constant-elements, babel-plugin-transform-react-display-name, babel-plugin-transform-react-inline-elements, babel-plugin-transform-react-jsx-compat, babel-plugin-transform-react-jsx-source, babel-plugin-transform-react-jsx, babel-plugin-transform-runtime, babel-plugin-transform-typescript, babel-plugin-transform-unicode-escapes, babel-preset-env, babel-preset-typescript, babel-standalone, babel-template, babel-traverse, babel-types
  • #14601 enable noImplicitAny (@JLHwung)
• babel-core, babel-helper-transform-fixture-test-runner, babel-plugin-transform-destructuring
  • #14659 Run Babel asynchronously in fixtures (@nicolo-ribaudo)