Now that we have an understanding of what abstract syntax trees are, we can start generating ASTs from source code, and programmatically traverse through the different nodes in the tree.
When previously looking at AST Explorer, the parser option was set to
@babel/parser. This is a package available on npm, which means it can be installed and used to parse any source code string into an AST.
It has a robust plugin system that can be used to add support for many different syntaxes, for example:
babel-plugin-proposal-optional-chaining: adds support for optional chaining, which is new syntax that isn't widely supported by browsers yet. This will transpile this new syntax into equivalent older syntax.
babel-plugin-transform-react-jsx: adds support for JSX, which is XML-like, and not intended to be implemented by browsers. This plugin transpiles this syntax to an equivalent and supported syntax (functions and objects) before it can be run in the browser.
Babel performs these transpilations by converting the source code into an AST, manipulates the nodes, and converts the manipulated AST back into source code. These plugins can extend and modify the parsing and generation of the AST.
@babel/core package wraps up most of this functionality in a single package with minimal configuration. Babel also exposes the different internal operations and functionality in a series of packages. Some of the packages, which we'll use and further explore in this lesson, include:
@babel/parser: parse a source code string into an AST.
@babel/traverse: traverse different types of nodes within an AST.
@babel/generator: convert an AST back into a source code string.
@babel/types: create new nodes to add (or replace existing nodes) in an AST.
These lower-level packages can be used to create flexible, custom scripts to parse, generate, and manipulate ASTs.
Parsing source code#
To get started, we'll use the
@babel/parser package to parse the previous code snippet into an AST.
First, create a directory, initialize a new
package.json file, and add the
Next, create a
parser.js file to execute the parser on the source code.