Pubblicata: 7 maggio 2025
Browserslist è uno degli strumenti più utilizzati per configurare le versioni minime dei browser supportate nelle basi di codice frontend. Gli sviluppatori aggiungono una query browserslist al file package.json e Browserslist mostra un elenco dei browser supportati minimi. Browserslist può essere utilizzato con una vasta gamma di strumenti di linting, polyfilling e packaging, tra cui:
- Autoprefixer
- Babel con
@babel/preset-env - PostCSS utilizzando
postcss-preset-env - ESLint con
eslint-plugin-compat - Stylelint con
stylelint-no-unsupported-browser-features - webpack
Target di riferimento
Quando decidi di utilizzare la funzionalità Base di riferimento, devi prendere in considerazione la tua base utenti e decidere quale insieme di funzionalità della Base di riferimento vuoi scegliere come target:
- Baseline ampiamente disponibile include tutte le funzionalità web completamente supportate dal browser di base di Baseline impostato 30 o più mesi fa.
- Gli insiemi di funzionalità dell'anno di riferimento, ad esempio Base 2020, includono tutte le funzionalità di nuova disponibilità alla fine dell'anno specificato.
A seconda della tua base utenti, potresti essere in grado di scegliere come target il gruppo di base Disponibile a livello generale oppure potresti dover scegliere come target un anno di riferimento precedente. Consulta gli strumenti di analisi o RUM per capire quali versioni dei browser sono utilizzate dagli utenti.
Installa browserslist-config-baseline
Una volta deciso quale insieme di funzionalità di Baseline vuoi scegliere come target, puoi applicare questo target agli strumenti per sviluppatori. Il modo più semplice per farlo per tutti gli strumenti che utilizzano browserslist è installare 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
Come scegliere come target il gruppo di base Disponibile in molti paesi
Per scegliere come target la fascia di prezzo di riferimento ampiamente disponibile, aggiorna o aggiungi una configurazione browserlist in package.json utilizzando la parola chiave extends:
{
...
"browserslist": [
"extends browserslist-config-baseline"
]
...
}
Quando browserslist carica il suo elenco di browser supportati, genera dinamicamente le versioni minime attuali dei browser che supportano tutte le funzionalità ora disponibili a livello generale.browserslist-config-baseline Puoi anche aggiungere extends browserslist-config-baseline a un file .browserslistrc, che verrà gestito nello stesso modo.
Come scegliere come target gli anni di riferimento
Se vuoi scegliere come target un insieme di funzionalità dell'anno di riferimento, aggiungi un / e l'anno nel formato YYYY alla fine della query browserslist:
"browserslist": "extends browserslist-config-baseline/2020"
Come specificare i browser a valle
Il set di browser di base di Baseline include Chrome, Edge, Firefox e Safari. Altri browser si basano sullo stesso codice open source di Chrome ed Edge, ovvero Chromium, e dovrebbero supportare lo stesso insieme di funzionalità della versione di Chromium che implementano.
browserslist-config-baseline utilizza baseline-browser-mapping per correlare le versioni del browser agli insiemi di funzionalità supportati. Le mappature per UC Browser mobile e QQ Browser mobile sono disponibili in baseline-browser-mapping e in futuro potrebbero essere inclusi altri browser.
Per includere questi browser nella configurazione di riferimento, aggiungi /with-downstream subito dopo il nome del modulo nella configurazione browserslist:
"browserslist": "extends browserslist-config-baseline/with-downstream"
Oppure:
"browserslist": "extends browserslist-config-baseline/with-downstream/2020"
Esempi di browserslist-config-baseline in azione
Negli strumenti di pacchettizzazione
L'aggiunta di browserslist-config-baseline al tuo repository può avere un effetto immediato. Babel è uno strumento di compilazione molto utilizzato per il packaging di JavaScript. Se utilizzi i valori predefiniti del pacchetto @babel/preset-env, molti metodi e API JavaScript moderni verranno sostituiti con la sintassi più dettagliata richiesta dai browser meno recenti:
Tuttavia, impostando browserslist-config-baseline come target del valore di riferimento 2020 nello stesso progetto di esempio, le dimensioni dell'output di questo codice JavaScript diminuiscono notevolmente, perché sono necessarie meno trasformazioni della sintassi:
Prova questa funzionalità utilizzando il codice di esempio nel repository baseline-demos di Google Chrome Labs.
Negli linters
Alcuni linter funzionano già con Browserslist o possono essere fatti funzionare con Browserslist utilizzando un modulo di compatibilità. Ad esempio, stylelint può utilizzare una configurazione browserslist utilizzando il modulo stylelint-browser-compat. Imposta il file stylelint.config.js in modo da utilizzare browserslist-config-baseline:
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
browserslist: ['extends browserslist-config-baseline'],
},
],
},
};
Ora Stylelint segnala il CSS che non fa attualmente parte della base di riferimento disponibile a livello generale:
Stylelint fornisce anche un plug-in che ti consente di impostare direttamente le regole di Baseline, ma se utilizzi già browserslist per gestire la configurazione, browserslist-config-baseline è una soluzione plug-in.
Come contribuire a browserslist-config-baseline
Se vuoi inviare una richiesta di funzionalità per browserslist-config-baseline, crea un problema o una richiesta di pull nel repository GitHub.
Se vuoi contribuire con altri dati dei browser a valle o segnalare un problema relativo ai dati, crea un problema o una richiesta pull nel repository baseline-browser-mapping.