Browserslist — это механизм описания списка браузеров и
их версий, которые должны поддерживаться проектом. Он используется не
только в Webpack, но и во множестве инструментов экосистемы
Jav * aScript:
Webpack напрямую не транспилирует код под браузеры, однако он тесно интегрируется с Babel и другими инструментами, использующими Browserslist. Благодаря этому появляется единый источник правды для определения поддерживаемых платформ.
Современный JavaScript развивается значительно быстрее, чем браузеры. Многие возможности языка поддерживаются не везде:
Promiseasync/await?.)??)Если отправить современный код старому браузеру без обработки, приложение может полностью перестать работать.
Пример несовместимого кода:
const user = response?.data?.user ?? {};Старые версии браузеров не понимают:
В результате возникает синтаксическая ошибка ещё до выполнения приложения.
Webpack обычно работает совместно с:
babel-loader@babel/preset-envpostcss-loaderautoprefixerВсе эти инструменты ориентируются на Browserslist для определения:
Наиболее распространённый способ:
{
"browserslist": [
"> 0.5%",
"last 2 versions",
"not dead"
]
}.browserslistrc> 0.5%
last 2 versions
not dead[production]
> 0.5%
last 2 versions
not dead
[development]
last 1 chrome version
last 1 firefox version
last 1 safari versionЭто позволяет:
@babel/preset-env@babel/preset-env анализирует список браузеров и
определяет:
Пример конфигурации Babel:
module.exports = {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
corejs: 3
}
]
]
};useBuiltIns: 'usage'Режим usage автоматически подключает только необходимые
полифилы.
Например:
Promise.resolve();Если целевой браузер не поддерживает Promise, Babel
автоматически подключит нужный полифил.
Без Browserslist Babel не сможет определить, нужен ли этот полифил.
> 1%Поддерживаются браузеры с долей рынка выше 1%.
last 2 versionsПоддерживаются две последние версии каждого браузера.
not deadИсключаются браузеры:
not IE 11Chrome >= 90supports es6-moduleBrowserslist поддерживает логические комбинации.
Пример:
> 0.5%
last 2 versions
not dead
not IE 11Разные цели сборки требуют разной совместимости.
Во время разработки обычно используются современные браузеры.
Пример:
[development]
last 1 chrome versionПреимущества:
В production необходима совместимость.
Пример:
[production]
> 0.5%
not deadКоманда:
npx browserslistПоказывает итоговый список браузеров.
Пример вывода:
chrome 124
chrome 123
firefox 125
safari 17.4npx browserslist "> 1%"Browserslist использует базу caniuse-lite.
Со временем данные устаревают.
Обновление:
npx update-browserslist-db@latestили:
npm update caniuse-lite browserslistBrowserslist активно используется для CSS.
Пример:
.container {
display: flex;
}Если старые браузеры требуют префиксов, Autoprefixer автоматически добавит:
.container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}module.exports = {
plugins: [
require('autoprefixer')
]
};Autoprefixer автоматически читает Browserslist.
Чем больше старых браузеров поддерживается, тем:
Исходный код:
const getName = user => user?.name ?? 'Unknown';После сборки может остаться почти без изменений.
Код преобразуется в:
var getName = function(user) {
return user && user.name != null
? user.name
: 'Unknown';
};Размер кода увеличивается.
Современные браузеры поддерживают ES Modules.
Если Browserslist допускает только современные платформы, Webpack может эффективнее использовать:
Современная конфигурация:
supports es6-moduleПозволяет:
Крупные приложения иногда создают две версии:
Для современных браузеров:
supports es6-moduleДля старых браузеров:
> 0.5%
not deadТакой подход:
Пример Webpack-конфигурации:
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
};Babel автоматически использует Browserslist.
Вместо Browserslist можно использовать:
presets: [
[
'@babel/preset-env',
{
targets: {
chrome: '90'
}
}
]
]Однако это создаёт дублирование конфигурации.
Browserslist предпочтительнее, поскольку используется всей экосистемой.
Конфигурация:
> 0.1%Может включать:
Последствия:
Для большинства production-проектов:
> 0.5%
last 2 versions
not dead
not IE 11Если требуется поддержка старых браузеров:
> 0.2%
not dead
IE 11В этом случае необходимо учитывать:
Browserslist поддерживает не только браузеры.
Пример:
node 20или:
maintained node versionsЭто особенно полезно для:
Команда:
npx browserslist --coverageПоказывает процент пользователей, охваченных конфигурацией.
Пример:
These browsers account for 92.4% of all users globallyМожно учитывать региональную статистику.
Пример:
> 1% in USили:
> 1% in KZЭто важно для локальных проектов.
not op_mini allили:
not samsung 4Чем меньше транспиляции требуется:
Поэтому поддержка устаревших браузеров напрямую влияет на скорость CI/CD.
В монорепозиториях часто используется:
.browserslistrc;В этом случае инструменты используют значения по умолчанию.
Это может привести к неожиданной транспиляции.
Появляется предупреждение:
Browserslist: caniuse-lite is outdatedТребуется обновление базы.
Если одновременно используются:
targetsи Browserslist, возможны непредсказуемые результаты.
Даже после транспиляции могут отсутствовать:
PromiseMapSetArray.fromНужны полифилы core-js.
> 0.5%
last 2 versions
not dead
not IE 11last 1 chrome versiondefaultsили:
maintained node versions> 1% in mobiledefaultsСпециальный запрос:
defaultsЭквивалентен примерно следующему:
> 0.5%
last 2 versions
Firefox ESR
not deadЭто безопасный базовый вариант для большинства приложений.
Webpack 5 активно ориентирован на современные браузеры:
Правильно настроенный Browserslist позволяет максимально использовать возможности Webpack 5 и одновременно сохранять необходимую совместимость браузеров.