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

संग्रह की मदद से व्यवस्थित रहें अपनी प्राथमिकताओं के आधार पर, कॉन्टेंट को सेव करें और कैटगरी में बांटें.

Tony Conway

पब्लिश किया गया: 7 मई, 2025

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

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

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

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

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

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

browserslist-config-baseline इंस्टॉल करें

यह तय करने के बाद कि आपको बेसलाइन की किस सुविधा को टारगेट करना है, उस टारगेट को अपने डेवलपर टूल पर लागू किया जा सकता है. browserslist का इस्तेमाल करने वाले किसी भी टूल के लिए, 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

'बहुत ज़्यादा लोगों के लिए उपलब्ध' बेसलाइन को टारगेट करने का तरीका

ज़्यादातर लोगों के लिए उपलब्ध बेसलाइन को टारगेट करने के लिए, extends कीवर्ड का इस्तेमाल करके package.json में browserlist कॉन्फ़िगरेशन अपडेट करें या जोड़ें:

{
  ...
  "browserslist": [
    "extends browserslist-config-baseline"
   ]
  ...
}

जब browserslist, इस्तेमाल किए जा सकने वाले ब्राउज़र की सूची लोड करेगा, तो browserslist-config-baseline ब्राउज़र के उन मौजूदा वर्शन को डाइनैमिक तौर पर जनरेट करेगा जो अब सभी के लिए उपलब्ध सभी सुविधाओं के साथ काम करते हैं. .browserslistrc फ़ाइल में extends browserslist-config-baseline भी जोड़ा जा सकता है और इसे उसी तरह मैनेज किया जाएगा.

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

अगर आपको बेसलाइन साल के फ़ीचर सेट को टारगेट करना है, तो अपनी browserslist क्वेरी के आखिर में / और साल को YYYY फ़ॉर्मैट में जोड़ें:

"browserslist": "extends browserslist-config-baseline/2020"

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

बेसलाइन कोर ब्राउज़र सेट में Chrome, Edge, Firefox, और Safari शामिल हैं. अन्य ब्राउज़र, Chrome और Edge के ओपन सोर्स कोड—Chromium—पर आधारित होते हैं. साथ ही, इनमें वही सुविधाएं काम करती हैं जो Chromium के किसी भी वर्शन में काम करती हैं.

browserslist-config-baseline, ब्राउज़र के वर्शन को उन सुविधाओं के सेट से जोड़ने के लिए baseline-browser-mapping का इस्तेमाल करता है जिन पर वे काम करते हैं. baseline-browser-mapping में, UC Browser मोबाइल और QQ Browser मोबाइल के लिए मैपिंग उपलब्ध हैं. आने वाले समय में, अन्य ब्राउज़र भी शामिल किए जा सकते हैं.

इन ब्राउज़र को अपने बेसलाइन कॉन्फ़िगरेशन में शामिल करने के लिए, अपने browserslist कॉन्फ़िगरेशन में मॉड्यूल के नाम के तुरंत बाद /with-downstream जोड़ें:

"browserslist": "extends browserslist-config-baseline/with-downstream"

या:

"browserslist": "extends browserslist-config-baseline/with-downstream/2020"

browserslist-config-baseline के काम करने के उदाहरण

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

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

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

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

लिंटर में

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

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

Stylelint अब ऐसी सीएसएस को फ़्लैग करेगा जो फ़िलहाल, ज़्यादा से ज़्यादा क्रिएटर्स के लिए उपलब्ध बेसलाइन का हिस्सा नहीं है:

Stylelint में एक प्लग इन भी होता है, जिसकी मदद से सीधे बेसलाइन नियम सेट किए जा सकते हैं. हालांकि, अगर आपने अपने कॉन्फ़िगरेशन को मैनेज करने के लिए पहले से ही browserslist का इस्तेमाल किया जा रहा है, तो browserslist-config-baseline एक ड्रॉप-इन समाधान है.

browserslist-config-baseline में योगदान देने का तरीका

अगर आपको browserslist-config-baseline के लिए किसी सुविधा का अनुरोध करना है, तो GitHub रिपॉज़िटरी पर कोई समस्या बनाएं या पुल का अनुरोध करें.

अगर आपको डाउनस्ट्रीम ब्राउज़र डेटा में ज़्यादा योगदान देना है या डेटा से जुड़ी समस्या की शिकायत करनी है, तो baseline-browser-mapping रिपॉज़िटरी में समस्या बनाएं या पुश अनुरोध करें.