इस पेज का अनुवाद Cloud Translation API से किया गया है.

अपने प्रोजेक्ट में Baseline का इस्तेमाल करने का तरीका

1. परिचय

बेसलाइन एक ऐसी पहल है जो यह जानकारी देती है कि कौनसी वेब सुविधाएं एक-दूसरे के साथ काम करती हैं और आज उनका इस्तेमाल करना सुरक्षित है. बेसलाइन टूलिंग में हुए सुधारों की वजह से, अब अपने प्रोजेक्ट में सीधे तौर पर बेसलाइन का इस्तेमाल किया जा सकता है. इसके लिए, आपको इसे Browserslist क्वेरी के तौर पर इस्तेमाल करना होगा. इससे आपकी टूलचेन, चुने गए बेसलाइन टारगेट के आधार पर कोड के आउटपुट में बदलाव कर सकती है.

इस कोडलैब में, आपको सैंपल प्रोजेक्ट में बेसलाइन का इस्तेमाल करने का तरीका बताया जाएगा. साथ ही, किसी खास बेसलाइन टारगेट को चुनने के लिए, इसे कॉन्फ़िगर करने का तरीका भी बताया जाएगा. आपको यह भी देखने को मिलेगा कि चुने गए बेसलाइन टारगेट के हिसाब से, प्रोजेक्ट टूलचेन का आउटपुट कैसे बदलता है.

2. अपने कंप्यूटर पर डेमो सेट अप करना

ध्यान दें: डेमो में एक बुनियादी React ऐप्लिकेशन शामिल है. इसे webpack का इस्तेमाल करके बनाया गया है. यह एक सामान्य और लोकप्रिय बंडलर है. हालांकि, आपके प्रोजेक्ट में Baseline का इस्तेमाल कैसे किया जाए, इस बारे में अक्सर यह नहीं बताया जाता कि किस बंडलर का इस्तेमाल किया गया है. Browserslist कॉन्फ़िगरेशन को ढूंढने वाली कोई भी टूलचेन, इस कोडलैब में बताई गई सामान्य प्रोसेस का इस्तेमाल कर सकती है.

सबसे पहले, अपने पसंदीदा टर्मिनल ऐप्लिकेशन पर जाएं. इसके बाद, डेमो रिपॉज़िटरी को क्लोन करें और फिर प्रोजेक्ट डायरेक्ट्री डालें:

git clone git@github.com:GoogleChromeLabs/baseline-demos.git
cd baseline-demos/tooling/webpack

इस समय तक, डेमो में पहले से ही बेसलाइन इंटिग्रेट हो चुकी होगी. हालांकि, आपको उस कमिट को देखना होगा जो आपको शुरू से शुरू करने की सुविधा देती है:

git checkout d3793f25

रिपॉज़िटरी क्लोन हो जाने के बाद, अब डेमो को स्पिन अप किया जा सकता है. यह प्रोजेक्ट, Node के वर्शन को मैनेज करने के लिए nvm का इस्तेमाल करता है. अगर आपके पास Node का नया वर्शन है, तो शायद आपको यह चरण पूरा करने की ज़रूरत नहीं है. हालांकि, अगर आपको nvm का इस्तेमाल करना है, तो ये कमांड चलाएं:

nvm install
nvm use

यहां से, प्रोजेक्ट के पैकेज इंस्टॉल करें:

npm install

अगर आपको डेमो देखना है, तो यह कमांड चलाएं:

npm start

इसके बाद, http://localhost:8080 पर जाएं. डेमो में कार्ड की एक सूची होती है. पेज पर सबसे ऊपर मौजूद फ़ॉर्म फ़ील्ड का इस्तेमाल करके, इस सूची को फ़िल्टर किया जा सकता है. ऐप्लिकेशन में, ऐसी सुविधाओं का इस्तेमाल किया जाता है जो बेसलाइन थ्रेशोल्ड तक पहुंच गई हैं.

डेमो पूरा होने के बाद, अपने टर्मिनल पर जाएं और डेमो को किसी भी समय बंद करने के लिए, Ctrl+C दबाएं.

