browserslist
4.24.2
Konfigurasi untuk berbagi browser target dan versi node.js antara alat front-end yang berbeda. Itu digunakan dalam:
Semua alat akan menemukan browser target secara otomatis, saat Anda menambahkan yang berikut ini ke package.json :
"browserslist" : [
" defaults and fully supports es6-module " ,
" maintained node versions "
] Atau di .browserslistrc config:
# Browsers that we support
defaults and fully supports es6-module
maintained node versions Pengembang menetapkan daftar versi mereka menggunakan kueri seperti last 2 versions untuk bebas dari memperbarui versi secara manual. BrowserSlist akan menggunakan caniuse-lite dengan dapat menggunakan data untuk kueri ini.
Anda dapat memeriksa cara kerja konfigurasi di taman bermain kami: browsersl.ist
Penjelajahan membutuhkan dukungan Anda. Kami menerima sumbangan di Open Collective.
> .5% or last 2 versions> .5%, last 2 versionsand Combiner> .5% and last 2 versionsnot kombiner> .5% and not last 2 versions> .5% or not last 2 versions> .5%, not last 2 versions Cara cepat untuk menguji kueri Anda adalah dengan melakukan npx browserslist '> 0.3%, not dead' di terminal Anda.
Anda dapat menentukan versi browser dan node.js dengan pertanyaan (case tidak sensitif):
defaults : BrowserSlist's Default Browser ( > 0.5%, last 2 versions, Firefox ESR, not dead ).> 5% : Versi browser yang dipilih oleh statistik penggunaan global. >= , < dan <= bekerja juga.> 5% in US : Menggunakan statistik penggunaan USA. Ia menerima kode negara dua huruf.> 5% in alt-AS : Menggunakan Statistik Penggunaan Wilayah Asia. Daftar semua kode wilayah dapat ditemukan di caniuse-lite/data/regions .> 5% in my stats : Menggunakan data penggunaan khusus.> 5% in browserslist-config-mycompany stats : Menggunakan data penggunaan khusus dari browserslist-config-mycompany/browserslist-stats.json .cover 99.5% : Browser paling populer yang menyediakan cakupan.cover 99.5% in US : Sama seperti di atas, dengan kode negara dua huruf.cover 99.5% in my stats : Menggunakan data penggunaan khusus.last 2 versions : 2 versi terakhir untuk setiap browser.last 2 Chrome versions : 2 versi terakhir browser Chrome.last 2 major versions atau last 2 iOS major versions : semua rilis minor/patch dari 2 versi utama terakhir.dead : Browser tanpa dukungan atau pembaruan resmi selama 24 bulan. Saat ini IE 11 , IE_Mob 11 , BlackBerry 10 , BlackBerry 7 , Samsung 4 , OperaMobile 12.1 dan semua versi Baidu .node 10 dan node 10.4 : Memilih rilis Node.js 10.xx atau 10.4.x terbaru.last 2 node versions : Pilih 2 Rilis Node.js Terbaru.last 2 node major versions : Pilih 2 Rilis Node Node.js utama terbaru.current node : Versi Node.js yang digunakan oleh BrowserSlist sekarang.maintained node versions : Semua versi Node.js, yang masih dikelola oleh Node.js Foundation.iOS 7 : IOS Browser versi 7 secara langsung. Catatan, bahwa op_mini memiliki versi khusus all .Firefox > 20 : Versi firefox baru dari 20. >= , < dan <= bekerja juga. Ini juga berfungsi dengan node.js.ie 6-8 : Memilih berbagai versi inklusif.Firefox ESR : Rilis Dukungan Firefox Terbaru Terbaru.PhantomJS 2.1 dan PhantomJS 1.9 : Memilih versi Safari yang mirip dengan runtime Phantomjs.extends browserslist-config-mycompany : Ambil pertanyaan dari paket npm browserslist-config-mycompany .es6 dan es6-module adalah parameter feat dari URL halaman Can I Use. Daftar semua fitur yang tersedia dapat ditemukan di caniuse-lite/data/features .fully supports es6 : browser dengan dukungan penuh untuk fitur tertentu. Misalnya, fully supports css-grid akan menghilangkan tepi 12-15, karena versi browser tersebut ditandai memiliki dukungan parsial.partially supports es6-module atau supports es6-module : Browser dengan dukungan penuh atau parsial untuk fitur tertentu. Misalnya, partially supports css-grid akan mencakup dukungan Edge 12-15, karena versi browser tersebut ditandai memiliki dukungan parsial.browserslist config : Browser yang ditentukan dalam konfigurasi BrowserSlist. Berguna dalam Diferensial Lay untuk memodifikasi konfigurasi pengguna seperti browserslist config and fully supports es6-module .since 2015 atau last 2 years : semua versi dirilis sejak tahun 2015 (juga since 2015-03 dan since 2015-03-10 ).unreleased versions atau unreleased Chrome versions : versi alpha dan beta.not ie <= 8 : Kecualikan IE 8 dan lebih rendah dari kueri sebelumnya. Anda dapat menambahkan not ke kueri apa pun.
Ada spesifikasi tata bahasa tentang sintaks kueri, yang mungkin bermanfaat jika Anda menerapkan parser atau yang lainnya.
Jalankan npx browserslist di direktori proyek untuk melihat browser mana yang dipilih oleh pertanyaan Anda.
$ 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 5Tabel berikut memetakan nama browser & perangkat target mereka menjadi pengidentifikasi yang digunakan oleh BrowserSlist.
| Nama browser | Desktop | Android | iOS | Ponsel lainnya |
|---|---|---|---|---|
| Android (WebView) | Android | |||
| Baidu | Baidu | |||
| Blackberry | BlackBerry bb | |||
| Chrome | Chrome | ChromeAndroid and_chr | ↪︎ ios_saf 2 | |
| Tepian | Edge | ↪︎ and_chr | ↪︎ ios_saf 2 | |
| Elektron | Electron | |||
| Firefox | Firefox ff | FirefoxAndroid and_ff | ↪︎ ios_saf 2 | |
| Penjelajah Internet | Explorer ie | ie_mob | ||
| Node.js | Node | |||
| Browser Kaios | kaios | |||
| Opera | Opera | op_mob 1 | ↪︎ ios_saf 2 | |
| Opera Mini 3 | OperaMini op_mini | |||
| QQ Browser | and_qq | |||
| Safari | Safari | iOS ios_saf | ||
| Samsung Internet | Samsung | |||
| UC Browser | UCAndroid and_uc |
↪︎ name menyiratkan bahwa browser menggunakan mesin yang sama yang ditangkap dengan nameop_mini di yang "ekstrem". "Tinggi" kompatibel dengan Opera Mobile normal. package.json Jika Anda ingin mengurangi file konfigurasi dalam root proyek, Anda dapat menentukan browser di package.json dengan kunci browserslist :
{
"private" : true ,
"dependencies" : {
"autoprefixer" : " ^6.5.4 "
},
"browserslist" : [
" last 1 version " ,
" > 1% " ,
" not dead "
]
}.browserslistrc Konfigurasi BrowserSlist yang terpisah harus dinamai .browserslistrc dan memiliki kueri browser yang dibagi dengan baris baru. Setiap baris dikombinasikan dengan or kombiner. Komentar dimulai dengan simbol # :
# Browsers that we support
last 1 version
> 1%
not dead # no browsers without security updates BrowserSlist akan memeriksa konfigurasi di setiap direktori di path . Jadi, jika APP Process app/styles/main.css , Anda dapat menempatkan konfigurasi ke root, app/ atau app/styles .
Anda dapat menentukan jalur langsung di variabel lingkungan BROWSERSLIST_CONFIG .
Anda dapat menggunakan kueri berikut untuk merujuk konfigurasi browserList yang diekspor dari paket lain:
"browserslist" : [
" extends browserslist-config-mycompany "
] Untuk alasan keamanan, konfigurasi eksternal hanya mendukung paket yang memiliki awalan browserslist-config- . Paket-paket SCOPED NPM juga didukung, dengan memberi nama atau awalan modul dengan @scope/browserslist-config , seperti @scope/browserslist-config atau @scope/browserslist-config-mycompany .
Jika Anda tidak menerima kueri browserSlist dari pengguna, Anda dapat menonaktifkan validasi dengan menggunakan variabel lingkungan atau BROWSERSLIST_DANGEROUS_EXTEND .
BROWSERSLIST_DANGEROUS_EXTEND=1 npx webpack Karena ini menggunakan resolusi npm , Anda juga dapat merujuk file spesifik dalam suatu paket:
"browserslist" : [
" extends browserslist-config-mycompany/desktop " ,
" extends browserslist-config-mycompany/mobile "
] Saat menulis paket BrowserSlist bersama, cukup ekspor array. browserslist-config-mycompany/index.js :
module . exports = [
'last 1 version' ,
'> 1%' ,
'not dead'
] Anda juga dapat menyertakan file browserslist-stats.json sebagai bagian dari konfigurasi Anda yang dapat dibagikan di root dan permintaannya menggunakan > 5% in browserslist-config-mycompany stats . Ini menggunakan format yang sama seperti extends dan properti dangerousExtend seperti di atas.
Anda dapat mengekspor konfigurasi untuk lingkungan yang berbeda dan memilih lingkungan dengan BROWSERSLIST_ENV atau opsi env di alat Anda:
module . exports = {
development : [
'last 1 version'
] ,
production : [
'last 1 version' ,
'> 1%' ,
'not dead'
]
} Anda juga dapat menentukan berbagai kueri browser untuk berbagai lingkungan. BrowserSlist akan memilih kueri menurut variabel BROWSERSLIST_ENV atau NODE_ENV . Jika tidak ada dari mereka yang dinyatakan, BrowserSlist pertama -tama akan mencari pertanyaan production dan kemudian menggunakan default.
Di package.json :
"browserslist" : {
"production" : [
"> 1%" ,
"not dead"
] ,
"modern" : [
"last 1 chrome version" ,
"last 1 firefox version"
] ,
"ssr" : [
"node 12"
]
} Di .browserslistrc config:
[production]
> 1%
not dead
[modern]
last 1 chrome version
last 1 firefox version
[ssr]
node 12 Jika Anda memiliki situs web, Anda dapat menanyakan statistik penggunaan situs Anda. browserslist-ga akan meminta akses ke Google Analytics dan kemudian menghasilkan browserslist-stats.json :
npx browserslist-ga
Atau Anda dapat menggunakan browserslist-ga-export untuk mengonversi data Google Analytics tanpa memberikan kata sandi untuk akun Google.
Anda dapat menghasilkan file statistik penggunaan dengan metode lain. Format file harus seperti:
{
"ie" : {
"6" : 0.01 ,
"7" : 0.4 ,
"8" : 1.5
} ,
"chrome" : {
…
} ,
…
} Perhatikan bahwa Anda dapat menanyakan data penggunaan khusus Anda sambil juga bertanya terhadap data global atau regional. Misalnya, kueri > 1% in my stats, > 5% in US, 10% diizinkan.
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
} Kueri bisa menjadi string "> 1%, not dead" atau array ['> 1%', 'not dead'] .
Jika kueri hilang, BrowserSlist akan mencari file konfigurasi. Anda dapat memberikan opsi path (yang dapat berupa file) untuk menemukan file konfigurasi relatif untuk itu.
Opsi:
path : File atau jalur direktori untuk mencari file konfigurasi. Default adalah . .env : Bagian lingkungan apa yang digunakan dari config. Default adalah production .stats : Data statistik penggunaan khusus.config : Path to Config Jika Anda ingin mengaturnya secara manual.ignoreUnknownVersions : Jangan lemparkan kueri langsung (seperti ie 12 ). Default false .dangerousExtend : Nonaktifkan pemeriksaan keamanan untuk extend Kueri. Default false .throwOnMissing : Lempar kesalahan jika Env tidak ditemukan. Default false .mobileToDesktop : Gunakan browser desktop jika dapat saya gunakan tidak memiliki data tentang versi seluler ini. Dapatkah saya menggunakan hanya memiliki data tentang versi terbaru browser seluler. Secara default, last 2 and_ff versions kembali and_ff 90 dan dengan opsi ini mengembalikan and_ff 91, and_ff 90 . Opsi ini dapat menyebabkan kesalahan versi browser yang tidak diketahui (dalam contoh dapat saya gunakan belum memiliki data untuk and_ff 91 ). Default false .Untuk lingkungan non-JS dan tujuan debug Anda dapat menggunakan alat CLI:
browserslist " > 1%, not dead "Anda bisa mendapatkan cakupan total pengguna untuk browser yang dipilih oleh 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.2Atau dengan 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 statisticsJika suatu alat menggunakan daftar browser di dalam, Anda dapat mengubah pengaturan browserSlist dengan variabel lingkungan:
BROWSERSLIST dengan pertanyaan browser.
BROWSERSLIST= " > 5% " npx webpack BROWSERSLIST_CONFIG dengan path ke file config.
BROWSERSLIST_CONFIG=./config/browserslist npx webpack BROWSERSLIST_ENV dengan string lingkungan.
BROWSERSLIST_ENV= " development " npx webpack BROWSERSLIST_STATS dengan jalur ke data penggunaan khusus untuk > 1% in my stats .
BROWSERSLIST_STATS=./config/usage_data.json npx webpack BROWSERSLIST_DISABLE_CACHE Jika Anda ingin menonaktifkan cache membaca konfigurasi.
BROWSERSLIST_DISABLE_CACHE=1 npx webpack BROWSERSLIST_DANGEROUS_EXTEND untuk menonaktifkan Cek Config Name yang Dapat Dibagikan Keamanan.
BROWSERSLIST_DANGEROUS_EXTEND=1 npx webpack BROWSERSLIST_ROOT_PATH untuk mencegah membaca file di atas jalur ini.
BROWSERSLIST_ROOT_PATH=. npx webpackbrowserslist.coverage()Cakupan Pasar Browser Pengembalian.
const browsers = browserslist ( '> 1% in US' )
browserslist . coverage ( browsers , 'US' ) //=> 83.1browserslist.loadConfig() Ini seperti menelepon browserslist() , tetapi mengembalikan permintaan konfigurasi, bukan browser.
browserslist . loadConfig ( { file : process . cwd ( ) } ) ?? browserslist . defaultsbrowserslist.defaultsArray dengan kueri default.
BrowserSlist menyimpan konfigurasi yang dibaca dari file package.json dan browserslist , serta pengetahuan tentang keberadaan file, selama durasi proses hosting.
Untuk membersihkan cache ini, gunakan:
browserslist . clearCaches ( ) Untuk menonaktifkan caching sama sekali, atur variabel lingkungan BROWSERSLIST_DISABLE_CACHE .
Untuk melaporkan kerentanan keamanan, silakan gunakan kontak keamanan Tidelift. Tidelift akan mengoordinasikan perbaikan dan pengungkapan.
Tersedia sebagai bagian dari langganan tidelift.
Pemelihara browserslist dan ribuan paket lainnya bekerja dengan Tidelift untuk memberikan dukungan dan pemeliharaan komersial untuk dependensi open source yang Anda gunakan untuk membangun aplikasi Anda. Hemat waktu, kurangi risiko, dan tingkatkan kesehatan kode, sambil membayar pemelihara dari ketergantungan yang tepat yang Anda gunakan. Pelajari lebih lanjut.
Lihat update-browserslist-db Docs
