browserslist
4.24.2
A configuração para compartilhar navegadores de destino e versões Node.js entre diferentes ferramentas de front-end. É usado em:
Todas as ferramentas encontrarão os navegadores de destino automaticamente, quando você adicionar o seguinte ao package.json :
"browserslist" : [
" defaults and fully supports es6-module " ,
" maintained node versions "
] Ou em .browserslistrc Config:
# Browsers that we support
defaults and fully supports es6-module
maintained node versions Os desenvolvedores definem suas listas de versão usando consultas como last 2 versions para estarem livres de atualizar versões manualmente. O BrowSerList usará caniuse-lite com posso usar os dados para essas consultas.
Você pode verificar como a configuração funciona em nosso playground: browsersl.ist
A lista de navegadores precisa do seu apoio. Estamos aceitando doações no Open Collective.
> .5% or last 2 versions> .5%, last 2 versionsand combinador> .5% and last 2 versionsnot combinador> .5% and not last 2 versions> .5% or not last 2 versions> .5%, not last 2 versions Uma maneira rápida de testar sua consulta é fazer npx browserslist '> 0.3%, not dead' no seu terminal.
Você pode especificar as versões do navegador e Node.js por consultas (insensíveis ao caso):
defaults : navegadores padrão do BrowSerlist ( > 0.5%, last 2 versions, Firefox ESR, not dead ).> 5% : versões de navegadores selecionadas pelas estatísticas de uso global. >= , < e <= trabalho também.> 5% in US : usa estatísticas de uso dos EUA. Aceita o código do país de duas letras.> 5% in alt-AS : usa estatísticas de uso da região da Ásia. A lista de todos os códigos de região pode ser encontrada em caniuse-lite/data/regions .> 5% in my stats : usa dados de uso personalizado.> 5% in browserslist-config-mycompany stats : usa dados de uso personalizado do browserslist-config-mycompany/browserslist-stats.json .cover 99.5% : os navegadores mais populares que fornecem cobertura.cover 99.5% in US : o mesmo que acima, com o código do país de duas letras.cover 99.5% in my stats : usa dados de uso personalizado.last 2 versions : as duas últimas versões para cada navegador.last 2 Chrome versions : as últimas 2 versões do navegador Chrome.last 2 major versions ou last 2 iOS major versions : todas as versões menores/patches das últimas 2 versões principais.dead : navegadores sem apoio oficial ou atualizações por 24 meses. No momento, é IE 11 , IE_Mob 11 , BlackBerry 10 , BlackBerry 7 , Samsung 4 , OperaMobile 12.1 e todas as versões do Baidu .node 10 e node 10.4 : seleciona o mais recente Node.js 10.xx ou 10.4.x versão.last 2 node versions : selecione 2 lançamentos mais recentes do Node.js.last 2 node major versions : selecione 2 lançamentos mais recentes de Node.js de versão principal.current node : versão node.js usada pelo navegador agora.maintained node versions : todas as versões Node.js, que ainda são mantidas pela Fundação Node.js.iOS 7 : O navegador iOS versão 7 diretamente. Observe que op_mini tem uma versão all .Firefox > 20 : Versões do Firefox mais recente que 20. >= , < e <= trabalho também. Também funciona com o Node.js.ie 6-8 : seleciona uma gama inclusiva de versões.Firefox ESR : o mais recente liberação de suporte estendido do Firefox.PhantomJS 2.1 e PhantomJS 1.9 : seleciona versões Safari semelhantes ao PhantomJs Runtime.extends browserslist-config-mycompany : faça consultas do pacote NPM browserslist-config-mycompany .es6 e es6-module estão o parâmetro feat a partir do URL da página Can I Use. Uma lista de todos os recursos disponíveis pode ser encontrada no caniuse-lite/data/features .fully supports es6 : navegadores com suporte total para recursos específicos. Por exemplo, fully supports css-grid omitirá o Edge 12-15, pois essas versões do navegador são marcadas como tendo suporte parcial.partially supports es6-module ou supports es6-module : navegadores com suporte total ou parcial para recursos específicos. Por exemplo, partially supports css-grid incluirá o suporte 12-15 do Edge, pois essas versões do navegador são marcadas como tendo suporte parcial.browserslist config : os navegadores definidos na configuração do navegador. Útil na porção diferencial para modificar a configuração do usuário como browserslist config and fully supports es6-module .since 2015 ou last 2 years : todas as versões lançadas desde o ano de 2015 (também since 2015-03 e since 2015-03-10 ).unreleased versions ou unreleased Chrome versions : versões alfa e beta.not ie <= 8 : exclua o IE 8 e abaixe as consultas anteriores. Você pode adicionar not a nenhuma consulta.
Há uma especificação gramatical sobre a sintaxe de consulta, que pode ser útil se você estiver implementando um analisador ou outra coisa.
Execute npx browserslist em um diretório de projeto para ver quais navegadores foram selecionados por suas consultas.
$ 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 5Os seguintes nomes dos navegadores de mapas de tabela e seus dispositivos de destino em identificadores usados pela lista de navegação.
| Nome do navegador | Desktop | Android | iOS | Outro celular |
|---|---|---|---|---|
| Android (WebView) | Android | |||
| Baidu | Baidu | |||
| BlackBerry | BlackBerry bb | |||
| Cromo | Chrome | ChromeAndroid and_chr | ↪︎ ios_saf 2 | |
| Borda | Edge | ↪︎ and_chr | ↪︎ ios_saf 2 | |
| Elétron | Electron | |||
| Firefox | Firefox ff | FirefoxAndroid and_ff | ↪︎ ios_saf 2 | |
| Internet Explorer | Explorer ie | ie_mob | ||
| Node.js | Node | |||
| Navegador Kaios | kaios | |||
| Ópera | Opera | op_mob 1 | ↪︎ ios_saf 2 | |
| Opera Mini 3 | OperaMini op_mini | |||
| Navegador QQ | and_qq | |||
| Safári | Safari | iOS ios_saf | ||
| Internet Samsung | Samsung | |||
| Navegador UC | UCAndroid and_uc |
↪︎ name implica que o navegador usa o mesmo motor capturado pelo nameop_mini alvo no "extremo". "High" é compatível com o Mobile Normal Opera. package.json Se você deseja reduzir os arquivos de configuração no Project Root, pode especificar navegadores no package.json com a tecla browserslist :
{
"private" : true ,
"dependencies" : {
"autoprefixer" : " ^6.5.4 "
},
"browserslist" : [
" last 1 version " ,
" > 1% " ,
" not dead "
]
}.browserslistrc A configuração de navegador separada deve ser nomeada .browserslistrc e ter as consultas de navegadores divididas por uma nova linha. Cada linha é combinada com o combinador or . Os comentários começam com # símbolo:
# Browsers that we support
last 1 version
> 1%
not dead # no browsers without security updates O BrowSerList verificará a configuração em todos os diretórios no path . Portanto, se o processo do processo de ferramenta app/styles/main.css , você poderá colocar a configuração em root, app/ app/styles .
Você pode especificar o caminho direto nas variáveis de ambiente BROWSERSLIST_CONFIG .
Você pode usar a consulta a seguir para fazer referência a uma configuração de navegação exportada de outro pacote:
"browserslist" : [
" extends browserslist-config-mycompany "
] Por razões de segurança, a configuração externa suporta apenas pacotes que possuem o prefixo browserslist-config- . Os pacotes com escopo NPM também são suportados, nomeando ou prefixando o módulo com @scope/browserslist-config , como @scope/browserslist-config ou @scope/browserslist-config-mycompany .
Se você não aceitar consultas de navegação dos usuários, poderá desativar a validação usando a variável de ambiente ou BROWSERSLIST_DANGEROUS_EXTEND .
BROWSERSLIST_DANGEROUS_EXTEND=1 npx webpack Como isso usa a resolução do npm , você também pode fazer referência a arquivos específicos em um pacote:
"browserslist" : [
" extends browserslist-config-mycompany/desktop " ,
" extends browserslist-config-mycompany/mobile "
] Ao escrever um pacote de navegação compartilhado, basta exportar uma matriz. browserslist-config-mycompany/index.js :
module . exports = [
'last 1 version' ,
'> 1%' ,
'not dead'
] Você também pode incluir um arquivo browserslist-stats.json como parte da sua configuração compartilhável na raiz e consultá-la usando > 5% in browserslist-config-mycompany stats . Ele usa o mesmo formato que extends e a propriedade dangerousExtend como acima.
Você pode exportar configurações para diferentes ambientes e selecionar o ambiente por BROWSERSLIST_ENV ou env Option em sua ferramenta:
module . exports = {
development : [
'last 1 version'
] ,
production : [
'last 1 version' ,
'> 1%' ,
'not dead'
]
} Você também pode especificar diferentes consultas do navegador para vários ambientes. O BrowSerList escolherá a consulta de acordo com as variáveis BROWSERSLIST_ENV ou NODE_ENV . Se nenhum deles for declarado, a lista de navegadores procurará primeiro as consultas production e depois usará os padrões.
Em package.json :
"browserslist" : {
"production" : [
"> 1%" ,
"not dead"
] ,
"modern" : [
"last 1 chrome version" ,
"last 1 firefox version"
] ,
"ssr" : [
"node 12"
]
} Em .browserslistrc config:
[production]
> 1%
not dead
[modern]
last 1 chrome version
last 1 firefox version
[ssr]
node 12 Se você possui um site, pode consultar as estatísticas de uso do seu site. browserslist-ga pedirá acesso ao Google Analytics e, em seguida, gerará browserslist-stats.json :
npx browserslist-ga
Ou você pode usar browserslist-ga-export para converter dados do Google Analytics sem fornecer uma senha para a conta do Google.
Você pode gerar arquivo de estatísticas de uso por qualquer outro método. O formato de arquivo deve ser como:
{
"ie" : {
"6" : 0.01 ,
"7" : 0.4 ,
"8" : 1.5
} ,
"chrome" : {
…
} ,
…
} Observe que você pode consultar seus dados de uso personalizado e também consultar os dados globais ou regionais. Por exemplo, a consulta > 1% in my stats, > 5% in US, 10% é permitido.
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
} As consultas podem ser uma string "> 1%, not dead" ou uma matriz ['> 1%', 'not dead'] .
Se estiver faltando uma consulta, o Lista de navegação procurará um arquivo de configuração. Você pode fornecer uma opção path (que pode ser um arquivo) para encontrar o arquivo de configuração relativamente para ele.
Opções:
path : Arquivo ou um caminho de diretório para procurar arquivo de configuração. O padrão é . .env : Qual seção do ambiente usa na configuração. O padrão é production .stats : dados de estatísticas de uso personalizado.config : Path to Config se você deseja defini -lo manualmente.ignoreUnknownVersions : Não use consulta direta (como ie 12 ). O padrão é false .dangerousExtend : Desative as verificações de segurança para uma consulta extend . O padrão é false .throwOnMissing : Jogue um erro se o ENV não for encontrado. O padrão é false .mobileToDesktop : Use navegadores de desktop, se posso usar, não possui dados sobre esta versão móvel. Posso usar apenas dados sobre as versões mais recentes dos navegadores móveis. Por padrão, last 2 and_ff versions retornam and_ff 90 e com esta opção ele retorna and_ff 91, and_ff 90 . Esta opção pode levar ao erro desconhecido da versão do navegador (no exemplo, posso usar, ainda não possui dados para and_ff 91 ). O padrão é false .Para o ambiente não JS e fins de depuração, você pode usar a ferramenta CLI:
browserslist " > 1%, not dead "Você pode obter cobertura total dos usuários para navegadores selecionados pela 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.2Ou por 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 statisticsSe uma ferramenta usa a lista de navegação dentro, você poderá alterar as configurações da lista de navegação com variáveis de ambiente:
BROWSERSLIST com consultas de navegadores.
BROWSERSLIST= " > 5% " npx webpack BROWSERSLIST_CONFIG com o caminho do caminho para configurar.
BROWSERSLIST_CONFIG=./config/browserslist npx webpack BROWSERSLIST_ENV com String de ambientes.
BROWSERSLIST_ENV= " development " npx webpack BROWSERSLIST_STATS com caminho para os dados de uso personalizado por > 1% in my stats .
BROWSERSLIST_STATS=./config/usage_data.json npx webpack BROWSERSLIST_DISABLE_CACHE se você deseja desativar o cache de leitura de configuração.
BROWSERSLIST_DISABLE_CACHE=1 npx webpack BROWSERSLIST_DANGEROUS_EXTEND para desativar o nome da configuração compartilhável de segurança.
BROWSERSLIST_DANGEROUS_EXTEND=1 npx webpack BROWSERSLIST_ROOT_PATH para evitar a leitura de arquivos acima deste caminho.
BROWSERSLIST_ROOT_PATH=. npx webpackbrowserslist.coverage()Cobertura do mercado de navegadores de retorno.
const browsers = browserslist ( '> 1% in US' )
browserslist . coverage ( browsers , 'US' ) //=> 83.1browserslist.loadConfig() É como ligar para browserslist() , mas retorna as consultas da Config, não os navegadores.
browserslist . loadConfig ( { file : process . cwd ( ) } ) ?? browserslist . defaultsbrowserslist.defaultsUma matriz com consultas padrão.
BrowSerSlist cache a configuração que lê nos arquivos package.json e browserslist , bem como conhecimento sobre a existência de arquivos, durante a duração do processo de hospedagem.
Para limpar esses caches, use:
browserslist . clearCaches ( ) Para desativar completamente o cache, defina a variável de ambiente BROWSERSLIST_DISABLE_CACHE .
Para relatar uma vulnerabilidade de segurança, use o contato de segurança Tidelift. O Tidelift coordenará a correção e a divulgação.
Disponível como parte da assinatura do Tidelift.
Os mantenedores da browserslist e milhares de outros pacotes estão trabalhando com o Tidelift para fornecer suporte e manutenção comercial para as dependências de código aberto que você usa para criar seus aplicativos. Economize tempo, reduza o risco e melhore a saúde do código, enquanto paga aos mantenedores das dependências exatas que você usa. Saber mais.
Consulte os documentos update-browserslist-db
