Veröffentlicht: 7. Mai 2025
Browserslist ist eines der beliebtesten Tools zum Konfigurieren der Mindestversionen unterstützter Browser in Frontend-Codebases. Entwickler fügen ihrer package.json-Datei eine browserslist-Abfrage hinzu und Browserslist stellt eine Liste der mindestens unterstützten Browser bereit. Browserslist kann mit einer Vielzahl gängiger Linting-, Polyfill- und Verpackungstools verwendet werden, darunter:
- Autoprefixer
- Babel mit
@babel/preset-env - PostCSS mit
postcss-preset-env - ESLint mit
eslint-plugin-compat - Stylelint mit
stylelint-no-unsupported-browser-features - webpack
Referenzziele
Wenn Sie sich für Baseline entscheiden, sollten Sie Ihre Nutzerbasis berücksichtigen und entscheiden, auf welche Baseline-Funktionen Sie Ihre Anzeigen ausrichten möchten:
- Baseline – Weit verbreitet umfasst alle Webfunktionen, die vor mindestens 30 Monaten vom Baseline-Kernbrowser vollständig unterstützt wurden.
- Funktionssätze für das Referenzjahr, z. B. Referenzjahr 2020, umfassen alle Funktionen, die am Ende des angegebenen Jahres neu verfügbar waren.
Je nach Nutzerbasis können Sie die Ausrichtung auf „Baseline: Weitgehend verfügbar“ vornehmen oder auf ein älteres Baseline-Jahr ausrichten. Sehen Sie in Ihren Analyse- oder RUM-Tools nach, welche Browserversionen Ihre Nutzer verwenden.
browserslist-config-baseline installieren
Sobald Sie sich entschieden haben, auf welche Baseline-Funktionen Sie das Targeting ausrichten möchten, können Sie dieses Ziel auf Ihre Entwicklertools anwenden. Am einfachsten ist es, browserslist-config-baseline zu installieren, um Tools zu verwenden, die browserslist verwenden:
# npm
npm i browserslist-config-baseline@latest -D
# yarn
yarn add --latest browserslist-config-baseline -D
# bun
bun add browserslist-config-baseline@latest -d
Targeting auf „Baseline: Weitgehend verfügbar“
Wenn Sie eine Ausrichtung auf „Baseline – Weitgehend verfügbar“ vornehmen möchten, aktualisieren oder fügen Sie in package.json eine browserlist-Konfiguration mit dem Keyword extends hinzu:
{
...
"browserslist": [
"extends browserslist-config-baseline"
]
...
}
Wenn browserslist die Liste der unterstützten Browser lädt, generiert browserslist-config-baseline dynamisch die aktuellen Mindestbrowserversionen, die alle Funktionen unterstützen, die derzeit weithin verfügbar sind. Sie können extends browserslist-config-baseline auch einer .browserslistrc-Datei hinzufügen. Die Datei wird dann auf dieselbe Weise verarbeitet.
Targeting auf Vergleichsjahre
Wenn Sie das Targeting auf ein Feature-Set für ein Referenzjahr ausrichten möchten, fügen Sie am Ende der browserslist-Abfrage ein / und das Jahr im Format YYYY hinzu:
"browserslist": "extends browserslist-config-baseline/2020"
Nachgeschaltete Browser angeben
Die Baseline-Browser umfassen Chrome, Edge, Firefox und Safari. Andere Browser basieren auf demselben Open-Source-Code wie Chrome und Edge – Chromium – und sollten dieselben Funktionen unterstützen wie die jeweilige Chromium-Version, die sie implementieren.
browserslist-config-baseline verwendet baseline-browser-mapping, um Browserversionen den von ihnen unterstützten Funktionspaketen zuzuordnen. Zuordnungen für den mobilen UC Browser und den mobilen QQ Browser sind in baseline-browser-mapping verfügbar. Weitere Browser werden möglicherweise in Zukunft hinzugefügt.
Wenn Sie diese Browser in die Baseline-Konfiguration aufnehmen möchten, fügen Sie in der browserslist-Konfiguration direkt nach dem Modulnamen /with-downstream hinzu:
"browserslist": "extends browserslist-config-baseline/with-downstream"
Oder:
"browserslist": "extends browserslist-config-baseline/with-downstream/2020"
Beispiele für browserslist-config-baseline in der Praxis
In den Verpackungstools
Wenn Sie browserslist-config-baseline Ihrem Repository hinzufügen, kann dies sofortige Auswirkungen haben. Babel ist ein beliebtes Build-Tool zum Verpacken von JavaScript. Wenn Sie die Standardeinstellungen des @babel/preset-env-Pakets verwenden, werden viele moderne JavaScript-APIs und ‑Methoden durch die ausführlichere Syntax ersetzt, die von älteren Browsern benötigt wird:
Wenn Sie browserslist-config-baseline jedoch auf das Ziel „Baseline 2020“ für dasselbe Beispielprojekt festlegen, wird die Ausgabegröße dieses JavaScripts drastisch reduziert, da weniger Syntaxtransformationen erforderlich sind:
Testen Sie das selbst mit dem Beispielcode im Repository baseline-demos von Google Chrome Labs.
In Linter
Einige Linter funktionieren bereits mit Browserslist oder können mit einem Kompatibilitätsmodul für Browserslist konfiguriert werden. stylelint kann beispielsweise eine browserslist-Konfiguration mit dem Modul stylelint-browser-compat verwenden. Legen Sie in Ihrer stylelint.config.js-Datei fest, dass browserslist-config-baseline verwendet werden soll:
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
browserslist: ['extends browserslist-config-baseline'],
},
],
},
};
Stylelint kennzeichnet jetzt CSS, das derzeit nicht Teil der allgemein verfügbaren Baseline ist:
Stylelint bietet auch ein Plug-in, mit dem Sie Baseline-Regeln direkt festlegen können. Wenn Sie jedoch bereits browserslist für die Konfiguration verwenden, ist browserslist-config-baseline eine Drop-in-Lösung.
So können Sie zu browserslist-config-baseline beitragen
Wenn du eine Funktionsanfrage für browserslist-config-baseline stellen möchtest, erstelle ein Problem oder eine Pull-Anfrage im GitHub-Repository.
Wenn Sie weitere Browserdaten zur Verfügung stellen oder ein Datenproblem melden möchten, erstellen Sie ein Problem oder einen Pull-Request im baseline-browser-mapping-Repository.