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

1. शुरुआती जानकारी

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

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

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

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

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

इस समय, डेमो में पहले से ही बेसलाइन इंटिग्रेट हो जाएगा. हालांकि, आपको एक ऐसा कमिट देखना होगा जिससे आपको शुरुआत से काम करने में मदद मिले:

git checkout 94f12e34

रिपॉज़िटरी को क्लोन करने के बाद, डेमो को शुरू किया जा सकता है. यह प्रोजेक्ट, 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-config-baseline नाम के npm पैकेज का इस्तेमाल करेंगे. इससे, Browserslist की ऐसी क्वेरी तय की जा सकेगी जो बेसलाइन टारगेट के साथ अलाइन हो. इन टारगेट का इस्तेमाल, टूलचेन में किया जा सकता है.

शुरू करने के लिए, browserslist-config-baseline को इस तरह इंस्टॉल करें:

npm install browserslist-config-baseline --save-dev

इंस्टॉल होने के बाद, इस पैकेज की मदद से अपने प्रोजेक्ट में extends Browserslist क्वेरी तय की जा सकती है. इससे बेसलाइन ब्राउज़र की सूची मिलती है. ये बेसलाइन टारगेट इनमें से कोई एक हो सकते हैं:

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

शुरू करने के लिए, हम प्रोजेक्ट के लिए, browserslist-config-baseline का इस्तेमाल करके, 'बहुत लोगों के लिए उपलब्ध टारगेट' के तौर पर चल रहे बेसलाइन को चुनेंगे. इसके लिए, package.json खोलें और ये जोड़ें:

"browserslist": "extends browserslist-config-baseline"

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

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

npm run build

बहुत ज़्यादा आउटपुट है, क्योंकि प्रोजेक्ट के babel.config.js में @babel/preset-env के लिए debug विकल्प को 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-config-baseline का असर पड़ता है.

आउटपुट में एक और बात पर ध्यान देने की ज़रूरत है. यह देखना कि 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": "extends browserslist-config-baseline/2016"

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

npm run build

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

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. browserslist-config-baseline की मदद से, डाउनस्ट्रीम ब्राउज़र को टारगेट करना

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

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

हालांकि, "डाउनस्ट्रीम ब्राउज़र" को टारगेट किया जा सकता है. ये ऐसे ब्राउज़र होते हैं जिनके इंजन, मुख्य ब्राउज़र सेट में मौजूद किसी ब्राउज़र से लिए जाते हैं. आम तौर पर, ये इंजन Chromium से लिए जाते हैं. इनमें Opera, Samsung Internet, और अन्य ब्राउज़र शामिल हैं. browserslist-config-baseline को अपनी package.json फ़ाइल में टारगेट करने के लिए, इस तरह कॉन्फ़िगर किया जा सकता है:

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

यह बेसलाइन के तौर पर, बड़े पैमाने पर उपलब्ध टारगेट के हिसाब से डाउनस्ट्रीम ब्राउज़र को टारगेट करता है. यह देखने के लिए कि यह 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": "extends browserslist-config-baseline/with-downstream/2016"

इस कॉन्फ़िगरेशन के साथ, आपकी 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-config-baseline, बंडलर और टूलचेन के दूसरे हिस्सों के लिए एक आसान टूल है. हालांकि, दूसरे टूल भी काम के हैं. जैसे, ऐसे लिंटर जिन्होंने अपने कॉन्फ़िगरेशन के हिस्से के तौर पर बेसलाइन टारगेट को अपनाया है.

बेसलाइन के लिए लिंटर की सुविधा का एक अच्छा उदाहरण ESLint है. यह सीएसएस लिंटिंग के हिस्से के तौर पर, @eslint/css का इस्तेमाल करके use-baseline नियम उपलब्ध कराता है. इसकी मदद से, बेसलाइन के नए वर्शन, बेसलाइन के बड़े पैमाने पर उपलब्ध वर्शन या बेसलाइन के सालों को टारगेट किया जा सकता है. कम्यूनिटी @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"
      }]
    }
  }
];

इस कॉन्फ़िगरेशन में ध्यान देने वाली कुछ बातें:

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

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

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-config-baseline का इस्तेमाल करने के लिए, आपको बुनियादी बिल्ड टूल और Browserslist के बारे में कुछ जानकारी होनी चाहिए. हालांकि, इसे अपने प्रोजेक्ट में शामिल करने के लिए, थोड़ी मेहनत करनी पड़ सकती है. इसका इस्तेमाल करने का मुख्य फ़ायदा यह है कि अब आपको वर्शन नंबर के हिसाब से, उन ब्राउज़र के बारे में सोचने की ज़रूरत नहीं है जिन पर आपका ऐप्लिकेशन काम करता है. इसके बजाय, आपको बेसलाइन टारगेट पर ध्यान देना होगा, जो आपके लिए ज़रूरी काम करता है.

इसके अलावा, इस डेमो का एक वर्शन रोलअप पर चलता है. इस डेमो का इस्तेमाल करके भी, इस कोडलैब को बड़े पैमाने पर फ़ॉलो किया जा सकता है.

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

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