Hello, everyone, I am Lin Sanxin. I was asked about the principle of Babel in the interview before, so I would like to write an article about the principle of Babel today.

Abstract syntax trees: Before we get to Babel, what can we say about abstract syntax trees (AST), the way computers understand our code

Here’s an example

console.log("hello")
Copy the code

The tree structure (simplified) looks like this:

{
    "type": "Program".// Program root node
    "body": [{"type": "ExpressionStatement".// a statement node
            "expression": {
                "type": "CallExpression".// a function call expression node
                "callee": {
                    "type": "MemberExpression"./ / expression
                    "object": {
                        "type": "Identifier"."name": "console"
                    },
                    "property": {
                        "type": "Identifier"."name": "log"
                    },
                    "computed": false
                },
                "arguments": [{"type": "StringLiteral"."extra": {
                            "rawValue": "hello"."raw": "\"hello\""
                        },
                        "value": "hello"}]}}],"directives": []}Copy the code

Babel transformation process








Come on!!