Абстрактное синтаксическое дерево JS, которое вы можете понять с первого взгляда

JavaScript

предисловие

Бабель сейчас обязателен практически в каждом проекте, но его принцип работы не может обойти процесс парсинга js в процессе генерации.У Бабель есть движок вавилон, а форк проекта акрон в первые дни.Прежде чем разбираться в этом, возьмем посмотри на это.Что за двигатель разбирает вон. Не только babel, но и webpack преобразует код в абстрактное синтаксическое дерево с помощью синтаксического анализатора javascript. Это дерево определяет сам код. Манипулируя этим деревом, операторы присваивания, операторы объявления и операторы операций могут быть точно расположены. Если вам интересно, вы можете следовать за мнойgithub, укажите звезду. Спасибо

Что такое абстрактное синтаксическое дерево

Мы можем рассмотреть простой пример:

var a = 1;
var b = a + 1;

мы проходим этоВеб-сайт, он представляет собой веб-сайт движка esprima, которым очень легко пользоваться Блок-схема нарисована следующим образом:

AST

И его формат объекта json выглядит так:

{
    "type": "Program",
    "body": [
        {
            "type": "VariableDeclaration",
            "declarations": [
                {
                    "type": "VariableDeclarator",
                    "id": {
                        "type": "Identifier",
                        "name": "a"
                    },
                    "init": {
                        "type": "Literal",
                        "value": 1,
                        "raw": "1"
                    }
                }
            ],
            "kind": "var"
        },
        {
            "type": "VariableDeclaration",
            "declarations": [
                {
                    "type": "VariableDeclarator",
                    "id": {
                        "type": "Identifier",
                        "name": "b"
                    },
                    "init": {
                        "type": "BinaryExpression",
                        "operator": "+",
                        "left": {
                            "type": "Identifier",
                            "name": "a"
                        },
                        "right": {
                            "type": "Literal",
                            "value": 1,
                            "raw": "1"
                        }
                    }
                }
            ],
            "kind": "var"
        }
    ],
    "sourceType": "script"
}

многочисленные двигатели

У Chrome v8, у firefix есть spidermonkey, а также есть несколько часто используемых движков:

  • esprima
  • acron
  • Traceur
  • UglifyJS2
  • shift

Вот сравнение скорости некоторых движков и того, как быстро они загружаются с разными фреймворками:

jq-parser

ng-parser

react-parser

Я лично считаю, что чем совершеннее инкапсуляция, тем дольше время парсинга, и лучше скорость акрон между движками.Предшественник движка babel — проект fork.

Трехсторонний топор AST

  • Создание AST через esprima
  • Пройдите и обновите AST через estraverse
  • Регенерация исходного кода из AST через escodegen

Мы можем сделать простой пример:

1. Сначала создайте новый каталог тестового проекта. 2. Установите модули npm esprima, estraverse и escodegen в рамках тестового проекта.

npm i esprima estraverse escodegen --save

3. Создайте новый файл test.js в каталоге и загрузите следующий код:

const esprima = require('esprima');
let code = 'const a = 1';
const ast = esprima.parseScript(code);
console.log(ast);

Вы увидите вывод:

Script {
  type: 'Program',
  body:
   [ VariableDeclaration {
       type: 'VariableDeclaration',
       declarations: [Array],
       kind: 'const' } ],
  sourceType: 'script' }

4. В тестовом файле загрузите следующий код:

const estraverse = require('estraverse');

estraverse.traverse(ast, {
    enter: function (node) {
        node.kind = "var";
    }
});

console.log(ast);

Результат вывода:

Script {
  type: 'Program',
  body:
   [ VariableDeclaration {
       type: 'VariableDeclaration',
       declarations: [Array],
       kind: 'var' } ],
  sourceType: 'script' }

5. Наконец, в тестовый файл добавьте следующий код:

const escodegen = require("escodegen");
const transformCode = escodegen.generate(ast)

console.log(transformCode);

Результат вывода:

var a = 1;
  • Через эти три оси: мы будемconst a = 1превратился вvar a = 1

Есть ощущение вавилон 0.0

Рекомендуемый сайт

исходный код esprima

исходный код акрон

speed comparison

AST explorer

эспримавизуализация

Онлайн-визуализация AST

Суммировать

Абстрактные деревья часто используются во фронтенде, теперь популярные инструменты, будь то webpack или babel, будут проходить трехосный процесс, здесь я просто даю общее введение, через некоторое время будет абстрактное дерево. синтаксис, если интересно Так же можете посмотреть исходники эспримы, почему именно эсприма, ведь у эспримы больше информации, а акрон легче. Если вам интересно, вы можете следовать за мнойgithub, не забудьте поставить звездочку, это поддержка автора, спасибо.

Категории