Menggunakan Dasar Pengukuran dengan Browserslist

Tony Conway
Jeremy Wagner

Dipublikasikan: 7 Mei 2025, Terakhir diperbarui: 17 September 2025

Browserslist adalah salah satu alat paling populer untuk mengonfigurasi versi browser minimum yang didukung dalam basis kode frontend. Developer menambahkan kueri browserslist ke file package.json (atau titik konfigurasi lain untuk Browserslist, seperti file .browserslistrc), dan Browserslist akan menampilkan daftar browser yang didukung minimum. Browserslist dapat digunakan dengan berbagai alat linting, polyfill, dan pengemasan populer, termasuk:

Target dasar

Saat memutuskan untuk menggunakan Dasar Pengukuran, Anda harus mempertimbangkan basis pengguna dan memutuskan set fitur Dasar Pengukuran mana yang ingin Anda targetkan:

  • Dasar Tersedia luas mencakup semua fitur web yang didukung sepenuhnya oleh set browser inti Dasar 30 bulan atau lebih sebelumnya.
  • Kumpulan fitur tahun dasar, misalnya Dasar 2020, mencakup semua fitur yang Baru tersedia pada akhir tahun yang ditentukan.

Bergantung pada basis pengguna, Anda mungkin dapat menargetkan Baseline yang Tersedia luas, atau Anda mungkin perlu menargetkan tahun Baseline yang lebih lama. Lihat alat analisis atau RUM Anda untuk memahami versi browser yang digunakan pengguna Anda.

Cara menargetkan Dasar yang Baru atau Tersedia Luas

Dukungan untuk Baseline dibuat di Browserslist melalui beberapa kueri yang berbeda. Jika Anda ingin menargetkan browser yang Baru tersedia untuk Dasar, coba tentukan baseline newly available dalam konfigurasi Browserslist Anda:

{
  ...
  "browserslist": [
    "baseline newly available"
   ]
  ...
}

Anda juga dapat menentukan baseline widely available sebagai kueri:

{
  ...
  "browserslist": [
    "baseline widely available"
   ]
  ...
}

Cara menargetkan tahun Dasar Pengukuran

Jika Anda ingin menargetkan kumpulan fitur tahun Dasar, Anda menentukan tahun dalam kueri, seperti baseline 2024 jika Anda ingin menargetkan kumpulan fitur tahun 2024:

"browserslist": "baseline 2024"

Anda dapat menentukan tahun mulai dari baseline 2015 hingga tahun saat ini.

Cara menentukan browser downstream

Set browser inti Baseline mencakup Chrome, Edge, Firefox, dan Safari. Browser lain didasarkan pada kode open source yang sama dengan Chrome dan Edge—Chromium—dan harus mendukung set fitur yang sama dengan versi Chromium yang mereka terapkan. Untuk menyertakan browser ini dalam konfigurasi Dasar Anda, tambahkan with downstream setelah kueri Dasar Anda. Misalnya, untuk menargetkan browser hilir sebagai bagian dari Baseline Tersedia luas, tentukan baseline widely available with downstream:

"browserslist": "baseline widely available with downstream"

baseline newly available with downstream adalah kueri valid lainnya, begitu juga dengan menambahkan with downstream ke target tahunan:

"browserslist": "baseline 2024 with downstream"

Contoh kueri Dasar dalam tindakan

Di alat paket

Menggunakan kueri Dasar yang ditawarkan oleh Browserslist dalam project Anda dapat memberikan efek langsung. Babel adalah alat build populer untuk memaketkan Javascript. Jika Anda menggunakan default paket @babel/preset-env, banyak API dan metode JavaScript modern akan diganti dengan sintaksis yang lebih panjang yang diperlukan oleh browser lama:

Sesi terminal yang menunjukkan bahwa perintah npm run build telah dieksekusi pada file Javascript bernama test.js. Ukuran file output adalah 12 kilobyte.

Namun, menggunakan kueri baseline 2020 untuk menargetkan set fitur 2020 pada contoh project yang sama akan mengurangi ukuran output JavaScript ini secara drastis, karena lebih sedikit transformasi sintaksis yang diperlukan:

Sesi terminal kedua yang menunjukkan bahwa perintah npm run build kini menghasilkan file berukuran 1,5 kilobyte saat babel ditetapkan untuk menargetkan Baseline 2020.

Coba sendiri menggunakan kode contoh di repositori baseline-demos Google Chrome Labs.

Di linter

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 Anda untuk menggunakan kueri Dasar Pengukuran pilihan Anda:

module.exports = {
  plugins: ['stylelint-browser-compat'],
  rules: {
    'plugin/browser-compat': [
      true,
      {
        browserslist: ['baseline widely available'],
      },
    ],
  },
};

Stylelint kini akan menandai CSS yang saat ini bukan bagian dari Dasar pengukuran Tersedia secara luas:

daftar peringatan dari Stylelint yang menandai kode CSS yang tidak berfungsi di browser lama.

Stylelint juga menyediakan plugin yang memungkinkan Anda menetapkan aturan Baseline secara langsung, tetapi jika Anda sudah menggunakan Browserslist untuk menangani konfigurasi, menggunakan kueri Baseline bawaan yang ditawarkan Browserslist adalah solusi yang tepat.