Серия webpack: принцип babel

Всем привет, это Линь Сансинь, потому что меня уже спрашивали о принципе Babel на собеседовании при наборе в школу, поэтому сегодня я напишу статью, в которой кратко расскажу о принципе Babel.

Абстрактное синтаксическое дерево: давайте поговорим об абстрактном синтаксическом дереве (т.е. AST), прежде чем говорить о принципе Babel, который представляет собой способ, которым компьютер понимает наш код.

Вот пример

console.log("hello")

Вы получите такую ​​древовидную структуру (упрощенно):

{
    "type": "Program", // 程序根节点
    "body": [
        {
            "type": "ExpressionStatement", // 一个语句节点
            "expression": {
                "type": "CallExpression", // 一个函数调用表达式节点
                "callee": {
                    "type": "MemberExpression", // 表达式
                    "object": {
                        "type": "Identifier",
                        "name": "console"
                    },
                    "property": {
                        "type": "Identifier",
                        "name": "log"
                    },
                    "computed": false
                },
                "arguments": [
                    {
                        "type": "StringLiteral",
                        "extra": {
                            "rawValue": "hello",
                            "raw": "\"hello\""
                        },
                        "value": "hello"
                    }
                ]
            }
        }
    ],
    "directives": []
}

Процесс вавилонской конверсии

1.parse: первый шаг заключается в том, что babel использует babylon для преобразования исходного кода в абстрактное синтаксическое дерево.
2.transform: второй шаг заключается в том, что babel проходит и модифицирует предыдущее абстрактное синтаксическое дерево с помощью babel-traverse и получает новое абстрактное синтаксическое дерево.
3.generator: третий шаг заключается в том, что babel использует babel-generator для преобразования абстрактного синтаксического дерева в код.
Примечание. Эти три операции синтезируют внешний API через ядро ​​babel для внешнего использования.

Ну давай же! ! !