Dipublikasikan: 7 Mei 2025
Browserslist adalah salah satu alat paling populer untuk mengonfigurasi versi browser minimum yang didukung di basis kode frontend. Developer menambahkan kueri browserslist ke file package.json mereka, dan Browserslist mengekspos daftar browser minimum yang didukung. Browserslist dapat digunakan dengan berbagai alat linting, polyfilling, dan pengemasan populer, termasuk:
- Autoprefixer
- Babel menggunakan
@babel/preset-env - PostCSS menggunakan
postcss-preset-env - ESLint menggunakan
eslint-plugin-compat - Stylelint menggunakan
stylelint-no-unsupported-browser-features - webpack
Target dasar pengukuran
Saat memutuskan untuk menggunakan Dasar Pengukuran, Anda harus mempertimbangkan basis pengguna dan menentukan kumpulan fitur Dasar Pengukuran yang ingin ditargetkan:
- Baseline Tersedia secara luas mencakup semua fitur web yang didukung sepenuhnya oleh browser inti Dasar Pengukuran yang ditetapkan 30 bulan atau lebih yang lalu.
- Kumpulan fitur tahun dasar pengukuran, misalnya Dasar Pengukuran 2020, mencakup semua fitur yang Baru tersedia pada akhir tahun yang ditentukan.
Bergantung pada basis pengguna, Anda mungkin dapat menargetkan Dasar Pengukuran yang Tersedia secara luas, atau Anda mungkin perlu menargetkan tahun Dasar Pengukuran yang lebih lama. Lihat alat analisis atau RUM Anda untuk memahami versi browser yang dimiliki pengguna.
Instal browserslist-config-baseline
Setelah menentukan kumpulan fitur Dasar Pengukuran yang ingin ditargetkan, Anda dapat menerapkan target tersebut ke alat developer. Cara termudah untuk melakukannya untuk alat apa pun yang menggunakan browserslist adalah dengan menginstal 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
Cara menargetkan Dasar Pengukuran Tersedia secara luas
Untuk menargetkan Dasar Pengukuran yang Tersedia secara luas, perbarui atau tambahkan konfigurasi browserlist di package.json menggunakan kata kunci extends:
{
...
"browserslist": [
"extends browserslist-config-baseline"
]
...
}
Saat browserslist memuat daftar browser yang didukung, browserslist-config-baseline akan secara dinamis membuat versi browser minimum saat ini yang mendukung semua fitur yang kini tersedia secara Luas. Anda juga dapat menambahkan extends browserslist-config-baseline ke file .browserslistrc dan file tersebut akan ditangani dengan cara yang sama.
Cara menargetkan tahun Dasar Pengukuran
Jika Anda ingin menargetkan kumpulan fitur Tahun dasar pengukuran, tambahkan / dan tahun dalam format YYYY ke akhir kueri browserslist:
"browserslist": "extends browserslist-config-baseline/2020"
Cara menentukan browser downstream
Kumpulan browser inti Dasar Pengukuran mencakup Chrome, Edge, Firefox, dan Safari. Browser lain didasarkan pada kode open source yang sama dengan Chrome dan Edge—Chromium—dan harus mendukung kumpulan fitur yang sama dengan versi Chromium yang diimplementasikan.
browserslist-config-baseline menggunakan baseline-browser-mapping untuk mengaitkan versi browser dengan kumpulan fitur yang didukungnya. Pemetaan untuk UC Browser seluler dan QQ Browser seluler tersedia di baseline-browser-mapping dan browser lainnya dapat disertakan pada masa mendatang.
Untuk menyertakan browser ini dalam konfigurasi Dasar Pengukuran, tambahkan /with-downstream tepat setelah nama modul dalam konfigurasi browserslist:
"browserslist": "extends browserslist-config-baseline/with-downstream"
Atau:
"browserslist": "extends browserslist-config-baseline/with-downstream/2020"
Contoh penerapan browserslist-config-baseline
Di alat paket
Menambahkan browserslist-config-baseline ke repositori dapat langsung berdampak. Babel adalah alat build populer untuk memaketkan JavaScript. Jika Anda menggunakan paket default @babel/preset-env, banyak API dan metode JavaScript modern akan diganti dengan sintaksis yang lebih panjang yang diperlukan oleh browser lama:
Namun, menetapkan browserslist-config-baseline untuk menargetkan Baseline 2020 pada project contoh yang sama akan secara drastis mengurangi ukuran output JavaScript ini, karena transformasi sintaksis yang diperlukan lebih sedikit:
Coba sendiri menggunakan kode contoh di repositori baseline-demos Google Chrome Labs.
Di linters
Beberapa linter sudah berfungsi dengan Browserslist, atau dapat dibuat agar berfungsi dengan Browserslist menggunakan modul kompatibilitas. Misalnya, stylelint dapat menggunakan konfigurasi browserslist menggunakan modul stylelint-browser-compat. Tetapkan file stylelint.config.js untuk menggunakan browserslist-config-baseline:
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
browserslist: ['extends browserslist-config-baseline'],
},
],
},
};
Stylelint kini akan menandai CSS yang saat ini bukan bagian dari Dasar Pengukuran yang tersedia secara luas:
Stylelint juga menyediakan plugin yang memungkinkan Anda menetapkan aturan Dasar Pengukuran secara langsung, tetapi jika Anda sudah menggunakan browserslist untuk menangani konfigurasi, browserslist-config-baseline adalah solusi siap pakai.
Cara berkontribusi pada browserslist-config-baseline
Jika Anda ingin membuat permintaan fitur untuk browserslist-config-baseline, buat masalah atau permintaan pull di repositori GitHub.
Jika Anda ingin berkontribusi lebih banyak data browser downstream atau melaporkan masalah data, buat masalah atau permintaan pull di repositori baseline-browser-mapping.