Привет!

Недавно актуализировали список поддерживаемых браузеров на tinkoff.ru, и немного погрузился в экосистему вокруг, а именно в взаимосвязь следующих инструментов:

- browserslist
- Can I Use
- core-js
- @babel/preset-env

Если коротко, как это устроено:

core-js поставляет полифиллы для различных ECMAScript фич, и начиная с 3 версии поддерживает свою таблицу совместимости фич и браузеров - http://zloirock.github.io/core-js/compat/

@babel/preset-env добавляет нужные полифиллы из core-js при транспиляции кода, до версии 7.3 собирал данные по совместимости из https://kangax.github.io/compat-table/es6/, минусы описаны в “core-js@3, babel and a look into the future”, с 7.4 использует данные core-js.

browserslist позволяет шарить между всеми инструментами общий список браузеров, и генерировать его по различным условиям типа “> 1%” или “not dead”.

Также browserslist использует сервис Can I Use в качестве источника данных о названиях и версиях браузера, актуальный список можно посмотреть тут - https://caniuse.com/usage-table.

Есть кстати не оч подробная и свежая, но неплохая статья про preset-env - https://www.jnielson.com/demystifying-babel-preset-env

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

1. Данные Can I Use ограничены - не знаю как они собираются, но к примеру по популярным в РФ или в Китае браузерам может быть очень мало статистики, и они будут отсутствовать, либо у браузера в списке будет одна из свежих версий. Пример проблемы - https://github.com/babel/babel/issues/8545

2. Compat данные core-js ограничены - к примеру для поддержки браузера Samsung в core-js добавляли таблицу - маппинг версий Samsung на используемый в них движок Chromium. Yandex или UC браузеров там нет, причем достаточно давно https://github.com/zloirock/core-js/issues/721. Пример проблемы в preset-env - https://github.com/browserslist/browserslist/issues/290

Как нас (и возможно вас) задевают эти проблемы - мы используем browserslist для нескольких кейсов:
- поддержка необходимых браузеров, это сам @babel/preset-env и наш механизм генерации полифиллов
- проверка браузера на попадание в наш список современных браузеров, для таких отдадим modern сборку, в которой значительно меньше кода
- проверка на устаревший браузер, который ниже нашего дефолтного списка, для таких отдаем заглушку с просьбой обновить браузер

С modern сборкой все хорошо - если список, есть браузеры выше чем версии из списка, парсим User-Agent или Client Hints и отдаем подходящий код.

Но гарантировать поддержку браузеров мы получается просто не можем!

Допустим нам надо поддержать UC браузер от 11 версии и Samsung от 2 версии, потому что с них есть стабильный поток пользователей.

Но в свежих данных от https://caniuse.com/usage-table таких старый версий просто нет - то есть и подобрать соответствие ES фич не к чему. А в случае с UC браузером у нас и compat данных в core-js нет, для Samsung есть хотя бы маппинг к Chromium.

Также, проблема с проверкой на устаревший браузер. Приходит пользователь с UC браузера 11 версии, которая есть в нашем списке, но после обработки списка через browserslist, отдается минимально известный в Can I Use - 15 версии (я такого даже не нагуглил).

В итоге все пользователи с 11, 12 и 13 версий UC браузера получат редирект на заглушку, и мы об этом просто так не узнаем.

Этот механизм исправил принудительным добавлением минимальных версий из списка при проверке соответствия.

Вот такой дивный мир) Утешает только то, что с достаточно старыми версиями хрома и при наличии Android Browser в списках, preset-env добавит практически все популярные полифиллы.

Пишите в комментарии ваш опыт с этими инструментами, и обязательно поправьте если где-то ошибся.