Browserslist — это стандартный механизм определения списка браузеров, которые должны поддерживаться проектом. Parcel использует эти данные для автоматической настройки процесса сборки, включая:
Вместо ручного указания настроек Babel, PostCSS и других инструментов достаточно определить целевые браузеры через browserslist, после чего Parcel самостоятельно подберёт необходимые преобразования.
Современные браузеры поддерживают разные наборы возможностей JavaScript и CSS.
Например, такие возможности, как:
?.);??);поддерживаются не во всех версиях браузеров.
Если проект должен работать в старых версиях браузеров, Parcel должен преобразовать код в совместимый формат. Для этого ему необходимо знать, какие браузеры считаются целевыми.
Без browserslist сборщик не может точно определить уровень необходимой совместимости.
При запуске сборки Parcel анализирует настройки проекта и определяет список поддерживаемых браузеров.
На основе этой информации выполняются следующие действия:
Исходный код:
const username = user?.profile?.name ?? "Guest";Для современных браузеров код может быть оставлен без изменений.
Для старых браузеров Parcel автоматически создаст эквивалентную конструкцию:
var username =
user != null &&
user.profile != null &&
user.profile.name != null
? user.profile.name
: "Guest";Исходный CSS:
.container {
display: grid;
}Если требуется поддержка старых браузеров, Parcel может добавить дополнительные CSS-преобразования.
При использовании новых возможностей JavaScript Parcel может автоматически подключать необходимые полифилы в зависимости от списка поддерживаемых браузеров.
Parcel поддерживает несколько вариантов настройки.
Наиболее распространённый способ.
{
"browserslist": [
"> 0.5%",
"last 2 versions",
"not dead"
]
}Здесь:
> 0.5% — браузеры с долей рынка более 0.5%;last 2 versions — две последние версии каждого
браузера;not dead — исключение неподдерживаемых браузеров.Можно создать отдельный файл в корне проекта.
> 0.5%
last 2 versions
not deadТакой подход удобен в крупных проектах.
Parcel позволяет создавать несколько целей сборки.
Пример:
{
"targets": {
"modern": {
"engines": {
"browsers": [
"last 2 Chrome versions"
]
}
}
}
}В этом случае настройка относится только к конкретной цели.
Browserslist использует собственный язык запросов.
last 2 versionsОзначает две последние версии каждого браузера.
last 2 Chrome versionsПоддерживаются только актуальные версии Chrome.
Chrome >= 120Поддерживаются версии Chrome начиная со 120-й.
> 1%Включаются браузеры с глобальной долей более 1%.
> 1%
not IE 11Internet Explorer 11 исключается из списка.
last 2 Chrome versions
last 2 Firefox versions
last 2 Safari versionsПодходит для современных веб-приложений.
defaults
not deadОдин из самых популярных вариантов конфигурации.
Ключевое слово:
defaultsпредставляет собой рекомендуемый набор браузеров, поддерживаемый командой Browserslist.
На текущий момент он примерно эквивалентен:
> 0.5%
last 2 versions
Firefox ESR
not deadИспользование defaults позволяет получать актуальный
список браузеров без постоянного обновления конфигурации.
Выражение:
not deadисключает браузеры, которые:
Примеры таких браузеров:
Несмотря на прекращение поддержки IE, некоторые корпоративные проекты продолжают его использовать.
Конфигурация:
IE 11или
defaults
IE 11заставит Parcel выполнять значительно больше преобразований.
Например:
class User {
constructor(name) {
this.name = name;
}
}будет преобразован в ES5-совместимый код.
Это увеличивает:
Для большинства современных SPA-приложений подходит конфигурация:
{
"browserslist": [
"defaults",
"not IE 11"
]
}или
{
"browserslist": [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Safari versions"
]
}Такие настройки позволяют использовать современные возможности платформы без значительных накладных расходов.
Корпоративные приложения часто обязаны поддерживать старые браузеры.
Пример:
{
"browserslist": [
"last 5 versions",
"IE 11"
]
}Parcel выполнит дополнительные преобразования для обеспечения совместимости.
Browserslist поддерживает разные настройки для различных режимов.
В файле package.json:
{
"browserslist": {
"production": [
">0.5%",
"not dead"
],
"development": [
"last 1 Chrome version",
"last 1 Firefox version"
]
}
}Преимущества такого подхода:
Для проверки можно использовать утилиту Browserslist.
Установка:
npm install browserslist --save-devПроверка:
npx browserslistРезультат может выглядеть следующим образом:
chrome 125
chrome 124
firefox 126
safari 17.5
edge 125Это позволяет убедиться, что конфигурация интерпретируется корректно.
Browserslist использует данные проекта Can I Use.
Со временем статистика устаревает.
Для обновления рекомендуется выполнять:
npx update-browserslist-db@latestКоманда обновляет информацию о:
Актуальная база данных помогает Parcel принимать более точные решения при сборке.
Чем больше браузеров необходимо поддерживать, тем больше преобразований выполняется.
Например:
defaults
IE 11обычно приводит к:
Конфигурация:
last 2 Chrome versionsнаоборот позволяет сохранить максимально компактный результат.
Поэтому список поддерживаемых браузеров напрямую влияет на производительность приложения и размер итоговой сборки.
{
"browserslist": [
"defaults",
"not IE 11"
]
}Баланс между совместимостью и производительностью.
{
"browserslist": [
"last 5 versions",
"IE 11"
]
}Максимальная совместимость.
{
"browserslist": [
"last 2 Chrome versions",
"last 2 Firefox versions",
"last 2 Safari versions"
]
}Минимальный размер бандлов и высокая скорость выполнения.
{
"browserslist": [
"last 1 Chrome version"
]
}Удобно для прототипирования и изучения новых возможностей платформы.
Browserslist стал отраслевым стандартом и используется не только Parcel.
Те же настройки могут автоматически применяться в:
Благодаря этому единая конфигурация browserslist обеспечивает согласованную поддержку браузеров во всём процессе разработки и сборки приложения.