Browserslist के साथ Baseline का इस्तेमाल करना

Tony Conway

Jeremy Wagner

पब्लिश करने की तारीख: 7 मई, 2025, पिछली बार अपडेट किए जाने की तारीख: 17 सितंबर, 2025

Browserslist, फ़्रंटएंड कोड बेस में ब्राउज़र के कम से कम वर्शन को कॉन्फ़िगर करने के लिए सबसे लोकप्रिय टूल में से एक है. डेवलपर, अपनी package.json फ़ाइल में browserslist क्वेरी जोड़ते हैं. इसके अलावा, Browserslist के लिए कॉन्फ़िगरेशन के अन्य पॉइंट, जैसे कि .browserslistrc फ़ाइल में भी क्वेरी जोड़ी जा सकती है. इसके बाद, Browserslist, कम से कम ज़रूरी ब्राउज़र की सूची दिखाता है. Browserslist का इस्तेमाल, कई तरह के लोकप्रिय लिंटिंग, पॉलीफ़िलिंग, और पैकेजिंग टूल के साथ किया जा सकता है. जैसे:

• Autoprefixer
• @babel/preset-env का इस्तेमाल करके Babel
• postcss-preset-env का इस्तेमाल करके PostCSS
• eslint-plugin-compat का इस्तेमाल करके ESLint
• stylelint-no-unsupported-browser-features का इस्तेमाल करके Stylelint
• webpack

बेसलाइन टारगेट

Baseline का इस्तेमाल करने का फ़ैसला लेने के बाद, आपको अपने उपयोगकर्ता आधार पर विचार करना चाहिए. साथ ही, यह तय करना चाहिए कि आपको Baseline की किस सुविधा को टारगेट करना है:

• बेसलिन की सुविधा ज़्यादातर लोगों के लिए उपलब्ध है. इसमें वेब की वे सभी सुविधाएं शामिल हैं जिन्हें बेसलिन के मुख्य ब्राउज़र सेट ने 30 या उससे ज़्यादा महीनों पहले पूरी तरह से सपोर्ट किया था.
• बेसलाइन ईयर की सुविधा सेट में, उदाहरण के लिए बेसलाइन 2020 में, वे सभी सुविधाएं शामिल होती हैं जो उस साल के आखिर में नई सुविधाएं के तौर पर उपलब्ध कराई गई थीं.

उपयोगकर्ता आधार के हिसाब से, हो सकता है कि आपको बड़े पैमाने पर उपलब्ध बेसलाइन को टारगेट करना पड़े या आपको बेसलाइन के पुराने साल को टारगेट करना पड़े. अपने उपयोगकर्ताओं के पास ब्राउज़र के कौनसा वर्शन है, यह जानने के लिए अपने ऐनलिटिक्स या RUM टूल देखें.

बेसलाइन में नए या ज़्यादातर उपलब्ध प्रॉडक्ट को टारगेट करने का तरीका

Browserslist में, कुछ अलग-अलग क्वेरी के ज़रिए Baseline के लिए सहायता उपलब्ध कराई जाती है. अगर आपको नए ब्राउज़र के लिए उपलब्ध बेसलाइन को टारगेट करना है, तो Browserslist कॉन्फ़िगरेशन में baseline newly available तय करें:

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

baseline widely available को क्वेरी के तौर पर भी सेट किया जा सकता है:

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

बेसलाइन साल को टारगेट करने का तरीका

अगर आपको किसी साल के सुविधा सेट को टारगेट करना है, तो क्वेरी में उस साल का नाम डालें. जैसे, baseline 2024 अगर आपको 2024 के सुविधा सेट को टारगेट करना है, तो:

"browserslist": "baseline 2024"

baseline 2015 से लेकर मौजूदा साल तक के साल चुने जा सकते हैं.

डाउनस्ट्रीम ब्राउज़र के बारे में बताने का तरीका

बेसललाइन के मुख्य ब्राउज़र सेट में Chrome, Edge, Firefox, और Safari शामिल हैं. अन्य ब्राउज़र, Chrome और Edge के ओपन सोर्स कोड (Chromium) पर आधारित होते हैं. इसलिए, उन्हें Chromium के उस वर्शन के हिसाब से सुविधाओं का सेट उपलब्ध कराना चाहिए जिसे उन्होंने लागू किया है. इन ब्राउज़र को अपने बेसलाइन कॉन्फ़िगरेशन में शामिल करने के लिए, अपनी बेसलाइन क्वेरी के बाद with downstream जोड़ें. उदाहरण के लिए, अगर आपको डाउनस्ट्रीम ब्राउज़र को टारगेट करना है, तो baseline widely available with downstream को इस तरह से तय करें:

"browserslist": "baseline widely available with downstream"

baseline newly available with downstream एक और मान्य क्वेरी है. साथ ही, with downstream को सालाना टारगेट में जोड़ने पर भी मान्य क्वेरी मिलती है:

"browserslist": "baseline 2024 with downstream"

बेसलाइन क्वेरी के काम करने के उदाहरण

पैकेजिंग टूल में

अपने प्रोजेक्ट में Browserslist की ओर से दी गई बेसलाइन क्वेरी का इस्तेमाल करने से, तुरंत असर पड़ सकता है. Babel, JavaScript को पैकेज करने के लिए एक लोकप्रिय बिल्ड टूल है. @babel/preset-env पैकेज के डिफ़ॉल्ट सेटिंग का इस्तेमाल करने पर, कई मॉडर्न JavaScript API और तरीकों को पुराने ब्राउज़र के लिए ज़रूरी ज़्यादा शब्दों वाले सिंटैक्स से बदल दिया जाएगा:

हालांकि, एक ही उदाहरण प्रोजेक्ट पर 2020 के फ़ीचर सेट को टारगेट करने के लिए, baseline 2020 क्वेरी का इस्तेमाल करने से इस JavaScript का आउटपुट साइज़ काफ़ी कम हो जाता है. ऐसा इसलिए होता है, क्योंकि कम सिंटैक्स ट्रांसफ़ॉर्म की ज़रूरत होती है:

Google Chrome Labs की baseline-demos रिपॉज़िटरी में मौजूद उदाहरण कोड का इस्तेमाल करके, इसे आज़माएं.

लिंटर में

कुछ लिंटर, Browserslist के साथ पहले से ही काम करते हैं. हालांकि, कंपैटिबिलिटी मॉड्यूल का इस्तेमाल करके, उन्हें Browserslist के साथ काम करने के लिए बनाया जा सकता है. उदाहरण के लिए, stylelint, stylelint-browser-compat मॉड्यूल का इस्तेमाल करके, browserslist कॉन्फ़िगरेशन का इस्तेमाल कर सकता है. अपनी पसंद की बेसलाइन क्वेरी का इस्तेमाल करने के लिए, अपनी stylelint.config.js फ़ाइल सेट करें:

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

Stylelint अब ऐसी सीएसएस को फ़्लैग करेगा जो फ़िलहाल, Baseline Widely available का हिस्सा नहीं है:

Stylelint, एक प्लगिन भी उपलब्ध कराता है. इसकी मदद से, सीधे तौर पर बेसलाइन नियम सेट किए जा सकते हैं. हालांकि, अगर कॉन्फ़िगरेशन को मैनेज करने के लिए पहले से ही Browserslist का इस्तेमाल किया जा रहा है, तो Browserslist की ओर से उपलब्ध कराई गई, पहले से मौजूद बेसलाइन क्वेरी का इस्तेमाल करना एक अच्छा विकल्प है.