Конфигурация для обмена целевыми браузерами и версиями node.js между различными интерфейскими инструментами. Он используется в:
Все инструменты автоматически найдут целевые браузеры, когда вы добавляете следующее в package.json
:
"browserslist" : [
" defaults and fully supports es6-module " ,
" maintained node versions "
]
Или в .browserslistrc
config:
# Browsers that we support
defaults and fully supports es6-module
maintained node versions
Разработчики устанавливают свои списки версий, используя запросы, такие как last 2 versions
чтобы быть свободными от обновления версий вручную. Browserslist будет использовать caniuse-lite
с Cons Is Can Data для этих запросов.
Вы можете проверить, как работает Config на нашей игровой площадке: browsersl.ist
Browserslist нуждается в вашей поддержке. Мы принимаем пожертвования на открытом коллективе.
> .5% or last 2 versions
> .5%, last 2 versions
and
комбинировать> .5% and last 2 versions
not
комбинируй> .5% and not last 2 versions
> .5% or not last 2 versions
> .5%, not last 2 versions
Быстрый способ проверить ваш запрос - сделать npx browserslist '> 0.3%, not dead'
в вашем терминале.
Вы можете указать версии браузера и node.js с помощью запросов (нечувствительный случай):
defaults
: браузеры по умолчанию Browserslist ( > 0.5%, last 2 versions, Firefox ESR, not dead
).> 5%
: версии браузеров, выбранные глобальной статистикой использования. >=
, <
и <=
работа тоже.> 5% in US
: использует статистику использования США. Он принимает код страны с двумя буквами.> 5% in alt-AS
: Использование статистики использования региона в Азии. Список всех региональных кодов можно найти в caniuse-lite/data/regions
.> 5% in my stats
: использует пользовательские данные об использовании.> 5% in browserslist-config-mycompany stats
: использует пользовательские данные об использовании из browserslist-config-mycompany/browserslist-stats.json
.cover 99.5%
: большинство популярных браузеров, которые обеспечивают покрытие.cover 99.5% in US
: то же самое, что и выше, с двухбуквенным кодом страны.cover 99.5% in my stats
: используют пользовательские данные об использовании.last 2 versions
: последние 2 версии для каждого браузера.last 2 Chrome versions
: последние 2 версии Chrome Browser.last 2 major versions
или last 2 iOS major versions
: все незначительные/патч -релизы последних 2 основных версий.dead
: браузеры без официальной поддержки или обновлений в течение 24 месяцев. Прямо сейчас это IE 11
, IE_Mob 11
, BlackBerry 10
, BlackBerry 7
, Samsung 4
, OperaMobile 12.1
и все версии Baidu
.node 10
и node 10.4
: выбирает последний node.js 10.xx
или выпуск 10.4.x
last 2 node versions
: выберите 2 последних выпуска Node.js.last 2 node major versions
: выберите 2 последних выпуска Node.js Node.js.current node
: версия Node.js, используемая Browserslist прямо сейчас.maintained node versions
: все версии Node.js, которые все еще поддерживаются Node.js Foundation.iOS 7
: Брубзер -версии iOS 1 напрямую. Обратите внимание, что у op_mini
есть специальная all
.Firefox > 20
: версии Firefox новее 20. >=
, <
и <=
работа тоже. Это также работает с node.js.ie 6-8
: выбирает инклюзивный диапазон версий.Firefox ESR
: последний выпуск поддержки Firefox.PhantomJS 2.1
и PhantomJS 1.9
: выбирает версии Safari, похожие на время выполнения Phantomjs.extends browserslist-config-mycompany
: возьмите запросы из пакета NPM browserslist-config-mycompany
.es6
и es6-module
находятся параметр feat
от URL-адреса страницы Can I. Список всех доступных функций можно найти в caniuse-lite/data/features
.fully supports es6
: браузеры с полной поддержкой конкретных функций. Например, fully supports css-grid
будет опустить Edge 12-15, так как эти версии браузера отмечены как частичная поддержка.partially supports es6-module
или supports es6-module
: браузеры с полной или частичной поддержкой для конкретных функций. Например, partially supports css-grid
будет включать поддержку Edge 12-15, поскольку эти версии браузера отмечены как имеющие частичную поддержку.browserslist config
: браузеры, определенные в конфигурации Browserslist. Полезно в дифференциальной службе для изменения конфигурации пользователя, например, browserslist config and fully supports es6-module
.since 2015
или last 2 years
: все версии, выпущенные с 2015 года (также since 2015-03
и since 2015-03-10
).unreleased versions
или unreleased Chrome versions
: альфа и бета -версии.not ie <= 8
: исключить IE 8 и ниже из предыдущих запросов. Вы можете добавлять not
к какому -либо запросу.
Существует спецификация грамматики о синтаксисе запросов, которая может быть полезна, если вы реализуете анализатор или что -то еще.
Запустите npx browserslist
в каталоге проекта, чтобы увидеть, какие браузеры были выбраны вашими запросами.
$ npx browserslist
and_chr 61
and_ff 56
and_qq 1.2
and_uc 11.4
android 56
baidu 7.12
bb 10
chrome 62
edge 16
firefox 56
ios_saf 11
opera 48
safari 11
samsung 5
Следующая таблица отображает имена браузеров и их целевые устройства в идентификаторы, используемые Browserslist.
Имя браузера | Настольный компьютер | Android | ios | Другой мобильный |
---|---|---|---|---|
Android (WebView) | Android | |||
Байду | Baidu | |||
Ежевика | BlackBerry bb | |||
Хром | Chrome | ChromeAndroid and_chr | ↪︎ ios_saf 2 | |
Край | Edge | ↪︎ and_chr | ↪︎ ios_saf 2 | |
Электрон | Electron | |||
Firefox | Firefox ff | FirefoxAndroid and_ff | ↪︎ ios_saf 2 | |
Internet Explorer | Explorer ie | ie_mob | ||
Node.js | Node | |||
Кайос браузер | kaios | |||
Опера | Opera | op_mob 1 | ↪︎ ios_saf 2 | |
Opera Mini 3 | OperaMini op_mini | |||
QQ браузер | and_qq | |||
Сафари | Safari | iOS ios_saf | ||
Samsung Internet | Samsung | |||
UC Browser | UCAndroid and_uc |
↪︎ name
подразумевает, что браузер использует тот же двигатель, который захват по name
op_mini
нацелены на «экстремальную». «Высокий» совместим с обычной Opera Mobile. package.json
Если вы хотите уменьшить файлы конфигурации в Project Root, вы можете указать браузеры в package.json
с ключом browserslist
:
{
"private" : true ,
"dependencies" : {
"autoprefixer" : " ^6.5.4 "
},
"browserslist" : [
" last 1 version " ,
" > 1% " ,
" not dead "
]
}
.browserslistrc
Разделенная конфигурация Browserslist должна быть названа .browserslistrc
и подключает запросы браузеров по новой линии. Каждая строка объединяется с or
комбинированным. Комментарии начинаются с #
символ:
# Browsers that we support
last 1 version
> 1%
not dead # no browsers without security updates
Browserslist проверит конфигурацию в каждом каталоге в path
. Таким образом, если app/styles/main.css
вы можете положить конфигурацию в root, app/
или app/styles
.
Вы можете указать прямой путь в переменных среды BROWSERSLIST_CONFIG
.
Вы можете использовать следующий запрос для ссылки на экспортируемый конфигуратор Browserslist из другого пакета:
"browserslist" : [
" extends browserslist-config-mycompany "
]
По соображениям безопасности внешняя конфигурация поддерживает только пакеты, которые имеют префикс browserslist-config-
. Пакеты NPM Scoped также поддерживаются путем названия или префикса модуля с помощью @scope/browserslist-config
, например, @scope/browserslist-config
или @scope/browserslist-config-mycompany
.
Если вы не принимаете запросы Browserslist от пользователей, вы можете отключить валидацию, используя переменную среды OR или BROWSERSLIST_DANGEROUS_EXTEND
.
BROWSERSLIST_DANGEROUS_EXTEND=1 npx webpack
Поскольку это использует разрешение npm
, вы также можете ссылаться на конкретные файлы в пакете:
"browserslist" : [
" extends browserslist-config-mycompany/desktop " ,
" extends browserslist-config-mycompany/mobile "
]
При написании пакета Shared Browserslist, просто экспортируйте массив. browserslist-config-mycompany/index.js
:
module . exports = [
'last 1 version' ,
'> 1%' ,
'not dead'
]
Вы также можете включить файл browserslist-stats.json
как часть вашей общей конфигурации в корне и запросить его, используя > 5% in browserslist-config-mycompany stats
. Он использует тот же формат, что и свойство extends
dangerousExtend
как указано выше.
Вы можете экспортировать конфигурации для различных сред и выбрать среду BROWSERSLIST_ENV
или env
опция в вашем инструменте:
module . exports = {
development : [
'last 1 version'
] ,
production : [
'last 1 version' ,
'> 1%' ,
'not dead'
]
}
Вы также можете указать различные запросы браузера для различных сред. Browserslist выберет Query в соответствии с переменными BROWSERSLIST_ENV
или NODE_ENV
. Если ни один из них не объявлен, Browserslist сначала будет искать production
запросы, а затем использовать значения по умолчанию.
В package.json
:
"browserslist" : {
"production" : [
"> 1%" ,
"not dead"
] ,
"modern" : [
"last 1 chrome version" ,
"last 1 firefox version"
] ,
"ssr" : [
"node 12"
]
}
В .browserslistrc
config:
[production]
> 1%
not dead
[modern]
last 1 chrome version
last 1 firefox version
[ssr]
node 12
Если у вас есть веб -сайт, вы можете запросить статистику использования вашего сайта. browserslist-ga
попросит доступ к Google Analytics, а затем генерирует browserslist-stats.json
:
npx browserslist-ga
Или вы можете использовать browserslist-ga-export
для конвертации данных Google Analytics без предоставления пароля для учетной записи Google.
Вы можете генерировать файл статистики использования любым другим методом. Формат файла должен быть похож на:
{
"ie" : {
"6" : 0.01 ,
"7" : 0.4 ,
"8" : 1.5
} ,
"chrome" : {
…
} ,
…
}
Обратите внимание, что вы можете запросить свои пользовательские данные об использовании, а также запросить на глобальные или региональные данные. Например, запрос > 1% in my stats, > 5% in US, 10%
.
const browserslist = require ( 'browserslist' )
// Your CSS/JS build tool code
function process ( source , opts ) {
const browsers = browserslist ( opts . overrideBrowserslist , {
stats : opts . stats ,
path : opts . file ,
env : opts . env
} )
// Your code to add features for selected browsers
}
Запросы могут быть строкой "> 1%, not dead"
или массив ['> 1%', 'not dead']
.
Если запрос отсутствует, Browserslist будет искать файл конфигурации. Вы можете предоставить вариант path
(который может быть файлом), чтобы найти файл конфигурации относительно его.
Параметры:
path
: файл или путь каталога для поиска файла конфигурации. По умолчанию .
Полемenv
: какой раздел среды использует из конфигурации. По умолчанию production
.stats
: Пользовательские статистические данные.config
: Путь к конфигурации, если вы хотите установить его вручную.ignoreUnknownVersions
: не бросайте прямой запрос (как ie 12
). По умолчанию false
.dangerousExtend
: отключить проверки безопасности для extend
запроса. По умолчанию false
.throwOnMissing
: выбросьте ошибку, если Env не найден. По умолчанию false
.mobileToDesktop
: используйте настольные браузеры, если я могу использовать, нет данных об этой мобильной версии. Могу ли я использовать только данные о последних версиях мобильных браузеров. По умолчанию last 2 and_ff versions
возвращаются and_ff 90
, и с этой опцией он возвращает and_ff 91, and_ff 90
. Эта опция может привести к неизвестной ошибке версии браузера (в примере я могу использовать данные, пока не имеет данных для and_ff 91
). По умолчанию false
.Для не JS Environment и Debug Acement вы можете использовать инструмент CLI:
browserslist " > 1%, not dead "
Вы можете получить полное покрытие пользователей для выбранных браузеров от JS API:
browserslist . coverage ( browserslist ( '> 1%' ) )
//=> 81.4
browserslist . coverage ( browserslist ( '> 1% in US' ) , 'US' )
//=> 83.1
browserslist . coverage ( browserslist ( '> 1% in my stats' ) , 'my stats' )
//=> 83.1
browserslist . coverage ( browserslist ( '> 1% in my stats' , { stats } ) , stats )
//=> 82.2
Или по CLI:
$ browserslist --coverage " > 1% "
These browsers account for 81.4% of all users globally
$ browserslist --coverage=US " > 1% in US "
These browsers account for 83.1% of all users in the US
$ browserslist --coverage " > 1% in my stats "
These browsers account for 83.1% of all users in custom statistics
$ browserslist --coverage " > 1% in my stats " --stats=./stats.json
These browsers account for 83.1% of all users in custom statistics
Если инструмент использует Browserslist внутри, вы можете изменить настройки Browserslist с переменными среды:
BROWSERSLIST
с запросами браузеров.
BROWSERSLIST= " > 5% " npx webpack
BROWSERSLIST_CONFIG
с Path to Config File.
BROWSERSLIST_CONFIG=./config/browserslist npx webpack
BROWSERSLIST_ENV
с Sturnments String.
BROWSERSLIST_ENV= " development " npx webpack
BROWSERSLIST_STATS
с Path to Custom Использование данных для > 1% in my stats
запросе.
BROWSERSLIST_STATS=./config/usage_data.json npx webpack
BROWSERSLIST_DISABLE_CACHE
Если вы хотите отключить кеш чтения конфигурации.
BROWSERSLIST_DISABLE_CACHE=1 npx webpack
BROWSERSLIST_DANGEROUS_EXTEND
чтобы отключить проверку имени конфигурации безопасности.
BROWSERSLIST_DANGEROUS_EXTEND=1 npx webpack
BROWSERSLIST_ROOT_PATH
чтобы предотвратить чтение файлов выше этого пути.
BROWSERSLIST_ROOT_PATH=. npx webpack
browserslist.coverage()
Охват рынка браузеров возврата.
const browsers = browserslist ( '> 1% in US' )
browserslist . coverage ( browsers , 'US' ) //=> 83.1
browserslist.loadConfig()
Это похоже на вызов browserslist()
, но он возвращает запросы Config, а не браузеры.
browserslist . loadConfig ( { file : process . cwd ( ) } ) ?? browserslist . defaults
browserslist.defaults
Массив с запросами по умолчанию.
Browserslist кэширует конфигурацию, которую он считывает из файлов package.json
и browserslist
, а также знания о существовании файлов, на время процесса хостинга.
Чтобы очистить эти кеши, используйте:
browserslist . clearCaches ( )
Чтобы полностью отключить кэширование, установите переменную среды BROWSERSLIST_DISABLE_CACHE
.
Чтобы сообщить об уязвимости безопасности, пожалуйста, используйте контакт с безопасностью TIDELIFT. Tidelift будет координировать исправление и раскрытие.
Доступно как часть подписки Tidelift.
Содействия browserslist
и тысячи других пакетов работают с Tidelift для обеспечения коммерческой поддержки и технического обслуживания для зависимостей с открытым исходным кодом, которые вы используете для создания ваших приложений. Сэкономьте время, снижайте риск и улучшайте здоровье кода, одновременно выплачивая сопровождающих точных зависимостей, которые вы используете. Узнать больше.
update-browserslist-db
Docs