3. प्रोजेक्ट में Baseline को इंटिग्रेट करने का तरीका

इस डेमो में, शुरुआत में Browserslist कॉन्फ़िगरेशन के बारे में नहीं बताया गया है. Browserslist, क्वेरी करने का एक छोटा सिंटैक्स है. यह टूलचेन को बताता है कि ब्राउज़र के किन वर्शन के साथ काम करना ज़रूरी है. उदाहरण के लिए, last 3 years की क्वेरी का इस्तेमाल करने से, टारगेट की एक बड़ी रेंज तय की जाएगी. इस डेमो में, हम Browserslist की ऐसी क्वेरी के बारे में बताएंगे जो बेसलाइन के उन टारगेट के साथ काम करती है जिनका इस्तेमाल टूलचेन में किया जा सकता है. बेसलाइन टारगेट इनमें से कोई एक हो सकता है:

बदलते टारगेट, जो नए ब्राउज़र रिलीज़ होने पर समय के साथ अपडेट होते हैं:
- बेसलिन नई सुविधा. यह सुविधा, इंटरऑपरेबल सुविधाओं के साथ काम करती है. इन्हें मुख्य ब्राउज़र सेट में कभी भी लागू किया जा सकता है. इनकी समयसीमा, मौजूदा समय से लेकर 30 महीने पहले तक होती है.
- बेसलिन वाइडली अवेलेबल. इसमें इंटरऑपरेबल सुविधाएं शामिल हैं. इन्हें 30 या इससे ज़्यादा महीने पहले, मुख्य ब्राउज़र सेट में लागू किया गया था.
तय किए गए टारगेट, जो किसी तय समय पर ब्राउज़र के वर्शन दिखाते हैं. इन्हें साल 2016 से लेकर मौजूदा साल तक के हिसाब से दिखाया जाता है.

शुरू करने के लिए, हम प्रोजेक्ट के लिए, मूविंग बेसलाइन वाला ऐसा टारगेट चुनेंगे जो ज़्यादातर लोगों के लिए उपलब्ध हो. इसके लिए, package.json खोलें और ये कॉम्पोनेंट जोड़ें:

"browserslist": "baseline widely available"

4. अलग-अलग बेसलाइन टारगेट चुनकर, कोड के आउटपुट में हुए बदलावों पर नज़र रखना

आपने डेमो प्रोजेक्ट के लिए, टारगेट के तौर पर Baseline Widely available को चुना है. इसके बाद, आपको प्रोजेक्ट बनाना होगा:

npm run build

@babel/preset-env के लिए debug विकल्प को प्रोजेक्ट के babel.config.js में true के तौर पर सेट किया गया है. इसलिए, बहुत ज़्यादा आउटपुट मिला है. सबसे पहले, बंडलर के आंकड़ों में सीएसएस और JavaScript का साइज़ नोट करें:

assets by status 213 KiB [emitted]
  asset js/home.5f3c5480.js 208 KiB [emitted] [immutable] [minimized] (name: home) 2 related assets
  asset css/home.20db50ef.css 3.64 KiB [emitted] [immutable] (name: home) 1 related asset
  asset index.html 564 bytes [emitted]

यहां ध्यान दें कि JavaScript बंडल का साइज़ 208 केआईबी है और सीएसएस का साइज़ 3.64 केआईबी है. ऐसा इसलिए है, क्योंकि यह प्रोजेक्ट JavaScript पॉलीफ़िल के लिए core-js का इस्तेमाल करता है. साथ ही, यह autoprefixer का इस्तेमाल, सीएसएस प्रॉपर्टी के लिए वेंडर के हिसाब से प्रीफ़िक्स लागू करने के लिए करता है. ये प्रॉपर्टी, अब तक पूरी तरह से इंटरऑपरेबल नहीं हैं. core-js और autoprefixer, दोनों पर चुनी गई बेसलाइन Browserslist क्वेरी का असर पड़ता है.

आउटपुट में एक और चीज़ पर ध्यान देना ज़रूरी है. वह यह है कि Baseline Widely available के लिए आपकी Browserslist क्वेरी को Browserslist क्वेरी में कैसे बदला जाता है. आपके प्रोजेक्ट में, यह कुछ ऐसा दिखेगा:

