Data publikacji: 7 maja 2025 r.
Browserslist to jedno z najpopularniejszych narzędzi do konfigurowania minimalnych obsługiwanych wersji przeglądarek w bazach kodu front-endu. Deweloperzy dodają zapytanie browserslist do pliku package.json, a Browserlist podaje listę przeglądarek, które są obsługiwane w minimalnej wersji. Browserslist może być używany z wielu popularnych narzędzi do sprawdzania kodu, wypełniania luk i pakowania, w tym:
- Autoprefixer
- Babel z użyciem
@babel/preset-env - PostCSS za pomocą
postcss-preset-env - ESLint korzystający z
eslint-plugin-compat - Stylelint za pomocą
stylelint-no-unsupported-browser-features - webpack
Docelowe wartości odniesienia
Gdy zdecydujesz się na korzystanie z wartości referencyjnych, musisz wziąć pod uwagę bazę użytkowników i określić, na który zestaw funkcji wartości referencyjnych chcesz się kierować:
- Podstawowe ustawienia dostępne powszechnie obejmują wszystkie funkcje internetowe, które były w pełni obsługiwane przez podstawowy zestaw przeglądarek w ciągu ostatnich 30 miesięcy lub dłużej.
- Zestawy funkcji roku bazowego, np. Baseline 2020, obejmują wszystkie funkcje, które zostały udostępnione po raz pierwszy pod koniec wybranego roku.
W zależności od liczby użytkowników możesz kierować reklamy na użytkowników z grupy docelowej „Punkt odniesienia – ogólnodostępny” lub na użytkowników z grupy docelowej z danego roku bazowego. Aby dowiedzieć się, jakie wersje przeglądarek mają użytkownicy, sprawdź narzędzia analityczne lub RUM.
Zainstaluj element browserslist-config-baseline
Gdy zdecydujesz, na który zestaw funkcji bazowych chcesz kierować reklamy, możesz zastosować to ustawienie w narzędziach dla deweloperów. Najprostszym sposobem na to, aby wszystkie narzędzia korzystające z listy przeglądarek działały prawidłowo, jest zainstalowanie browserslist-config-baseline:
# npm
npm i browserslist-config-baseline@latest -D
# yarn
yarn add --latest browserslist-config-baseline -D
# bun
bun add browserslist-config-baseline@latest -d
Jak kierować reklamy na użytkowników z grupy docelowej „Podstawowe dane dostępne powszechnie”?
Aby kierować reklamy na użytkowników z poziomu podstawowego, zaktualizuj lub dodaj konfigurację browserlist w poziomie package.json za pomocą słowa kluczowego extends:
{
...
"browserslist": [
"extends browserslist-config-baseline"
]
...
}
Gdy browserslist wczyta listę obsługiwanych przeglądarek, browserslist-config-baseline będzie dynamicznie generować aktualne minimalne wersje przeglądarek, które obsługują wszystkie funkcje dostępne obecnie w wersji ogólnodostępnej. Możesz też dodać extends browserslist-config-baseline do pliku .browserslistrc, a będzie on obsługiwany w taki sam sposób.
Jak kierować reklamy na lata z punktu odniesienia
Jeśli chcesz kierować reklamy na zestaw funkcji Rok bazowy, dodaj / i rok w formacie YYYY na końcu zapytania browserslist:
"browserslist": "extends browserslist-config-baseline/2020"
Jak określić przeglądarki docelowe
Podstawowy zestaw przeglądarek obejmuje Chrome, Edge, Firefox i Safari. Inne przeglądarki są oparte na tym samym kodzie open source co Chrome i Edge (Chromium) i powinny obsługiwać ten sam zestaw funkcji co wersja Chromium, którą implementują.
browserslist-config-baseline używa baseline-browser-mapping do powiązania wersji przeglądarki z zespołem obsługiwanych przez nią funkcji. Mapowania dla przeglądarek UC Browser i QQ Browser są dostępne w baseline-browser-mapping, a w przyszłości mogą być uwzględniane w innych przeglądarkach.
Aby uwzględnić te przeglądarki w konfiguracji podstawowej, dodaj /with-downstream bezpośrednio po nazwie modułu w konfiguracji browserslist:
"browserslist": "extends browserslist-config-baseline/with-downstream"
Lub:
"browserslist": "extends browserslist-config-baseline/with-downstream/2020"
Przykłady browserslist-config-baseline w praktyce
W narzędziach do pakowania
Dodanie browserslist-config-baseline do repozytorium może przynieść natychmiastowy efekt. Babel to popularne narzędzie do kompilacji służące do pakowania kodu JavaScript. Jeśli użyjesz domyślnych ustawień pakietu @babel/preset-env, wiele nowoczesnych interfejsów API i metod JavaScriptu zostanie zastąpionych bardziej rozbudowaną składnią wymaganą przez starsze przeglądarki:
Jednak ustawienie wartości browserslist-config-baseline na potrzeby docelowego użycia w ramach wersji podstawowej 2020 w tym samym przykładowym projekcie znacznie zmniejsza rozmiar wyjściowy tego kodu JavaScript, ponieważ wymaga mniejszej liczby przekształceń składni:
Wypróbuj to samodzielnie, korzystając z przykładowego kodu w repozytorium baseline-demos w Google Chrome Labs.
W linterach
Niektóre narzędzia do sprawdzania kodu już współpracują z Browserlist lub można je dostosować do współpracy z Browserlist za pomocą modułu zgodności. Na przykład stylelint może używać konfiguracji browserslist za pomocą modułu stylelint-browser-compat. Aby ustawić plik stylelint.config.js do używania browserslist-config-baseline:
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
browserslist: ['extends browserslist-config-baseline'],
},
],
},
};
Stylelint będzie teraz oznaczać pliki CSS, które nie są obecnie częścią dostępnych globalnie domyślnych ustawień:
Stylelint udostępnia też wtyczkę, która pozwala bezpośrednio ustawiać reguły podstawowe, ale jeśli do zarządzania konfiguracją używasz już browserslist, browserslist-config-baseline to rozwiązanie zastępcze.
Jak przyczynić się do rozwoju projektu browserslist-config-baseline
Jeśli chcesz przesłać prośbę o dodanie funkcji do browserslist-config-baseline, utwórz zgłoszenie lub żądanie pull w repozytorium GitHub.
Jeśli chcesz przekazać więcej danych o przetwarzaniu w przeglądarce lub zgłosić problem z danymi, utwórz zgłoszenie lub prośbę o przechwycenie w repozytorium baseline-browser-mapping.