Посмотрите, как транспиляторы Javascript упрощают жизнь разработчикам

JavaScript и транспилеры

Да, Бабель, мы говорим о тебе

Почему Javascript так популярен? (Потому что как мы можем без этого начать публикацию о javascript?)

Javascript - это язык, который мы все знаем и любим. Сегодня это самый популярный язык из-за его высокой гибкости, которая позволяет использовать различные парадигмы программирования, а именно; Объектно-ориентированное программирование, функциональное программирование, различные среды, в которых оно может работать, низкий порог входа, удивительное сообщество, генерирующее миллионы проектов и библиотек с открытым исходным кодом и т. Д.

Сам по себе язык предлагает множество интересных функций в новых версиях, что дает очень приятный опыт программирования. Одна из причин, по которой JS стал настолько популярным, - это постоянное добавление функций в язык. Такие функции, как распространение объектов, распространение массивов, Array.flatten, функции стрелок и т. Д., Действительно помогают улучшить общий опыт разработчика.

Хотя это отлично подходит для кодирования, это приводит к аду поддержки.

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

Среды

Как мы знаем, JS может работать в различных средах - от сервера с NodeJS до браузера. Поддержка новых языковых функций в этих разнообразных средах может быть проблемой. Программисты и движки javascript в равной степени должны идти в ногу с новейшими языковыми функциями, что может быть сложно и всегда невозможно по разным причинам, таким как переписывание большого фрагмента и без того огромного программного обеспечения.

Хороший пример - браузеры. Хотя именно браузеры сделали JS настолько популярным, они сильно отстают в плане поддержки новых языковых функций. Например, поддержка модульной системы. Некоторые старые браузеры все еще не поддерживают это (по многим причинам, одна из которых состоит в том, что модульная система ломает слишком много существующего кода). Означает ли это, что мы воздерживаемся от использования этих новых языковых функций, которые в первую очередь делают его таким удивительным?

Последнее и лучшее в JS → несовместимо со старыми средами → Разработчики тратят много времени на добавление обходных решений для старых сред → Уродливый код → Несчастливые разработчики → Хороший продукт, который поддерживает очень ограниченные среды с более высокими шансами на ошибки (Несчастливые разработчики) → Несчастливый бизнес

Что ж, как вы, наверное, знаете, ответ - нет. Ответ на эту проблему - транспилеры.

Транспилеры

Транспилеры - это программы, которые преобразуют часть кода в другой фрагмент кода. В этом случае транспилятор преобразует новые языковые функции в старые один раз, чтобы целевые среды (подробнее об этом позже) могли их поддерживать.

Как я уже упоминал ранее, Javascript может иметь много типов сред, а именно. браузер, механизм узлов, конкретный старый браузер, который поддерживает более старую версию языка, более старую версию узла, последнюю версию узла и т. д. При разработке приложения разработчик должен знать, какие среды должно поддерживать его приложение, и соответственно используйте транспилеры, чтобы она могла получить лучшее из обоих миров. Например, автору универсальной библиотеки необходимо рассмотреть гораздо более широкий спектр сред, чтобы максимально расширить охват своего пакета, тогда как разработчику приложения необходимо понимать целевую аудиторию своего приложения и соответственно поддерживать среды. Транспилер может преобразовывать красивые модули в шаблоны CommonJS / AMD, которые поддерживаются «всеми» браузерами. Он может изменить распространение объекта на вызовы назначения объектов и так далее.

Последнее и лучшее в JS → Transpiler → старый и скучный, но хорошо поддерживаемый JS → Чистый код → Счастливые разработчики → Великолепный продукт, который поддерживает все среды → Счастливый бизнес

Транспилеры - это замечательный фрагмент кода, который действительно помог повысить популярность JS и значительно снизил накладные расходы на поддержку разработчиков. Разработчикам JS теперь не нужно думать о проблемах, связанных с поддержкой старой среды, что привело к значительному увеличению производительности и принятию языка.

Давайте посмотрим на один из самых популярных транспайлеров для JS на сегодняшний день, Babel.

Вавилон