Using targets: {
  "chrome": "108",
  "edge": "108",
  "firefox": "108",
  "ios": "16",
  "safari": "16"
}

बिल्ड आउटपुट में, core-js की ओर से इंजेक्ट किए गए पॉलीफ़िल देखें:

The corejs3 polyfill added the following polyfills:
  es.iterator.constructor { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
  es.iterator.filter { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }
  es.iterator.map { "chrome":"108", "edge":"108", "firefox":"108", "ios":"16", "safari":"16" }

अगर आपने अपने बेसलाइन टारगेट में बदलाव किया है, तो इस आउटपुट में बदलाव हो सकता है. मान लें कि आपके ऐप्लिकेशन को बहुत पुराने ब्राउज़र के साथ काम करना है, क्योंकि एसएलए (सेवा स्तर समझौता) ज़्यादा सख्त है. अगर आपके लिए ऐसा है, तो हो सकता है कि आप ज़्यादा सुरक्षित टारगेट चुनें. अपनी package.json फ़ाइल में, Browserslist कॉन्फ़िगरेशन को बदलकर यह दिखाएं:

"browserslist": "baseline 2016"

इससे टारगेट के तौर पर Baseline 2016 को चुना जाता है. इसे Browerslist क्वेरी में बदला जाएगा. बिल्ड को फिर से चलाने के बाद, टूलचेन के आउटपुट में अंतर देखा जा सकता है:

npm run build

सबसे पहले, बंडलर के आंकड़ों में प्रोजेक्ट के JavaScript और सीएसएस के फ़ाइल साइज़ में हुए बदलाव को नोट करें:

assets by status 237 KiB [emitted]
  asset js/home.b228612d.js 232 KiB [emitted] [immutable] [minimized] (name: home) 2 related assets
  asset css/home.0c3e4fd7.css 3.91 KiB [emitted] [immutable] (name: home) 1 related asset
  asset index.html 564 bytes [emitted]

आपको दिखेगा कि JavaScript बंडल का साइज़ करीब 30 केआईबी बढ़ गया है. प्रोजेक्ट का सीएसएस, सिर्फ़ थोड़ा बड़ा है. ऐसा इसलिए है, क्योंकि autoprefixer ने 2016 के बेसलाइन टारगेट के आधार पर, वेंडर के ज़्यादा प्रीफ़िक्स जोड़े हैं. Browserslist क्वेरी में हुए बदलाव पर भी ध्यान दें:

Using targets: {
  "chrome": "53",
  "edge": "14",
  "firefox": "49",
  "ios": "10",
  "safari": "10"
}

ज़्यादातर लोगों के लिए उपलब्ध ब्राउज़र के बेसलाइन वर्शन की तुलना में, ये ब्राउज़र वर्शन बहुत पुराने हैं. ये इतने पुराने हैं कि इस मामले में टारगेट किया जा रहा Edge का वर्शन, Chromium से पहले का है.

core-js से इंजेक्ट किए गए पॉलीफ़िल भी बदल जाएंगे. यह टारगेट के तौर पर 'बेसलिन वाइडली अवेलेबल' को चुनने पर होने वाले बदलावों से काफ़ी ज़्यादा है:

The corejs3 polyfill added the following polyfills:
  es.array.filter { "edge":"14" }
  es.iterator.constructor { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.iterator.filter { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.object.to-string { "edge":"14", "firefox":"49" }
  es.array.includes { "firefox":"49" }
  es.string.includes { "edge":"14" }
  es.array.map { "firefox":"49" }
  es.iterator.map { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.symbol { "edge":"14", "firefox":"49" }
  es.symbol.description { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.array.iterator { "chrome":"53", "edge":"14", "firefox":"49" }
  web.dom-collections.iterator { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.array.push { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.regexp.to-string { "edge":"14" }
  es.array.from { "edge":"14", "firefox":"49" }
  es.regexp.exec { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }
  es.regexp.test { "edge":"14" }
  es.error.cause { "chrome":"53", "edge":"14", "firefox":"49", "ios":"10", "safari":"10" }

यहां ध्यान देने वाली बात यह है कि आपके बेसलाइन टारगेट का, इस बात पर काफ़ी असर पड़ सकता है कि आपके प्रोजेक्ट की टूलचेन से आपका ऐप्लिकेशन कैसे बदलता है. इस उदाहरण में ऐप्लिकेशन बहुत सामान्य है. इसमें React या ऐप्लिकेशन में डेवलपर के अनुभव को बेहतर बनाने वाली ज़्यादा सुविधाएं नहीं हैं. ज़्यादा जटिल ऐप्लिकेशन के लिए, आपको अलग-अलग नतीजे मिल सकते हैं. ऐसा हो सकता है कि आपको चुने गए बेसलाइन टारगेट के मुताबिक, ज़्यादा पॉलीफ़िल, ट्रांसफ़ॉर्म, और अतिरिक्त कोड के अन्य सोर्स जोड़ने पड़ें.

5. डाउनस्ट्रीम ब्राउज़र को टारगेट करना

बेसलिन के टारगेट किए गए मुख्य ब्राउज़र सेट में ये ब्राउज़र शामिल हैं:

Chrome
Android पर Chrome
Firefox
Android पर Firefox
Edge
macOS पर Safari
iOS पर Safari

हालांकि, "डाउनस्ट्रीम ब्राउज़र" को टारगेट किया जा सकता है. ये ऐसे ब्राउज़र होते हैं जिनके इंजन, कोर ब्राउज़र सेट में मौजूद किसी ब्राउज़र से लिए जाते हैं. ज़्यादातर मामलों में, यह Chromium होता है. इनमें Opera, Samsung Internet जैसे ब्राउज़र शामिल हैं. इन ब्राउज़र को टारगेट करने के लिए, with downstream को किसी भी मान्य Baseline Browserslist क्वेरी में जोड़ें. इसके अलावा, कोर ब्राउज़र सेट में शामिल ब्राउज़र को भी टारगेट किया जा सकता है:

"browserslist": "baseline widely available with downstream"

यह टारगेट, Baseline Widely available target के मुताबिक डाउनस्ट्रीम ब्राउज़र को टारगेट करता है. यह देखने के लिए कि यह Browserslist क्वेरी में कैसे बदलता है, प्रोजेक्ट को फिर से बनाएं:

npm start

इसके बाद, Browserslist क्वेरी में हुए बदलाव को नोट करें:

Using targets: {
  "android": "108",
  "chrome": "108",
  "edge": "108",
  "firefox": "108",
  "ios": "16",
  "opera": "94",
  "opera_mobile": "80",
  "safari": "16",
  "samsung": "21"
}

साल के हिसाब से, डाउनस्ट्रीम ब्राउज़र को भी टारगेट किया जा सकता है. उदाहरण के लिए:

"browserslist": "baseline 2016 with downstream"

इस कॉन्फ़िगरेशन के साथ, आपकी Browserslist क्वेरी इस तरह बदल जाएगी:

Using targets: {
  "android": "53",
  "chrome": "53",
  "edge": "14",
  "firefox": "49",
  "ios": "10",
  "opera": "40",
  "opera_mobile": "80",
  "safari": "10",
  "samsung": "6.2"
}

6. लिंटर और अन्य टूल

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

बेसलाइन के लिए लिंटर के साथ काम करने वाले टूल का एक अच्छा उदाहरण ESLint है. यह सीएसएस लिंटिंग के तहत, use-baseline नियम उपलब्ध कराता है. इसके लिए, @eslint/css का इस्तेमाल किया जाता है. इससे, बेसलाइन के नए वर्शन, बेसलाइन के ज़्यादातर वर्शन या बेसलाइन के पुराने वर्शन को टारगेट किया जा सकता है. कम्यूनिटी @html-eslint/eslint-plugin पैकेज में भी ऐसा ही नियम है. इसकी मदद से, अपनी eslint.config.js फ़ाइल में एचटीएमएल सुविधाओं के लिए भी ऐसा किया जा सकता है:

export default [
  /* Omitted JS linting rules ... */
  // Lint CSS files for Baseline:
  {
    files: ["**/*.css"],
    plugins: {
      css
    },
    language: "css/css",
    rules: {
      "css/no-duplicate-imports": "error",
      // Lint CSS files to make sure they are using
      // only Baseline Widely available features:
      "css/use-baseline": ["warn", {
        available: "widely"
      }]
    },
  },
  // Lint HTML and JSX files for Baseline:
  {
    files: ["**/*.html"],
    ...html.configs["flat/recommended"],
    rules: {
      // Lint HTML files to make sure they are using
      // only Baseline Widely available features:
      "@html-eslint/use-baseline": ["warn", {
        available: "widely"
      }]
    }
  }
];

इस कॉन्फ़िगरेशन में कुछ बातों का ध्यान रखना ज़रूरी है:

एचटीएमएल और सीएसएस, दोनों के लिए लिंटिंग पैकेज, use-baseline नियम का इस्तेमाल करते हैं. इसे available: "widely" कॉन्फ़िगरेशन विकल्प का इस्तेमाल करके, सभी के लिए उपलब्ध के तौर पर सेट किया जाता है.
दोनों लिंटिंग पैकेज के लिए, लिंटर के उल्लंघनों का लॉग लेवल "warn" पर सेट है. इसे "error" पर सेट किया जा सकता है, ताकि गड़बड़ी वाले कोड के साथ ड्रॉप आउट किया जा सके. इससे बिल्ड होने से रोका जा सकता है.

npm run build को पहले चलाने पर, आपको लिंटर का आउटपुट दिख सकता है. हालांकि, सिर्फ़ लिंटर का आउटपुट देखने के लिए, यह कमांड चलाएं:

npm run lint

आपको आउटपुट में, प्रोजेक्ट की सीएसएस में मौजूद कई चेतावनियां दिखेंगी:

/var/www/baseline-demos/tooling/webpack-browserslist-config-baseline/src/css/normalize.css
  222:3  warning  Property 'outline' is not a widely available baseline feature  css/use-baseline

/var/www/baseline-demos/tooling/webpack-browserslist-config-baseline/src/css/styles.css
  62:3   warning  Property 'outline' is not a widely available baseline feature                                css/use-baseline
  81:23  warning  Value 'subgrid' of property 'grid-template-rows' is not a widely available baseline feature  css/use-baseline

7. रैप अप

अपने प्रोजेक्ट में Browserslist की ओर से दी गई बेसलाइन क्वेरी का इस्तेमाल करने के लिए, आपको बिल्ड टूल और Browserslist के बारे में कुछ जानकारी होनी चाहिए. हालांकि, इन्हें प्रोजेक्ट में शामिल करना आसान है. इसका मुख्य फ़ायदा यह है कि अब आपको वर्शन नंबर के हिसाब से, उन ब्राउज़र के बारे में सोचने की ज़रूरत नहीं है जिन पर यह काम करता है. इसके बजाय, आपको सिर्फ़ एक बेसलाइन टारगेट के बारे में सोचना है, जो आपके लिए ज़्यादातर काम कर देता है.

इसके अलावा, इस डेमो का एक ऐसा वर्शन भी है जो Rollup पर काम करता है. इस कोडलैब को ज़्यादातर उस डेमो का इस्तेमाल करके भी पूरा किया जा सकता है.

बेसलिन सपोर्ट, बंडलिंग के अन्य टूल में भी दिखने लगा है. उदाहरण के लिए, Vite, जो Rollup का इस्तेमाल करता है, अब वर्शन 7 से डिफ़ॉल्ट रूप से, Baseline के तौर पर उपलब्ध ब्राउज़र को टारगेट करता है.

हालांकि, अपने प्रोजेक्ट में Browserslist में उपलब्ध बेसलाइन क्वेरी को शामिल करके और अपने हिसाब से बेसलाइन टारगेट चुनकर, ब्राउज़र को आसान और ज़्यादा भरोसेमंद तरीके से टारगेट किया जा सकता है.