предисловие
Прежде всего, позвольте мне объяснить, что эта статья является переводом, а исходный текст взят изAST для разработчиков JavaScript. Я редко трачу время на специальный перевод статьи, очень утомительно читать и писать, но это действительно хорошо написано, поэтому я не могу не поделиться этим с вами.
Этот перевод из моего блога:GitHub.com/code маленький П…, мой блог будет время от времени обновлять различные типы статей, я надеюсь, что все его поддержат.
Хорошо, давайте сразу к делу.
Зачем говорить об AST (абстрактном синтаксическом дереве)?
Если вы посмотрите на любой из текущих основных проектовdevDependencies, вы найдете бесчисленное множество плагинов, созданных в предыдущие годы. Подведем итоги: перевод javascript, сжатие кода, препроцессор css, elint, pretiier и т.д. Есть много js-модулей, которые мы не будем использовать в продакшене, но они играют важную роль в нашем процессе разработки. Однако все вышеперечисленные инструменты построены на плечах гигантского AST.
Однако все вышеперечисленные инструменты построены на плечах гигантского AST.
Мы поставили перед собой небольшую цель, начав с объяснения, что такое AST, а затем как его построить, исходя из общего кода. Мы кратко коснемся некоторых наиболее популярных примеров использования и инструментов, основанных на обработке AST. И я планирую рассказать о моем проекте js2flowchart, который является хорошей демонстрацией использования AST. Хорошо, давайте начнем.
Что такое AST (абстрактное синтаксическое дерево)?
It is a hierarchical program representation that presents source code structure according to the grammar of a programming language, each AST node corresponds to an item of a source code.
Подсчитано, что многие студенты будут такими же, как кошка на картинке, и они будут сбиты с толку, прочитав это официальное определение. Хорошо, давайте рассмотрим пример:
Это упрощено
На самом деле, реальный AST будет иметь больше информации на узел. Тем не менее, это общая идея. От простого текста мы получим структурированные деревообразными данными. Каждая запись соответствует узлу в дереве.
Итак, как получить AST из обычного текста? Ничего себе, мы знаем, что все современные компиляторы делали это раньше. Тогда давайте посмотрим, как это делает общий компилятор.
Желание сделать компилятор — относительно дорогое удовольствие, но, к счастью, нам не нужно проходить все точки знаний компилятора и, наконец, переводить язык высокого уровня в двоичный код. Нам нужно только сосредоточиться на лексическом анализе и анализе синтаксиса. Эти два шага составляют суть создания AST из кода.
Первый шаг, лексический анализ, также называется сканированием сканера. Он считывает наш код и объединяет их в отдельные токены по заданным правилам. Кроме того, он удаляет пробелы, комментарии и т. д. Наконец, весь код будет разбит на список токенов (или одномерный массив).
При лексическом анализе исходного кода он будет читать код буква за буквой, поэтому он называется скан-сканированием; при встрече с пробелами, операторами или специальными символами он будет думать, что слово закончено.
Второй шаг, разбор, тоже парсер. Он преобразует лексически проанализированный массив в древовидное представление. В то же время проверяется синтаксис, и если синтаксис неверен, выдается синтаксическая ошибка.
При генерации дерева парсер удалит некоторые ненужные токены (например, неполные скобки), поэтому AST не на 100% соответствует исходному коду, но уже дает нам представление, как с этим бороться. В качестве отступления парсер покрывает 100% всех структур кода.Связующее дерево называется CST (конкретное синтаксическое дерево).
что мы имеем в итоге
Хотите узнать больше о компиляторах?the-super-tiny-compiler, вор хороший проект. Около 200 строк кода, почти в каждой строке есть комментарии.
Хотите создать свой собственный язык программирования?LangSandbox, лучший проект. Он демонстрирует, как создать язык программирования. Конечно, на рынке также есть много книг по разработке языков программирования. Итак, этот проект идет дальше, сthe-super-tiny-compilerПроект по преобразованию Lisp в язык C отличается, в этом проекте вы можете написать свой собственный язык, скомпилировать его в язык C или машинный язык и, наконец, запустить его.
Могу ли я напрямую использовать стороннюю библиотеку для создания AST? конечно может! Есть куча сторонних библиотек, которые можно использовать. вы можете посетитьastexplorer, затем выберите свою любимую библиотеку. astexplorer — отличный сайт, с AST можно поиграться онлайн, и помимо js есть много библиотек AST на других языках.
Я должен выделить трехстороннюю библиотеку, которую я считаю отличной, под названием Вавилон.
Он используется в знаменитом Babel, может быть, поэтому он так популярен. Из-за поддержки проекта babel можно ожидать, что он будет идти в ногу со временем и всегда будет поддерживать новейшие возможности JS.Мы можем смело его использовать, не боясь масштабного рефакторинга кода благодаря новой версии JS. в будущем. Кроме того, его API также очень прост и удобен в использовании.
Хорошо, теперь, когда вы знаете, как сгенерировать AST из своего кода, давайте продолжим и рассмотрим реальные варианты использования.
Первый вариант использования, я хочу поговорить о преобразовании кода, да, это тот самый продукт, Babel.
Babel — это не «инструмент для поддержки ES6», это так, но дело далеко не только в этом.
Это часто связано с тарелкой и поддержкой ES6 / 7/8. На самом деле это причина, по которой мы часто используем ее. Однако это просто набор плагинов. Мы также можем использовать его для сжатия кода, перевод, связанный с j jsx), плагин для потока и т. Д.
babel — это компилятор javascript. Макроскопически он запускает код в три этапа: анализ, преобразование и генерация. Мы можем дать Babel некоторый код javascript, он модифицирует код, а затем сгенерирует новый код для возврата. Так как же он модифицирует код? Вот так! Он создает AST, проходит по дереву, изменяет токены и, наконец, генерирует новый код из AST.
Давайте посмотрим на этот процесс из следующей демонстрации:
Как я упоминал ранее, babel использует babylon, поэтому сначала мы анализируем код в AST, затем проходим по AST, обращаем имена всех переменных и, наконец, генерируем код. Заканчивать! Как мы видим, первый шаг (парсинг) и третий шаг (генерация) выглядят довольно рутинно, и мы делаем оба каждый раз. Итак, Бабель позаботился о них обоих. Наконец, что нас больше всего беспокоит, так это этап трансляции AST.
Когда мы разрабатывали babel-плагин, нам нужно было только описать узлы-"посетители", которые преобразили ваш AST.
Добавьте его в список плагинов babel, установите конфигурацию загрузчика веб-пакета или плагины в .babelrc.
Вы можете обратиться к Babel-handbook, если хотите узнать больше о том, как создать свой первый babel-плагин. Если вы хотите узнать, как создать свой первый плагин для Babel, ознакомьтесь сBabel-handbook
Давайте двигаться дальше, следующий вариант использования, о котором я хочу упомянуть, — это инструмент автоматизированного рефакторинга кода и артефакт JSCodeshift.
Допустим, вы хотите заменить все старомодные анонимные функции и превратить их в лямбда-выражения (стрелочные функции).
Ваш редактор кода, вероятно, не сможет этого сделать, потому что это не простая операция поиска и замены. В это время на сцену выходит jscodeshift.
если ты слышалjscodeshift, вы, наверное, тоже слышалиcodemods, эти два слова могут сначала сбить с толку, но ничего страшного, я объясню дальше. jscodeshift — это запускcodemodsИнструмент.codemodЭто фрагмент кода, описывающий, в какой код нужно преобразовать AST.Идея та же, что и у плагина Babel.
Итак, если вы хотите создать автоматическую миграцию вашего кода из старого фреймворка в новый фреймворк, это очень продуманный способ. Например, рефакторинг prop-types в react 16.
есть много разныхcodemodesОн создан, вы можете сохранить то, что вам нужно, чтобы вручную не модифицировать кучу кода, берите и пускайте пыль в глаза:GitHub.com/Facebook/ — это просто…
GitHub.com/реагировать JS/Горячие…
Наконец, вариант использования, я хотел бы упомянуть Prettier, потому что каждый код фермера, скорее всего, будет использовать его в своей повседневной работе.
Prettier форматирует наш код. Он корректирует длинные предложения, организует пробелы, круглые скобки и т. д. Таким образом, он принимает код в качестве входных данных и модифицированный код в качестве выходных данных. Звучит знакомо, правда? Конечно!
Идея все та же. Сначала сгенерируйте AST из кода. После этого AST еще обрабатывается, и наконец генерируется код. Однако промежуточный процесс не так прост, как кажется.
Опять же, если вы хотите узнать больше о теории улучшения печати, вот книга, в которую вы можете погрузиться.《Красивый принтер》.
Статья подходит к концу, продолжаем, последнее, что я хочу сегодня упомянуть, это моя библиотека, которая называетсяjs2flowchart(4,5 тысячи звезд на Github).
Как следует из названия, он преобразует код js для создания блок-схемы svg.
Это отличный пример, потому что он показывает вам, что когда у вас есть AST, вы можете делать все, что хотите. Нет необходимости преобразовывать AST обратно в строковый код, вы можете нарисовать через него блок-схему или что угодно.
Каков сценарий использования js2flowchart? С помощью блок-схем вы можете объяснить свой код или написать документацию для своего кода; изучать код других людей с помощью визуальных объяснений; с помощью простого синтаксиса js создавать блок-схемы для простых описаний каждого процесса.
Сразу попробуй самый простой способ, зайди в онлайн редактор посмотретьjs-code-to-svg-flowchart
Вы также можете использовать его в коде или через CLI, вы просто указываете на файл, который хотите создать SVG. Также есть плагин VS Code (ссылка в ридми проекта)
Итак, что еще он может сделать? Ничего себе, я не буду говорить здесь глупости, если вам интересно, вы можете непосредственно прочитать документацию этого проекта.
Итак, как это работает?
Сначала код преобразуется в AST, затем мы просматриваем AST и генерируем другое дерево, которое я называю деревом рабочего процесса. Он удаляет множество неважных токенов, но объединяет важные блоки, такие как функции, циклы, условия и т. д. После этого мы проходим по дереву рабочего процесса и создаем дерево формы. Узлы каждого дерева формы содержат информацию о типе визуализации, расположении, соединениях в дереве и многом другом. На последнем этапе мы перебираем все фигуры, генерируем соответствующие SVG и объединяем все SVG в один файл.
конец
Очень сложно найти и отфильтровать материалы, я надеюсь, что студенты могут нас сильно поддержать!