babel
-
Хабрахабр
В поисках лучшей версии EcmaScript для сборки
Как оказалось, выбор версии ES для сборки веб-приложения, а также организация самой этой сборки, может оказаться весьма сложной задачей. Особенно, если вы собираетесь делать этот выбор, основываясь исключительно на доказательной базе. В этой статье я постараюсь ответить на следующие вопросы, возникшие в ходе моего расследования на эту тему: Как влияет компиляция кода под ES5 на производительность сайта? Какой инструмент генерирует…
Читать далее » -
Хабрахабр
Как я Jest с помощью SWC ускорял
За последние пару лет не раз можно было услышать про новые инструменты сборки статики, такие как SWC, esbuild и Vite. Все они обещают нам next gen-оптимизацию времени сборки, а SWC ещë и грозится оптимизировать скорость выполнения тестов на Jest; более того, судя по документации, сделать это очень просто. Я решил проверить, так ли это на самом деле и каким будет…
Читать далее » -
Хабрахабр
Что не так с сорсмапами и как с ними не связываться?
Здравствуйте, меня зовут Дмитрий Карловский и у меня… посттравматическое стрессовое расстройство после генерации сорсмапов. И сегодня, с вашей помощью, мы будем это лечить путём максимально глубокого погружения в травмирующие события. Это — текстовая расшифровка выступления на HolyJS'21. Вы можете посмотреть видео запись, прочитать как статью, либо открыть в интерфейсе проведения презентаций. Как я до этого докатился? Сперва история болезни: Однажды…
Читать далее » -
Хабрахабр
Минифицируем приватные поля в TypeScript. Доклад Яндекса
Меня зовут Лёша Гусев, я работаю в команде разработки видеоплеера Яндекса. Если вы когда-нибудь смотрели фильмы или трансляции на сервисах Яндекса, то использовали именно наш плеер. Я сделал небольшую оптимизацию размера бандла — минификацию приватных полей. В докладе на Я.Субботнике я рассказал об использовании Babel-плагинов, трансформеров TypeScript и о том, насколько в итоге уменьшился размер продакшен-сборки проекта. [embedded content] Конспект…
Читать далее » -
Хабрахабр
[Перевод] Пишем babel плагин, пошаговое руководство
Сегодня я поделюсь с вами пошаговым руководством как написать свой babel плагин. Вы сможете использовать эти знания для автоматизации правок, рефакторинга или кодогенерации. Что такое babel? Babel это JavaScript компилятор, который в основном используют для конвертации кода на ECMAScript 2015+ в обратно совместимый с текущими и более старыми браузерами или окружениями. Babel использует систему плагинов для преобразования кода, поэтому кто…
Читать далее » -
Хабрахабр
[Перевод] JavaScript tree shaking, like a pro
Это перевод статьи об оптимизации и уменьшении размера бандла приложения. Она хороша тем, что тут описаны best practices, советы, которых стоит придерживаться, чтобы тришейкинг работал и выкидывал неиспользуемый код из сборки. Она будет полезной многим, потому что сейчас все используют системы сборки, в которых «из коробки» есть тришейкинг. Но чтобы он работал правильно, нужно придерживаться принципов, описанных ниже. Тришейкинг становится…
Читать далее » -
Софт
[Перевод] Опрос по инструментам фронтенда 2019 — результаты
TL;DR. В большинстве категорий теперь выделяются явные лидеры — несколько лет назад такого не было. Это помогает накоплению знаний. Поэтому Навыки владения инструментами в среднем становятся глубже у разработчиков всех уровней. Как всегда, огромная благодарность всем, кто нашёл время заполнить опросник. В этом году 3005 разработчиков ответили на 27 вопросов, охватывающих широкий спектр инструментов и методологий фронтенд-разработки. Со своей стороны,…
Читать далее » -
Хабрахабр
[Перевод] Создание собственных синтаксических конструкций для JavaScript с использованием Babel. Часть 2
Сегодня мы публикуем вторую часть перевода материала о расширении синтаксиса JavaScript с использованием Babel. → Головокружительная первая часть Как работает парсинг Парсер получает список токенов от системы токенизации кода и, по одному рассматривая токены, строит AST. Для того чтобы принять решение о том, как именно использовать токены, и понять, какой токен можно ожидать следующим, парсер обращается к спецификации грамматики языка.…
Читать далее » -
Хабрахабр
[Перевод] Создание собственных синтаксических конструкций для JavaScript с использованием Babel. Часть 1
Сегодня мы публикуем первую часть перевода материала, который посвящён созданию собственных синтаксических конструкций для JavaScript с использованием Babel. Обзор Для начала давайте взглянем на то, чего мы добьёмся, добравшись до конца этого материала: // конструкция '@@' оснащает функцию `foo` возможностями каррирования function @@ foo(a, b, c) { return a + b + c; } console.log(foo(1, 2)(3)); // 6 Мы собираемся…
Читать далее » -
Хабрахабр
[Перевод] Зачем современную веб-разработку так усложнили? Часть 1
Современная фронтенд-разработка оставляет полярные впечатления: одни её любят, другие презирают. Я большой поклонник современной веб-разработки, хотя мне она напоминает некую «магию», со своими плюсами и минусами: Когда вы поймете, как использовать волшебные инструменты (babel! бандлеры! вотчеры! и так далее!), ваш рабочий процесс становится быстрым, мощным и восхитительным Если вы не понимаете волшебные инструменты, всё ужасно запутанно …и попытки освоить магию…
Читать далее »