What is an AST(Abstract Syntax Tree)

An AST is a layered representation of a program that renders the source code structure according to the syntax of the programming language, with one source code item for each AST node.

The above statement is indeed very abstract, you can see the following code representation, you can see the source code and the following nodes in the tree is one to one correspondence

function add(a,b){
	return a+b
}
add(1.2)
Copy the code
// Convert to syntax tree
{
    "type": "Program"."body": [{"type": "FunctionDeclaration"."id": {
          "type": "Identifier"."start": 9."end": 12."name": "add"
        },
        "params": [{"type": "Identifier"."name": "a"
          },
          {
            "type": "Identifier"."name": "b"}]."body": {
          "type": "BlockStatement"."body": [{"type": "ReturnStatement"."argument": {
                "type": "BinaryExpression"."left": {
                  "type": "Identifier"."name": "a"
                },
                "operator": "+"."right": {
                  "type": "Identifier"."name": "b"}}}]}}, {"type": "ExpressionStatement"."expression": {
          "type": "CallExpression"."callee": {
            "type": "Identifier"."name": "add"
          },
          "arguments": [{"type": "Literal"."value": 1."raw": "1"
            },
            {
              "type": "Literal"."value": 2."raw": "2"}]."optional": false}}}]Copy the code

This is an online JS to AST grammar site, interested can experience.

Compilation principle

First of all, let’s look at the principle of browser compilation as follows. It can be seen that browser compilation and interpretation of JS requires source code to be converted into AST through lexical analysis and syntax analysis

Lexical analysis Tokenize

Lexical analysis: The process of converting sequences of characters into sequences of words (tokens) in computer science. The program or function that performs Lexical analysis is called Lexical analyzer (Lexer for short), also known as Scanner.

The function is to break down the lines of source code into tokens. Token refers to the smallest single character or string that is syntactically impossible to divide. Using the code above as an example, here is the generated token sequence:

Parse

Parsing is a logical phase of the compilation process. The task of grammar analysis is to combine sequences of words into various grammatical phrases, such as “program”, “statement”, “expression” and so on, based on lexical analysis. The parser determines whether the source program is structurally correct.

The token data generated in the previous step is converted to the AST according to the syntax rules. It also validates the syntax and throws a syntax error if it’s wrong

parseApi

The AST syntax tree can be generated by installing the recast plug-in

npm i recast -S 

// c creates parse.js
const recast = require("recast");
const code =
  Function add(a, b) {return a + b} add(1,2) '
const ast = recast.parse(code);
const add  = ast.program.body
console.log(add)
// Run Node parse.js
Copy the code

AST purposes

  • Package compilations: Webpack, rollup, Babel, etc

  • Syntax check: JSLint, JSHint, Prettier

  • IDE error prompts, formatting, highlighting, autocomplete, etc

  • Code obfuscation compression: UglifyJS2

  • Multi-terminal development framework: Mpvue, Taro, etc

  • .