Babel, или 6to5, как его первоначально называли, на сегодняшний день является одним из самых известных транспиляторов javascript с открытым исходным кодом. Вавилон просматривает наш код и создает из него абстрактное синтаксическое дерево (AST). Затем он использует синтаксический анализатор Babylon для анализа AST и преобразования кода на основе заданных правил, которые являются частью файла конфигурации babel, называемого babelrc. Я не буду вдаваться в подробности определения babelrc, поскольку об этом уже написано миллиард других сообщений в блогах (честно говоря, документы тоже довольно хороши). Пользователи могут определять различные плагины и предустановки, которые сообщают Babel и Babylon, какой код ожидать, и соответствующим образом преобразовывать его. Babel также позволяет разработчику определить точную среду, в которой он хочет запускать производственный код. Таким образом, разработчик может просто определить файл конфигурации babelrc и решить большинство проблем поддержки для различных сред. (ну, по крайней мере, теоретически).
Короче говоря, Babel потрясающий, и вам стоит его использовать, если вы еще этого не делаете!

Тестирование

Тестирование - очень важная часть разработки кодовой базы. Даже если вы можете разрабатывать свой код с использованием новейших возможных функций, они бесполезны, если вы не сможете их протестировать. Вот тут-то и появляется шутка.

Jest - потрясающая библиотека тестирования, которая поддерживает текущую версию узла, в котором он работает, и все функции, которые поддерживает текущая среда, в которой выполняются тесты.

Но как насчет последней и самой большой функции, которую вы использовали, которая все еще находится на ранних стадиях принятия TC39? Что ж, Бабель снова приходит на помощь. Jest поддерживает любой транспилятор, который может быть запущен либо перед запуском тестов, либо во время выполнения jest, что позволяет тестам поддерживать все новейшие и лучшие функции.

Последнее и лучшее в JS → Компилятор → старый и скучный, но хорошо поддерживаемый JS → Библиотека тестирования → Великолепные тесты → Счастливые разработчики → Великолепный продукт, который поддерживает все среды → Счастливый бизнес → Великолепный продукт

Давайте поговорим о вавилонской поддержке шуток. Если у вас есть файл конфигурации babelrc, jest будет автоматически использовать его, чтобы попытаться транспилировать ваш код во время выполнения тестов (для этого вам понадобится плагин времени выполнения babel). Если вы включите babel-jest в свои зависимости, jest сначала запустит компилятор babel, а затем выполнит ваши тесты. В любом случае вы получите максимальную отдачу от своих тестов, поскольку вы можете использовать все новейшие функции, не жертвуя ни одним из тестов. (Опять же, сообщество babel потрясающее!)

Линтинг

Инструменты Linting удивительны тем, что они предлагают, и тем, как они помогают поддерживать как качество кода, так и стандарты кодирования. Наличие собственных правил линтинга значительно снижает стоимость проверки кода и уменьшает количество модульных тестов, что, в свою очередь, повышает производительность.

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

Примером этого может быть ESLint. Мы можем использовать любые новейшие языковые функции (даже Typescript! Читайте дальше, чтобы узнать больше) и использовать компилятор для транспиляции кода, а затем запускать на нем линтер. Хорошим примером этого может быть использование системы типов для вашего кода.

Flow и Typescript - две самые популярные системы типов, у машинописного текста есть отдельный компилятор. Вы можете легко использовать любой из них, использовать синтаксический анализатор Babel для анализа AST, созданного ESLint, транспилировать его, полностью удалять типы и затем запускать правила линтинга!

Последнее и лучшее в JS → Babel → старый и скучный, но хорошо поддерживаемый JS → Linter → Великолепный код, соответствующий всем стандартам кодирования → Счастливые разработчики → Великолепный продукт, поддерживающий все среды → Счастливый бизнес

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

Как вы уже видели, транспиллеры потрясающие и действительно способствовали резкому увеличению числа разработчиков и команд, выбирающих Javascript в качестве языка по своему выбору.

Будущее

Заглянув в будущее транспилеров, можно посмотреть на Babel Macros.

Babel Macros - замечательный плагин для Babel, который позволяет пользователям явно импортировать макросы Babel в каждый файл. Это позволит подключаемому модулю применяться только к этому файлу, тем самым предотвращая ненужные ошибки и запутанные сообщения об ошибках, которые в противном случае могли бы возникнуть из-за неправильной конфигурации. Макросы Babel позволяют использовать практически нулевую конфигурацию Babel. Прочтите эту статью, чтобы узнать больше об этом (Престижность Кент С. Доддс, Сунил Пай и другим за их усилия).

TL; DR;

  • Вавилон потрясающий
  • Сообщество Babel потрясающее
  • Jest и ESLint поддерживают Babel
  • Вы можете использовать Babel для запуска кода Typescript с Jest и ESLint
  • Используйте Babel!
  • Остерегайтесь макросов Babel

Если вам понравился этот пост или у вас есть комментарии, пожалуйста, оставьте комментарий ниже.

Вы можете найти меня по адресу:

Спасибо за чтение и хорошего дня!