browserslist
4.24.2
Die Konfiguration, um Zielbrowser und Node.js-Versionen zwischen verschiedenen Front-End-Tools zu teilen. Es wird in:
Alle Tools finden automatisch Zielbrowser, wenn Sie package.json Folgendes hinzufügen:
"browserslist" : [
" defaults and fully supports es6-module " ,
" maintained node versions "
] Oder in .browserslistrc config:
# Browsers that we support
defaults and fully supports es6-module
maintained node versions Entwickler setzen ihre Versionslisten mit Abfragen wie last 2 versions um die Versionen manuell zu aktualisieren. BrowserSlist verwendet caniuse-lite mit Kann ich Daten für diese Abfragen verwenden.
Sie können überprüfen, wie die Konfiguration auf unserem Spielplatz funktioniert: browsersl.ist
Browserslist benötigt Ihre Unterstützung. Wir akzeptieren Spenden bei Open Collective.
> .5% or last 2 versions> .5%, last 2 versionsand Kombinierer> .5% and last 2 versionsnot Kombinierer> .5% and not last 2 versions> .5% or not last 2 versions> .5%, not last 2 versions Eine schnelle Möglichkeit, Ihre Abfrage zu testen, besteht darin npx browserslist '> 0.3%, not dead' in Ihrem Terminal zu machen.
Sie können die Browser- und Node.js -Versionen nach Abfragen angeben (Fall unempfindlich):
defaults : Standard -Browser von Browserslist ( > 0.5%, last 2 versions, Firefox ESR, not dead ).> 5% : Browserversionen, die nach globalen Nutzungsstatistiken ausgewählt wurden. >= , < und <= Arbeit auch.> 5% in US : Verwendet USA Nutzungsstatistik. Es akzeptiert den Code mit zwei Buchstaben.> 5% in alt-AS : Verwendet die Nutzungsstatistik der Asienregion. Die Liste aller Region Codes finden Sie unter caniuse-lite/data/regions .> 5% in my stats : Verwendet benutzerdefinierte Verwendungsdaten.> 5% in browserslist-config-mycompany stats : Verwendet benutzerdefinierte Verwendungsdaten von browserslist-config-mycompany/browserslist-stats.json .cover 99.5% : beliebteste Browser, die eine Abdeckung bieten.cover 99.5% in US : Wie oben, mit zwei Buchstaben Code.cover 99.5% in my stats : Verwendet benutzerdefinierte Verwendungsdaten.last 2 versions : Die letzten 2 Versionen für jeden Browser.last 2 Chrome versions : Die letzten 2 Versionen des Chrom -Browsers.last 2 major versions oder last 2 iOS major versions : Alle Minor/Patch -Veröffentlichungen der letzten 2 Hauptversionen.dead : Browser ohne offizielle Unterstützung oder Updates für 24 Monate. Im Moment ist es IE 11 , IE_Mob 11 , BlackBerry 10 , BlackBerry 7 , Samsung 4 , OperaMobile 12.1 und alle Versionen von Baidu .node 10 und node 10.4 : Wählt den neuesten Knoten aus.js 10.xx oder 10.4.x veröffentlicht.last 2 node versions : Wählen Sie 2 neueste Node.js -Veröffentlichungen aus.last 2 node major versions : SELECT 2 LETZTE Major-Version-Node.js Releases.current node : Node.js Version, die derzeit von BrowserSlist verwendet wird.maintained node versions : Alle Node.js -Versionen, die immer noch von der Node.js Foundation aufrechterhalten werden.iOS 7 : Der iOS -Browser Version 7 direkt. Beachten Sie, dass op_mini eine spezielle all hat.Firefox > 20 : Versionen von Firefox neuer als 20. >= , < und <= arbeiten. Es funktioniert auch mit node.js.ie 6-8 : Wählt einen integrativen Bereich von Versionen aus.Firefox ESR : Die neueste Veröffentlichung von Firefox Extended Support.PhantomJS 2.1 und PhantomJS 1.9 : Wählt Safari -Versionen ähnlich wie die Laufzeit von Phantomjs.extends browserslist-config-mycompany : Nehmen Sie Abfragen vom browserslist-config-mycompany NPM-Paket.es6 und es6-module der Parameter feat aus der URL der Seite "Can I verwenden". Eine Liste aller verfügbaren Funktionen finden Sie unter caniuse-lite/data/features .fully supports es6 : Browser mit vollständiger Unterstützung für bestimmte Funktionen. Zum Beispiel wird fully supports css-grid , da diese Browser-Versionen als teilweise Unterstützung markiert sind.partially supports es6-module oder supports es6-module : Browser mit vollem oder teilweise Unterstützung für bestimmte Funktionen. Zum Beispiel wird partially supports css-grid , da diese Browser-Versionen als teilweise Unterstützung markiert sind.browserslist config : Die in der Browserslist -Konfiguration definierten Browser. Nützlich in der differentiellen Dienerin, um die Konfiguration des Benutzers wie browserslist config and fully supports es6-module .since 2015 oder last 2 years : Alle seit dem Jahr 2015 veröffentlichten Versionen (auch since 2015-03 und since 2015-03-10 ).unreleased versions oder unreleased Chrome versions : Alpha- und Beta -Versionen.not ie <= 8 : Ausschließen IE 8 und niedriger von früheren Abfragen. Sie können not Anfrage hinzufügen.
Es gibt eine Grammatikspezifikation zur Abfragesyntax, die hilfreich sein kann, wenn Sie einen Parser oder etwas anderes implementieren.
Führen Sie npx browserslist in einem Projektverzeichnis aus, um festzustellen, welche Browser von Ihren Abfragen ausgewählt wurden.
$ 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 5Die folgende Tabelle karten Browsernamen und deren Zielgeräte in die von Browserslist verwendeten Kennungen.
| Browsername | Desktop | Android | iOS | Andere Mobilgeräte |
|---|---|---|---|---|
| Android (WebView) | Android | |||
| Baidu | Baidu | |||
| Brombeere | BlackBerry bb | |||
| Chrom | Chrome | ChromeAndroid and_chr | ↪︎ ios_saf 2 | |
| Rand | Edge | ↪︎ and_chr | ↪︎ ios_saf 2 | |
| Elektron | Electron | |||
| Firefox | Firefox ff | FirefoxAndroid and_ff | ↪︎ ios_saf 2 | |
| Internet Explorer | Explorer ie | ie_mob | ||
| Node.js | Node | |||
| Kaios Browser | kaios | |||
| Oper | Opera | op_mob 1 | ↪︎ ios_saf 2 | |
| Opern Mini 3 | OperaMini op_mini | |||
| QQ -Browser | and_qq | |||
| Safari | Safari | iOS ios_saf | ||
| Samsung Internet | Samsung | |||
| UC -Browser | UCAndroid and_uc |
↪︎ name impliziert, dass der Browser denselben Motor verwendet, der mit name erfasst wurdeop_mini zielt auf das "extreme". "High" ist mit dem normalen Opera -Handy kompatibel. package.json Wenn Sie Konfigurationsdateien im Projektroot reduzieren möchten, können Sie Browser in package.json mit browserslist -Schlüssel angeben:
{
"private" : true ,
"dependencies" : {
"autoprefixer" : " ^6.5.4 "
},
"browserslist" : [
" last 1 version " ,
" > 1% " ,
" not dead "
]
}.browserslistrc Separated BrowsersList -Konfiguration sollte .browserslistrc genannt werden und die Browser -Abfragen durch eine neue Zeile aufgeteilt werden. Jede Zeile wird mit dem or Kombinierer kombiniert. Kommentare beginnen mit # Symbol:
# Browsers that we support
last 1 version
> 1%
not dead # no browsers without security updates BrowserSlist überprüft die Konfiguration in jedem Verzeichnis im path . Wenn Tool -Prozess app/styles/main.css , können Sie die Konfiguration in Root, app/ oder app/styles einsetzen.
Sie können den direkten Pfad in BROWSERSLIST_CONFIG -Umgebungsvariablen angeben.
Sie können die folgende Abfrage verwenden, um eine exportierte BrowsersList -Konfiguration aus einem anderen Paket zu verweisen:
"browserslist" : [
" extends browserslist-config-mycompany "
] Aus Sicherheitsgründen unterstützt die externe Konfiguration nur Pakete mit dem Präfix von browserslist-config- . NPM Scoped-Pakete werden ebenfalls unterstützt, indem das Modul mit @scope/browserslist-config wie @scope/browserslist-config oder @scope/browserslist-config-mycompany benannt oder vorangestellt wird.
Wenn Sie BrowsersList -Abfragen von Benutzern nicht akzeptieren, können Sie die Validierung mit der Umgebungsvariablen oder der BROWSERSLIST_DANGEROUS_EXTEND -Umgebung deaktivieren.
BROWSERSLIST_DANGEROUS_EXTEND=1 npx webpack Da dies die Auflösung von npm verwendet, können Sie auch auf bestimmte Dateien in einem Paket verweisen:
"browserslist" : [
" extends browserslist-config-mycompany/desktop " ,
" extends browserslist-config-mycompany/mobile "
] Exportieren Sie beim Schreiben eines gemeinsam genutzten BrowsersList -Pakets einfach ein Array. browserslist-config-mycompany/index.js :
module . exports = [
'last 1 version' ,
'> 1%' ,
'not dead'
] Sie können auch eine browserslist-stats.json Datei als Teil Ihrer gemeinsam genutzbaren Konfiguration am Root einfügen und sie mit > 5% in browserslist-config-mycompany stats abfragen. Es verwendet das gleiche Format wie extends und die dangerousExtend -Eigenschaft wie oben.
Sie können Konfigurationen für verschiedene Umgebungen exportieren und Umgebungen nach BROWSERSLIST_ENV oder env -Option in Ihrem Tool auswählen:
module . exports = {
development : [
'last 1 version'
] ,
production : [
'last 1 version' ,
'> 1%' ,
'not dead'
]
} Sie können auch verschiedene Browser -Abfragen für verschiedene Umgebungen angeben. BrowserSlist wählen Abfrage gemäß den Variablen BROWSERSLIST_ENV oder NODE_ENV aus. Wenn keiner von ihnen deklariert ist, sucht Browserslist zuerst nach production und verwendet dann Standardeinstellungen.
In package.json :
"browserslist" : {
"production" : [
"> 1%" ,
"not dead"
] ,
"modern" : [
"last 1 chrome version" ,
"last 1 firefox version"
] ,
"ssr" : [
"node 12"
]
} In .browserslistrc -Konfiguration:
[production]
> 1%
not dead
[modern]
last 1 chrome version
last 1 firefox version
[ssr]
node 12 Wenn Sie eine Website haben, können Sie die Nutzungsstatistik Ihrer Website abfragen. browserslist-ga wird auf Google Analytics zugreifen und dann browserslist-stats.json generieren:
npx browserslist-ga
Sie können browserslist-ga-export verwenden, um Google Analytics-Daten zu konvertieren, ohne ein Kennwort für Google-Konto anzugeben.
Sie können eine Verwendungsstatistikdatei nach einer anderen Methode erstellen. Dateiformat sollte wie:
{
"ie" : {
"6" : 0.01 ,
"7" : 0.4 ,
"8" : 1.5
} ,
"chrome" : {
…
} ,
…
} Beachten Sie, dass Sie Ihre benutzerdefinierten Verwendungsdaten abfragen und gleichzeitig an globalen oder regionalen Daten abfragen können. Zum Beispiel ist die Abfrage > 1% in my stats, > 5% in US, 10% zulässig.
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
} Abfragen können eine Zeichenfolge "> 1%, not dead" oder ein Array ['> 1%', 'not dead'] sein.
Wenn eine Abfrage fehlt, sucht BrowserSlist nach einer Konfigurationsdatei. Sie können eine path (die eine Datei sein können) angeben, um die Konfigurationsdatei relativ dazu zu finden.
Optionen:
path : Datei oder Verzeichnispfad, um nach Konfigurationsdatei zu suchen. Standard ist . .env : Welcher Umgebungsabschnitt verwendet von der Konfiguration. Standard ist production .stats : Daten für benutzerdefinierte Nutzungsstatistiken.config : Pfad zu Konfiguration, wenn Sie es manuell festlegen möchten.ignoreUnknownVersions : Wirf keine direkte Abfrage auf (wie ie 12 ). Standard ist false .dangerousExtend : Deaktivieren Sie Sicherheitskontrollen für extend der Abfrage. Standard ist false .throwOnMissing : Wirf einen Fehler, wenn Env nicht gefunden wird. Standard ist false .mobileToDesktop : Verwenden Sie Desktop -Browser, wenn ich verwenden kann, dass keine Daten zu dieser mobilen Version enthalten sind. Kann ich nur Daten zu den neuesten Versionen von mobilen Browsern verwenden? Standardmäßig gibt last 2 and_ff versions and_ff 90 und mit dieser Option zurück and_ff 91, and_ff 90 . Diese Option kann zu einem unbekannten Browser -Versionsfehler führen (in Beispiel kann ich noch keine Daten für and_ff 91 verwenden). Standard ist false .Für die Nicht-JS-Umgebung und den Debugg-Zweck können Sie CLI-Tool verwenden:
browserslist " > 1%, not dead "Sie können die Total -Benutzer -Berichterstattung für ausgewählte Browser per JS -API erhalten:
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.2Oder von 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 statisticsWenn ein Tool in der Browserslist verwendet wird, können Sie die BrowsersList -Einstellungen mit Umgebungsvariablen ändern:
BROWSERSLIST mit Browsern -Abfragen.
BROWSERSLIST= " > 5% " npx webpack BROWSERSLIST_CONFIG mit Pfad zur Konfigurationsdatei.
BROWSERSLIST_CONFIG=./config/browserslist npx webpack BROWSERSLIST_ENV mit Umgebungszeichenfolge.
BROWSERSLIST_ENV= " development " npx webpack BROWSERSLIST_STATS mit Pfad zu den benutzerdefinierten Verwendungsdaten für > 1% in my stats .
BROWSERSLIST_STATS=./config/usage_data.json npx webpack BROWSERSLIST_DISABLE_CACHE Wenn Sie den Cache des Konfigurations lesen möchten.
BROWSERSLIST_DISABLE_CACHE=1 npx webpack BROWSERSLIST_DANGEROUS_EXTEND um die Überprüfung des Sicherheitshilfe zu deaktivieren.
BROWSERSLIST_DANGEROUS_EXTEND=1 npx webpack BROWSERSLIST_ROOT_PATH um das Lesen von Dateien über diesem Pfad zu verhindern.
BROWSERSLIST_ROOT_PATH=. npx webpackbrowserslist.coverage()Return Browser Market Deckung.
const browsers = browserslist ( '> 1% in US' )
browserslist . coverage ( browsers , 'US' ) //=> 83.1browserslist.loadConfig() Es ist wie das Aufrufen browserslist() , aber es gibt die Abfragen von Config zurück, nicht Browser.
browserslist . loadConfig ( { file : process . cwd ( ) } ) ?? browserslist . defaultsbrowserslist.defaultsEin Array mit Standardabfragen.
Browserslist zwischengewertet die Konfiguration, die sie aus package.json und browserslist -Dateien sowie Kenntnissen über die Existenz von Dateien für die Dauer des Hosting -Prozesses liest.
Um diese Caches zu löschen, verwenden Sie:
browserslist . clearCaches ( ) Um das Caching insgesamt zu deaktivieren, legen Sie die Umgebungsvariable BROWSERSLIST_DISABLE_CACHE fest.
Um eine Sicherheitsanfälligkeit zu melden, verwenden Sie bitte den Tidelift -Sicherheitskontakt. TIDELIFT koordiniert die Korrektur und Offenlegung.
Erhältlich als Teil des Tidelift -Abonnements.
Die Besucherer der browserslist und Tausende anderer Pakete arbeiten mit TIDELIFT zusammen, um kommerzielle Unterstützung und Wartung für die Open -Source -Abhängigkeiten zu liefern, mit denen Sie Ihre Anwendungen erstellen. Sparen Sie Zeit, reduzieren Sie das Risiko und verbessern Sie die Gesundheit des Codes, während Sie die Wartenden der genauen Abhängigkeiten, die Sie verwenden, zahlen. Erfahren Sie mehr.
Siehe update-browserslist-db Dokumente
