browserslist
4.24.2
La configuración para compartir los navegadores de destino y las versiones de nodo.js entre diferentes herramientas frontales. Se usa en:
Todas las herramientas encontrarán los navegadores de destino automáticamente, cuando agrega lo siguiente a package.json :
"browserslist" : [
" defaults and fully supports es6-module " ,
" maintained node versions "
] O en .browserslistrc config:
# Browsers that we support
defaults and fully supports es6-module
maintained node versions Los desarrolladores establecen sus listas de versiones utilizando consultas como last 2 versions para estar libres de actualizar las versiones manualmente. BROWSERSLIST usará caniuse-lite con ¿puedo usar datos para estas consultas?
Puede verificar cómo funciona la configuración en nuestro patio de juegos: browsersl.ist
Navegador de navegadores necesita su apoyo. Estamos aceptando donaciones en 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 Una forma rápida de probar su consulta es hacer npx browserslist '> 0.3%, not dead' en su terminal.
Puede especificar las versiones de navegador y node.js mediante consultas (casos insensibles):
defaults : navegadores predeterminados de BrowsersList ( > 0.5%, last 2 versions, Firefox ESR, not dead ).> 5% : Versiones de navegador seleccionadas por estadísticas de uso global. >= , < y <= trabajo también.> 5% in US .: Usa estadísticas de uso de EE. UU. Acepta código de país de dos letras.> 5% in alt-AS : Utiliza estadísticas de uso de la región de Asia. La lista de todos los códigos de región se puede encontrar en caniuse-lite/data/regions .> 5% in my stats : utiliza datos de uso personalizados.> 5% in browserslist-config-mycompany stats : utiliza datos de uso personalizados de browserslist-config-mycompany/browserslist-stats.json .cover 99.5% : los navegadores más populares que proporcionan cobertura.cover 99.5% in US .: igual que el anterior, con código de país de dos letras.cover 99.5% in my stats : utiliza datos de uso personalizados.last 2 versions : las últimas 2 versiones para cada navegador.last 2 Chrome versions : las últimas 2 versiones del navegador Chrome.last 2 major versions o last 2 iOS major versions : todas las versiones menores/parches de las últimas 2 versiones principales.dead : navegadores sin apoyo oficial o actualizaciones durante 24 meses. En este momento es IE 11 , IE_Mob 11 , BlackBerry 10 , BlackBerry 7 , Samsung 4 , OperaMobile 12.1 y todas las versiones de Baidu .node 10 y node 10.4 : selecciona el último nodo.js 10.xx o 10.4.x versión.last 2 node versions : seleccione 2 LAS LARGAS DE NODO.JS ÚLTIMAS.last 2 node major versions : seleccione 2 últimas versiones de nodo de versiones principales. JS.current node : la versión node.js utilizada por Browserslist en este momento.maintained node versions : todas las versiones Node.js, que todavía son mantenidas por Node.js Foundation.iOS 7 : El navegador iOS versión 7 directamente. Tenga en cuenta que op_mini tiene una versión especial all .Firefox > 20 : Versiones de Firefox más nueva que 20. >= , < Y <= Work también. También funciona con Node.js.ie 6-8 : selecciona una gama inclusiva de versiones.Firefox ESR : el último lanzamiento de soporte extendido de Firefox.PhantomJS 2.1 y PhantomJS 1.9 : selecciona versiones de Safari similares al tiempo de ejecución de PhantomJS.extends browserslist-config-mycompany : tome consultas del paquete browserslist-config-mycompany NPM.es6 y es6-module son el parámetro feat de la URL de la página Can I Usar. Se puede encontrar una lista de todas las características disponibles en caniuse-lite/data/features .fully supports es6 : navegadores con soporte completo para características específicas. Por ejemplo, fully supports css-grid omitirán Edge 12-15, ya que esas versiones del navegador están marcadas por tener soporte parcial.partially supports es6-module o supports es6-module : navegadores con soporte total o parcial para características específicas. Por ejemplo, partially supports css-grid incluirán soporte de borde 12-15, ya que esas versiones del navegador están marcadas por tener soporte parcial.browserslist config : los navegadores definidos en la configuración de la lista de navegación. Útil en el servicio diferencial para modificar la configuración del usuario, como browserslist config and fully supports es6-module .since 2015 o last 2 years : todas las versiones publicadas desde el año 2015 (también since 2015-03 y since 2015-03-10 ).unreleased versions o unreleased Chrome versions : versiones alfa y beta.not ie <= 8 : excluir IE 8 e inferior de las consultas anteriores. not puede agregar a ninguna consulta.
Hay una especificación de gramática sobre la sintaxis de consulta, que puede ser útil si está implementando un analizador o algo más.
Ejecute npx browserslist en un directorio de proyecto para ver qué navegadores fueron seleccionados por sus 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 5La siguiente tabla mapea los nombres del navegador y sus dispositivos objetivo en identificadores utilizados por Browserslist.
| Nombre del navegador | De oficina | Androide | iOS | Otros móviles |
|---|---|---|---|---|
| Android (WebView) | Android | |||
| Baidu | Baidu | |||
| Zarzamora | BlackBerry bb | |||
| Cromo | Chrome | ChromeAndroid and_chr | ↪︎ ios_saf 2 | |
| Borde | Edge | ↪︎ and_chr | ↪︎ ios_saf 2 | |
| Electrón | Electron | |||
| Firefox | Firefox ff | FirefoxAndroid and_ff | ↪︎ ios_saf 2 | |
| Explorador de Internet | Explorer ie | ie_mob | ||
| Nodo.js | Node | |||
| Navegador Kio | kaios | |||
| Ópera | Opera | op_mob 1 | ↪︎ ios_saf 2 | |
| Ópera mini 3 | OperaMini op_mini | |||
| Navegador QQ | and_qq | |||
| Safari | Safari | iOS ios_saf | ||
| Samsung Internet | Samsung | |||
| Navegador UC | UCAndroid and_uc |
↪︎ name implica que el navegador usa el mismo motor capturado por nameop_mini se dirige a la "extrema". "High" es compatible con el móvil de ópera normal. package.json Si desea reducir los archivos de configuración en Project Root, puede especificar los navegadores en package.json con la tecla browserslist :
{
"private" : true ,
"dependencies" : {
"autoprefixer" : " ^6.5.4 "
},
"browserslist" : [
" last 1 version " ,
" > 1% " ,
" not dead "
]
}.browserslistrc La configuración de la lista de navegadores separados debe nombrarse .browserslistrc y tiene consultas de navegadores divididos por una nueva línea. Cada línea se combina con el combinador or . Los comentarios comienzan con # símbolo:
# Browsers that we support
last 1 version
> 1%
not dead # no browsers without security updates BROWSERSLIST verificará la configuración en cada directorio de path . Entonces, si el proceso de herramienta app/styles/main.css , puede poner la configuración en root, app/ o app/styles .
Puede especificar la ruta directa en las variables de entorno BROWSERSLIST_CONFIG .
Puede usar la siguiente consulta para hacer referencia a una configuración de lista de navegadores exportadas desde otro paquete:
"browserslist" : [
" extends browserslist-config-mycompany "
] Por razones de seguridad, la configuración externa solo admite paquetes que tienen el prefijo browserslist-config- . Los paquetes de ámbitos NPM también son compatibles, al nombrar o prefijo el módulo con @scope/browserslist-config , como @scope/browserslist-config o @scope/browserslist-config-mycompany .
Si no acepta las consultas de la lista de navegadores de los usuarios, puede deshabilitar la validación utilizando la variable de entorno o BROWSERSLIST_DANGEROUS_EXTEND .
BROWSERSLIST_DANGEROUS_EXTEND=1 npx webpack Debido a que esto usa la resolución de npm , también puede hacer referencia a archivos específicos en un paquete:
"browserslist" : [
" extends browserslist-config-mycompany/desktop " ,
" extends browserslist-config-mycompany/mobile "
] Al escribir un paquete de Lista de navegadores compartidos, simplemente exporte una matriz. browserslist-config-mycompany/index.js :
module . exports = [
'last 1 version' ,
'> 1%' ,
'not dead'
] También puede incluir un archivo browserslist-stats.json como parte de su configuración compartible en la raíz y consultarla usando > 5% in browserslist-config-mycompany stats . Utiliza el mismo formato que extends y la propiedad dangerousExtend como se indicó anteriormente.
Puede exportar configuraciones para diferentes entornos y seleccionar entorno por BROWSERSLIST_ENV o env en su herramienta:
module . exports = {
development : [
'last 1 version'
] ,
production : [
'last 1 version' ,
'> 1%' ,
'not dead'
]
} También puede especificar diferentes consultas de navegador para varios entornos. BrowsersList elegirá consultas de acuerdo con las variables BROWSERSLIST_ENV o NODE_ENV . Si no se declara ninguno de ellos, BrowserSlist buscará en primer lugar consultas production y luego usará valores predeterminados.
En package.json :
"browserslist" : {
"production" : [
"> 1%" ,
"not dead"
] ,
"modern" : [
"last 1 chrome version" ,
"last 1 firefox version"
] ,
"ssr" : [
"node 12"
]
} En .browserslistrc Config:
[production]
> 1%
not dead
[modern]
last 1 chrome version
last 1 firefox version
[ssr]
node 12 Si tiene un sitio web, puede consultar las estadísticas de uso de su sitio. browserslist-ga solicitará acceso a Google Analytics y luego generará browserslist-stats.json :
npx browserslist-ga
O puede usar browserslist-ga-export para convertir los datos de Google Analytics sin dar una contraseña para la cuenta de Google.
Puede generar un archivo de estadísticas de uso por cualquier otro método. El formato de archivo debe ser como:
{
"ie" : {
"6" : 0.01 ,
"7" : 0.4 ,
"8" : 1.5
} ,
"chrome" : {
…
} ,
…
} Tenga en cuenta que puede consultar con sus datos de uso personalizados y al mismo tiempo consultar con datos globales o regionales. Por ejemplo, la consulta > 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
} Las consultas pueden ser una cadena "> 1%, not dead" o una matriz ['> 1%', 'not dead'] .
Si falta una consulta, BrowsersList buscará un archivo de configuración. Puede proporcionar una opción path (que puede ser un archivo) para encontrar el archivo de configuración relativamente.
Opciones:
path : archivo o una ruta de directorio para buscar archivo de configuración. Predeterminado es . .env : qué sección de entorno usa desde la configuración. El valor predeterminado es production .stats : datos de estadísticas de uso personalizados.config : ruta para configurar si desea configurarlo manualmente.ignoreUnknownVersions : no arroje una consulta directa (como ie 12 ). El valor predeterminado es false .dangerousExtend : Desactive los controles de seguridad para una consulta extend . El valor predeterminado es false .throwOnMissing : arroje un error si no se encuentra env. El valor predeterminado es false .mobileToDesktop : use navegadores de escritorio si puedo usar no tener datos sobre esta versión móvil. ¿Puedo usar solo datos sobre las últimas versiones de navegadores móviles? De forma predeterminada, last 2 and_ff versions devuelven and_ff 90 y con esta opción devuelve and_ff 91, and_ff 90 . Esta opción puede conducir al error de la versión del navegador desconocido (en el ejemplo, ¿puedo usar no tener datos para and_ff 91 todavía)? El valor predeterminado es false .Para el entorno no JS y el propósito de depuración, puede usar la herramienta CLI:
browserslist " > 1%, not dead "Puede obtener una cobertura total de usuarios para navegadores seleccionados por 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.2O 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 statisticsSi una herramienta usa navegadores en el interior, puede cambiar la configuración de la lista de navegas con variables de entorno:
BROWSERSLIST con consultas de navegadores.
BROWSERSLIST= " > 5% " npx webpack BROWSERSLIST_CONFIG con el archivo de ruta a config.
BROWSERSLIST_CONFIG=./config/browserslist npx webpack BROWSERSLIST_ENV con cadena de entornos.
BROWSERSLIST_ENV= " development " npx webpack BROWSERSLIST_STATS con ruta a los datos de uso personalizados para > 1% in my stats .
BROWSERSLIST_STATS=./config/usage_data.json npx webpack BROWSERSLIST_DISABLE_CACHE Si desea deshabilitar la caché de lectura de configuración.
BROWSERSLIST_DISABLE_CACHE=1 npx webpack BROWSERSLIST_DANGEROUS_EXTEND para deshabilitar la verificación de nombre de configuración de seguridad compartible.
BROWSERSLIST_DANGEROUS_EXTEND=1 npx webpack BROWSERSLIST_ROOT_PATH para evitar la lectura de archivos por encima de esta ruta.
BROWSERSLIST_ROOT_PATH=. npx webpackbrowserslist.coverage()Cobertura del mercado de los navegadores de devolución.
const browsers = browserslist ( '> 1% in US' )
browserslist . coverage ( browsers , 'US' ) //=> 83.1browserslist.loadConfig() Es como llamar browserslist() , pero devuelve las consultas de config, no los navegadores.
browserslist . loadConfig ( { file : process . cwd ( ) } ) ?? browserslist . defaultsbrowserslist.defaultsUna matriz con consultas predeterminadas.
BrowserSlist almacena la configuración que lee de los archivos package.json y browserslist , así como el conocimiento sobre la existencia de archivos, durante la duración del proceso de alojamiento.
Para borrar estos cachés, use:
browserslist . clearCaches ( ) Para deshabilitar el almacenamiento en caché por completo, establezca la variable de entorno BROWSERSLIST_DISABLE_CACHE .
Para informar una vulnerabilidad de seguridad, utilice el contacto de seguridad de TidElift. TidElift coordinará la solución y la divulgación.
Disponible como parte de la suscripción de TidElift.
Los mantenedores de browserslist y miles de otros paquetes están trabajando con TidElift para ofrecer soporte y mantenimiento comerciales para las dependencias de código abierto que utiliza para construir sus aplicaciones. Ahorre tiempo, reduzca el riesgo y mejore la salud del código, al tiempo que paga a los mantenedores de las dependencias exactas que usa. Aprende más.
Consulte los documentos update-browserslist-db
