Опубликовано: 7 мая 2025 г.
Browserslist — один из самых популярных инструментов для настройки минимально поддерживаемых версий браузеров в базах кода внешнего интерфейса. Разработчики добавляют запрос списка browserslist в свой файл package.json , и Browserslist предоставляет список минимально поддерживаемых браузеров. Browserslist можно использовать с широким спектром популярных инструментов линтинга, полифилла и упаковки, в том числе:
- Автопрефиксер
- Babel с использованием
@babel/preset-env - PostCSS с использованием
postcss-preset-env - ESLint с использованием
eslint-plugin-compat - Stylelint с использованием
stylelint-no-unsupported-browser-features - веб-пакет
Базовые цели
Когда вы решите использовать Baseline, вам следует учитывать свою пользовательскую базу и решить, на какой набор функций Baseline вы хотите ориентироваться:
- Базовый широко доступный вариант включает в себя все веб-функции, которые полностью поддерживались базовым набором браузеров Baseline 30 или более месяцев назад.
- Наборы функций базового года, например «Базовый 2020» , включают все функции, которые были впервые доступны в конце указанного года.
В зависимости от вашей базы пользователей вы можете выбрать базовый вариант «Широко доступный» или вам может потребоваться настроить таргетинг на более старый базовый год. Обратитесь к своим инструментам аналитики или RUM, чтобы понять, какие версии браузеров есть у ваших пользователей.
Установите browserslist-config-baseline
После того как вы решили, какой базовый набор функций вы хотите использовать, вы можете применить эту цель к своим инструментам разработчика. Самый простой способ сделать это для любых инструментов, использующих список браузеров, — установить browserslist-config-baseline :
# npm
npm i browserslist-config-baseline@latest -D
# yarn
yarn add --latest browserslist-config-baseline -D
# bun
bun add browserslist-config-baseline@latest -d
Как настроить таргетинг на базовый уровень Широко доступен
Чтобы настроить базовый широкодоступный вариант, обновите или добавьте конфигурацию списка browserlist в package.json , используя ключевое слово extends :
{
...
"browserslist": [
"extends browserslist-config-baseline"
]
...
}
Когда browserslist загружает список поддерживаемых браузеров, browserslist-config-baseline динамически генерирует текущие минимальные версии браузера, которые поддерживают все функции, которые сейчас широко доступны. Вы также можете добавить extends browserslist-config-baseline в файл .browserslistrc , и он будет обрабатываться таким же образом.
Как ориентироваться на базовые годы
Если вы хотите настроить таргетинг на набор функций базового года, добавьте / и год в формате YYYY в конец запроса browserslist :
"browserslist": "extends browserslist-config-baseline/2020"
Как указать последующие браузеры
Базовый набор браузеров Baseline включает Chrome, Edge, Firefox и Safari. Другие браузеры основаны на том же открытом исходном коде, что и Chrome и Edge — Chromium — и должны поддерживать тот же набор функций, что и любая версия Chromium, которую они реализуют.
browserslist-config-baseline использует baseline-browser-mapping для сопоставления версий браузера с наборами функций, которые они поддерживают. Сопоставления для мобильных устройств UC Browser и QQ Browser доступны в baseline-browser-mapping , и в будущем могут быть включены другие браузеры.
Чтобы включить эти браузеры в вашу базовую конфигурацию, добавьте /with-downstream сразу после имени модуля в вашей конфигурации browserslist :
"browserslist": "extends browserslist-config-baseline/with-downstream"
Или:
"browserslist": "extends browserslist-config-baseline/with-downstream/2020"
Примеры использования browserslist-config-baseline в действии
В упаковочных инструментах
Добавление browserslist-config-baseline в ваш репозиторий может дать немедленный эффект. Babel — популярный инструмент для сборки пакетов Javascript. Если вы используете параметры пакета @babel/preset-env по умолчанию, многие современные API и методы Javascript будут заменены более подробным синтаксисом, необходимым для старых браузеров:
Однако установка browserslist-config-baseline целевого значения Baseline 2020 в том же примерном проекте значительно уменьшает размер вывода этого Javascript, поскольку требуется меньше синтаксических преобразований:
Попробуйте это сами, используя пример кода в репозитории базовых демонстраций Google Chrome Labs.
В линтерах
Некоторые линтеры уже работают с Browserslist или их можно настроить для работы с Browserslist с помощью модуля совместимости. Например, stylelint может использовать конфигурацию списка browserslist с помощью модуля stylelint-browser-compat . Настройте файл stylelint.config.js для использования browserslist-config-baseline :
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
browserslist: ['extends browserslist-config-baseline'],
},
],
},
};
Stylelint теперь будет помечать CSS, который в настоящее время не является частью широко доступной версии Baseline:
Stylelint также предоставляет плагин , который позволяет вам напрямую устанавливать базовые правила, но если вы уже используете Browseslist для обработки своей конфигурации, browserslist-config-baseline является готовым решением.
Как внести свой вклад в browserslist-config-baseline
Если вы хотите запросить функцию для browserslist-config-baseline , создайте проблему или запрос на включение в репозиторий GitHub.
Если вы хотите предоставить дополнительные данные браузера или сообщить о проблеме с данными, создайте проблему или запрос на извлечение в репозитории baseline-browser-mapping .