Babel is a JavaScript syntax converter that uses plug-ins to convert ES6+, TypeScript, JSX, TSX, and more syntax into browser-executable code. This article explores abstract syntax trees (AST) by exploring the principles behind Babel.

Babel workflow

Babel’s workflow is roughly divided into three phases:

  1. parsing: The analysis phase does two things.Lexical analysisandSyntax analysis.
  2. Transformation: Abstract syntax tree (AST) will be generated after the code is parsed. The transformation stage is to traverse the generated AST. By traversing the NODES of the AST, you can add, modify, and delete nodes of the AST. Babel’s plug-in works at this stage.
  3. Generation: The generation phase is the string code that transforms the AST into the final browser executable.

Lexical analysis

Lexical analysis is the first step in Babel’s parsing of code, which basically turns the code we write into a token stream that uses arrays to record information about the characters in the code. For example, we wrote the following code:

   a + b 
Copy the code

The token stream array structure of this code is as follows:

[
  { type: { ... }, value: "a", start: 0, end: 1, loc: { ... } },
  { type: { ... }, value: "+", start: 2, end: 3, loc: { ... } },
  { type: { ... }, value: "b", start: 4, end: 5, loc: { ... } },
]
Copy the code

Syntax analysis

Syntax analysis transforms token flows into abstract syntax trees (AST), which is the focus of this article.

So what is the structure of the abstract syntax tree (AST) generated by Babel? We learned about abstract syntax trees through the AST Explorer. As you can see from the diagram below, the abstract syntax tree is a JS object. The basic structure of the object is as follows. In this object, there are properties such as Type, comments, sourceType, and body.

  • typeIs a very important attribute representing the type of node in the abstract syntax tree. More Node typesReference here
  • bodyIt stores the child nodes

Next, explore the abstract syntax tree by exemplifying variable declarations and functions.

Variable declarations

Let’s see what happens to the abstract syntax tree when we type the following code and declare a variable.

var a=1;
Copy the code

You can see that an object of type VariableDeclaration is added to the array of property body. The value of the object property type VariableDeclaration indicates that this node is a VariableDeclaration node. The attributes of the node object describe the information about the declaration statement.

Function declaration

Next we declare a function named test based on the above code.

var a=1;

function test(){
  var b=2;
  var c=b+1;
  return c;
}
Copy the code

An object of type FunctionDeclaration is added to the body of the AST.

Expand the FunctionDeclaration object as shown below, which also has a body property that records the two variables we declared in the function and the return value of the function.

conclusion

Babel defines different AST nodes through different object types. Each node makes up the entire abstract syntax tree of the code. The study of abstract syntax tree is helpful to understand the operation principle of program. This is the basis for our Babel plug-in.

reference

Github.com/jamiebuilds…

En.wikipedia.org/wiki/Lexica…

Abstract syntax tree generation tool: astexplorer.net/