Абстрактное синтаксическое дерево AST и компилятор компилятора

Babel

the-super-tiny-compiler / супер крошечный компилятор

эта частьthe-super-tiny-compiler / супер крошечный компиляторКонтент, все взято изthe-super-tiny-compiler-CN, прочитай сначалаthe-super-tiny-compiler-CNИмеет смысл только смотреть на продолжение.

резюме

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

  1. РазобратьПреобразование исходного кода в более абстрактную форму.
  2. конвертироватьВозьмите абстрактные формы, созданные синтаксическим анализом, и манипулируйте этими абстрактными формами, чтобы делать то, что от них хочет компилятор.
  3. генерация кодаОбъектный код генерируется на основе преобразованного представления кода.

Разобрать

  1. лексический анализ-- tokenizer Исходный код разбивается на морфемы с помощью инструмента под названием tokenizer (генератор морфем, также называемый лексером). (Лексема — это объект, описывающий синтаксис языка программирования. Он может описывать числа, идентификаторы, пунктуацию, операторы и многое другое.)
  2. Разбор- Анализатор берет морфемы и объединяет их в промежуточное представление, описывающее отношения между частями исходного кода: абстрактное синтаксическое дерево. (Абстрактное синтаксическое дерево — это глубоко вложенный объект, представляющий код в форме, которой легко манипулировать и которая предоставляет много информации об исходном коде.)

конвертировать

Следующим этапом компилятора является фаза преобразования. Обзор снова, этот процесс получает абстрактное синтаксическое дерево, которое генерируется и изменяет его. Фаза преобразования может изменить абстрактный синтаксис на один и тот же язык (например, Babel, Babel также является кодом JS, сгенерированным кодом JS) или компилируйте на другой язык.

traverser, эта функция получает абстрактное синтаксическое дерево и объект посетителя

transformer -> traverser(ast, visitor)

Получает созданное абстрактное синтаксическое дерево и передает его и объект посетителя вtraverserфункция. затем создайте новое абстрактное синтаксическое дерево

генерация кода

codeGeneratorсгенерировать новый код

Как работает вавилон?

  1. Аналитический@babel/parser(включая вышеуказанныеtokenizer,parser), генерировать AST в соответствии со стандартами es2015, es2016...
  2. Конвертировать -@babel/traverse+ плагины (посетитель)
  3. генерация кода -@babel/generator

Определения ТЧА

  1. SpiderMonkey in MDN
  2. The ESTree Spec
  3. babel ASTпротивНастройка ESTree
  4. jsx-AST

Инструмент генерации AST (парсер)

  1. esprima- старомодный парсер
  2. acorn—— Руль после эсприма, который на данный момент самый б/у. webpack также использует этот инструмент
  3. astexplorer—— Инструмент онлайн-генерации
  4. espree-- родом из вилки esprima, от eslint, для eslint
  5. babel-parser-- Оригиналbabylon, изначально изacornраскошелиться
  6. UglifyJS2——Встроенный парсер
  7. shift-parser-js- Определен набор спецификаций ASTshift-spec

Другие инструменты преобразования AST (преобразователь)

  1. estraverse
  2. ...

Инструмент генерации кода (codeGenerator)

  1. escodegen
  2. ...

Другие инструменты компиляции

  1. traceur-compiler
  2. ...

Инструменты на основе AST

Как описано выше:

  1. eslint
  2. webpack
  3. Сжатие кода UglifyJS
  4. prettier-- использовать@babel/parser,angular-estree-parser... etc.
  5. Tymdercript - поставляется с парсером, трансформатором, кодегенератором
  6. Рефакторинг
    1. recast
    2. jscodeshift
    3. react-codemod
  7. Другие, такие как: подсказки об ошибках IDE, форматирование, выделение, автозаполнение и т. д.
  8. ...

Ссылаться на

  1. the-super-tiny-compiler-CN
  2. Раскрыт принцип JS AST
  3. Основы JavaScript. Что вы делали с компиляторами JS?
  4. Преобразование посредственных производителей кода переднего плана — AST
  5. Тяжелая структура кода - JCodeshift
  6. Перенос кода проекта с помощью AST
  7. Руководство по началу работы с jscodeshift
  8. ACORN.JS: принципы и приложения
  9. Разбираем JavaScript с помощью Acorn
  10. Speed Comparison
  11. es6-tools
Категории