Да… мы будем говорить о кодмодах, что такое кодмоды и как написать скрипт трансформации?

Codemod может быть инструментом или библиотекой, которая помогает выполнять крупномасштабный рефакторинг кодовой базы, который может быть частично автоматизирован, но все же требует вмешательства человека.

Вот вам пример.

Нам нужно преобразовать привязку this в старом стиле к стрелочным функциям. Но нам нужно сделать это в крупномасштабной кодовой базе, скажем, в тысяче файлов. Это может занять несколько дней, чтобы сделать это вручную.

Что, если мы сможем написать скрипт, который принимает этот код как данные, обрабатывает их и возвращает преобразованный код. Этот процесс называется метапрограммирование.

Пройдемся по теории один раз. Это то, что должен сделать ваш скрипт

  • Прочтите свой старый исходный код.
  • Разберите его и создайте абстрактное синтаксическое дерево (AST).
  • Примените преобразование к AST.
  • Восстановите исходный код из преобразованного AST и замените исходный код.

Помните о своих занятиях по проектированию компиляторов, AST — это конечный результат этапа анализа синтаксиса. Вы можете прочитать больше об этом здесь".

Ой… это много работы. Не волнуйтесь, у нас есть инструменты, которые сделают за нас всю низкоуровневую работу. Мы будем использовать замечательный инструмент под названием jscodeshift.

jscodeshift — это оболочка вокруг recast, которая представляет собой преобразователь AST в AST. Это также позволяет нам узнать, сколько файлов было преобразовано или пропущено.

Итак, теперь давайте запачкаем руки. У нас есть теги значков шрифтов с прикрепленным классом значков материалов. Нам нужно перейти от значков шрифтов к значкам SVG.

Наш окончательный результат будет выглядеть примерно так.

В преобразованном коде тег ‹i/› заменяется соответствующими компонентами значка SVG. Предыдущее className и другие реквизиты по-прежнему связаны с новым компонентом SVG. У нас также есть оператор импорта из нашей библиотеки иконок.

Эти преобразования были применены к тысячам файлов javascript и typescript в реальном проекте.

Сначала вам нужно установить jscodeshift.

npm install -g jscodeshift

Вот сценарий.

Вы можете узнать больше и поиграть с этим примером здесь.

Попробуйте изучить исходный код некоторых популярных кодмодов, таких как loadable-component, react-codemod и многих других.

Заключительные примечания

Большинство кодмодов работает одинаково. Ключ в том, чтобы понять сгенерированный AST вашего языка. Теперь вы можете догадаться, как Babel трансформирует современный javascript для старых браузеров, как eslint/prettier проверяет ошибки линтинга и многое другое.

Я в восторге от того, что вы строите с помощью этих инструментов.

Ресурсы

Вот несколько источников для начала работы с codemods.

Если вам понравилась эта история, нажмите кнопку 👏 и поделитесь ею, чтобы другие тоже могли ее найти! Кроме того, не стесняйтесь оставлять комментарии ниже.

Groww Engineering публикует технические анекдоты, новейшие технологии и лучшие способы решения распространенных проблем программирования. Вы можете подписаться здесь, чтобы получать последние обновления.