আপনার প্রকল্পে বেসলাইন কিভাবে ব্যবহার করবেন

1. ভূমিকা

বেসলাইন এমন একটি উদ্যোগ যা স্পষ্ট বার্তা প্রদান করে যে কোন ওয়েব বৈশিষ্ট্যগুলি আজ আন্তঃব্যবহারযোগ্য এবং ব্যবহার করা নিরাপদ। বেসলাইন টুলিংয়ের অগ্রগতির জন্য ধন্যবাদ, আপনি এখন আপনার প্রকল্পগুলিতে সরাসরি ব্রাউজারলিস্ট কোয়েরি হিসাবে বেসলাইন ব্যবহার করতে পারেন যাতে আপনার টুলচেইন আপনার নির্বাচিত বেসলাইন টার্গেটের উপর ভিত্তি করে কোডের আউটপুট পরিবর্তন করতে পারে।

এই কোডল্যাবে, আপনি শিখবেন কিভাবে একটি নমুনা প্রকল্পে বেসলাইন ব্যবহার করতে হয় এবং একটি নির্দিষ্ট বেসলাইন লক্ষ্য নির্বাচন করার জন্য এটি কীভাবে কনফিগার করতে হয়। আপনি আপনার নির্বাচিত বেসলাইন লক্ষ্যের উপর নির্ভর করে প্রকল্প টুলচেইনের আউটপুট কীভাবে পরিবর্তিত হয় তাও পর্যবেক্ষণ করতে পারবেন।

২. আপনার স্থানীয় মেশিনে ডেমো সেট আপ করুন

প্রথমে, আপনার পছন্দের টার্মিনাল অ্যাপ্লিকেশনে যান, ডেমো রিপোজিটরিটি ক্লোন করুন এবং তারপর প্রজেক্ট ডিরেক্টরিটি প্রবেশ করুন:

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

এই মুহুর্তে, ডেমোটিতে ইতিমধ্যেই Baseline ইন্টিগ্রেটেড থাকবে, তবে আপনাকে এমন একটি কমিট পরীক্ষা করে দেখতে হবে যা আপনাকে শুরু থেকে শুরু করবে:

git checkout d3793f25

রিপোজিটরি ক্লোন করার মাধ্যমে, ডেমোটি এখন নতুন করে তৈরি করা যেতে পারে। এই প্রকল্পটি নোড সংস্করণ পরিচালনা করতে nvm ব্যবহার করে। যদি আপনার কাছে বিশ্বব্যাপী নোডের একটি মোটামুটি সাম্প্রতিক সংস্করণ ইনস্টল করা থাকে, তাহলে সম্ভবত আপনার এই ধাপটি সম্পূর্ণ করার প্রয়োজন নেই—তবে যদি আপনি nvm ব্যবহার করেন, তাহলে নিম্নলিখিত কমান্ডগুলি চালান:

nvm install
nvm use

এখান থেকে, প্রকল্পের প্যাকেজগুলি ইনস্টল করুন:

npm install

আপনি যদি ডেমোটি দেখতে চান, তাহলে নিম্নলিখিত কমান্ডটি চালান:

npm start

তারপর http://localhost:8080 এ যান। ডেমোটি নিজেই কার্ডগুলির একটি তালিকা যা পৃষ্ঠার শীর্ষে একটি ফর্ম ফিল্ড ব্যবহার করে ফিল্টার করা যায়। অ্যাপটি নিজেই এমন বৈশিষ্ট্যগুলির মিশ্রণ ব্যবহার করে যা একটি বেসলাইন থ্রেশহোল্ডে পৌঁছেছে।

ডেমোটি শেষ হলে, আপনার টার্মিনালে যান এবং যেকোনো সময় ডেমো চালানো বন্ধ করতে Ctrl+C টিপুন।

৩. প্রকল্পের সাথে বেসলাইন কীভাবে একীভূত করবেন

এই ডেমোতে শুরুতে Browserslist কনফিগারেশন নির্দিষ্ট করা নেই। Browserslist হল একটি কম্প্যাক্ট কোয়েরি সিনট্যাক্স যা টুলচেইনগুলিকে বলে যে ন্যূনতম কোন ব্রাউজার সংস্করণগুলি সমর্থিত হতে হবে। উদাহরণস্বরূপ, last 3 years একটি কোয়েরি ব্যবহার করলে বিভিন্ন ধরণের লক্ষ্য নির্দিষ্ট করা হবে। এই ডেমোতে, আমরা একটি Browserslist কোয়েরি নির্দিষ্ট করব যা আপনার টুলচেইনে ব্যবহার করা বেসলাইন লক্ষ্যগুলির সাথে সামঞ্জস্যপূর্ণ। বেসলাইন লক্ষ্যগুলি নিম্নলিখিতগুলির মধ্যে একটি হতে পারে:

  • মুভিং টার্গেট , যা নতুন ব্রাউজার প্রকাশের সাথে সাথে সময়ের সাথে সাথে আপডেট হয়:
    • বেসলাইন নিউলি অ্যাভায়েবল , যা বর্তমান থেকে ৩০ মাস আগে পর্যন্ত যেকোনো সময়ে মূল ব্রাউজার সেট জুড়ে বাস্তবায়িত আন্তঃকার্যক্ষম বৈশিষ্ট্যগুলিকে সারিবদ্ধ করে।
    • বেসলাইন ব্যাপকভাবে উপলব্ধ , যার মধ্যে রয়েছে আন্তঃকার্যক্ষম বৈশিষ্ট্য যা ৩০ বা তার বেশি মাস আগে মূল ব্রাউজার সেট জুড়ে বাস্তবায়িত হয়েছে।
  • স্থির লক্ষ্যমাত্রা , যা একটি নির্দিষ্ট সময়ে ব্রাউজার সংস্করণগুলিকে প্রতিনিধিত্ব করে। এগুলি ২০১৬ থেকে বর্তমান বছর পর্যন্ত বছর হিসাবে প্রকাশ করা হয়।

শুরু করার জন্য, আমরা প্রকল্পের জন্য চলমান বেসলাইন Widely available টার্গেট নির্বাচন করব। এটি করার জন্য, package.json খুলুন এবং নিম্নলিখিতগুলি যোগ করুন:

"browserslist": "baseline widely available"

৪. বিভিন্ন বেসলাইন টার্গেট নির্বাচন করে কোড আউটপুটে পরিবর্তনগুলি পর্যবেক্ষণ করুন

আপনি ডেমো প্রকল্পের জন্য লক্ষ্য হিসেবে Baseline Widely available নির্বাচন করেছেন। এরপর, আপনাকে প্রকল্পটি তৈরি করতে হবে:

npm run build

@babel/preset-env এর জন্য debug বিকল্পটি প্রকল্পের babel.config.js এ true হিসাবে নির্দিষ্ট করা হয়েছে বলে প্রচুর অতিরিক্ত আউটপুট রয়েছে। প্রথমে, বান্ডলার পরিসংখ্যানে CSS এবং জাভাস্ক্রিপ্টের আকার লক্ষ্য করুন:

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]

এখানে মনে রাখবেন যে জাভাস্ক্রিপ্ট বান্ডেলটি 208 KiB এবং CSS হল 3.64 KiB । কারণ এই প্রকল্পটি জাভাস্ক্রিপ্ট পলিফিলের জন্য core-js এবং CSS বৈশিষ্ট্যগুলির জন্য ভেন্ডর-নির্দিষ্ট প্রিফিক্স প্রয়োগ করতে autoprefixer ব্যবহার করে যা এখনও সম্পূর্ণরূপে ইন্টারঅপারেবল নয়। core-js এবং autoprefixer উভয়ই নির্বাচিত Baseline 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" }

আপনার বেসলাইন টার্গেট পরিবর্তন করলে এই আউটপুট পরিবর্তন হতে পারে। ধরুন আপনার অ্যাপ্লিকেশনটি অবশ্যই অনেক পুরানো ব্রাউজার সেট সমর্থন করে কারণ আরও কঠোর SLA। যদি আপনার ক্ষেত্রে এটি হয়, তাহলে আপনি সম্ভবত আরও রক্ষণশীল টার্গেট নির্বাচন করবেন। আপনার package.json ফাইলে, নিম্নলিখিতগুলি প্রতিফলিত করার জন্য Browserslist কনফিগারেশন পরিবর্তন করুন: 

"browserslist": "baseline 2016"

এটি লক্ষ্য হিসেবে Baseline 2016 নির্বাচন করে, এবং এটি একটি Browerslist কোয়েরিতে অনুবাদ করা হবে। বিল্ডটি পুনরায় চালানোর পরে আপনি টুলচেইন আউটপুটের পার্থক্যগুলি লক্ষ্য করতে পারেন: 

npm run build

প্রথমে, বান্ডলার স্ট্যাটাসে প্রকল্পের জাভাস্ক্রিপ্ট এবং 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]

আপনি লক্ষ্য করবেন যে জাভাস্ক্রিপ্ট বান্ডেলের আকার প্রায় 30 কিলোবাইট বৃদ্ধি পেয়েছে। প্রোজেক্টের CSS কেবল সামান্য বড়, কারণ 2016 বেসলাইন টার্গেটের উপর ভিত্তি করে autoprefixer আরও ভেন্ডর প্রিফিক্স যুক্ত করেছে। ব্রাউজারলিস্ট কোয়েরিতে পরিবর্তনটিও লক্ষ্য করুন: 

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

বেসলাইন ওয়াইডলি উপলব্ধ টার্গেটের তুলনায়, এই ব্রাউজার সংস্করণগুলি অনেক, অনেক আগে - যথেষ্ট তাড়াতাড়ি যে এই ক্ষেত্রে এজের যে সংস্করণটি লক্ষ্য করা হচ্ছে তা ক্রোমিয়াম-পূর্ব।

core-js দ্বারা ইনজেক্ট করা পলিফিলগুলিও পরিবর্তিত হবে, যা Baseline Widely available কে লক্ষ্য হিসাবে নির্বাচিত হওয়ার চেয়ে অনেক বেশি: 

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 বা অ্যাপ্লিকেশনটিতে খুব বেশি অত্যাধুনিক ডেভেলপার অভিজ্ঞতা বৈশিষ্ট্য নেই। আরও জটিল অ্যাপ্লিকেশনের জন্য, আপনি অনেক ভিন্ন ফলাফল আশা করতে পারেন - সম্ভবত আপনার নির্বাচিত বেসলাইন টার্গেটের সাথে সামঞ্জস্যপূর্ণ পলিফিল, ট্রান্সফর্ম এবং অতিরিক্ত কোডের অন্যান্য উৎসের ক্ষেত্রে আরও বেশি।

৫. ডাউনস্ট্রিম ব্রাউজারগুলিকে টার্গেট করা

পর্যালোচনা করার জন্য, মূল ব্রাউজারটি যে বেসলাইন টার্গেট সেট করে তাতে নিম্নলিখিত ব্রাউজারগুলি অন্তর্ভুক্ত থাকে:

  • ক্রোম
  • অ্যান্ড্রয়েডে ক্রোম
  • ফায়ারফক্স
  • অ্যান্ড্রয়েডে ফায়ারফক্স
  • প্রান্ত
  • ম্যাকওএস-এ সাফারি
  • iOS-এ Safari

তবে, আপনি "ডাউনস্ট্রিম ব্রাউজার" নামে পরিচিত ব্রাউজারগুলিকে টার্গেট করতে পারেন। এই ব্রাউজারগুলি হল সেইসব ব্রাউজার যাদের ইঞ্জিনগুলি মূল ব্রাউজার সেটের একটি ব্রাউজার থেকে নেওয়া হয়—প্রায়শই Chromium। এর মধ্যে Opera, Samsung Internet এবং অন্যান্য ব্রাউজার অন্তর্ভুক্ত। আপনি যেকোনো বৈধ Baseline Browserslist কোয়েরিতে with downstream যোগ করে মূল ব্রাউজার সেটের ব্রাউজারগুলি ছাড়াও এই ব্রাউজারগুলিকে টার্গেট করতে পারেন: 

"browserslist": "baseline widely available with downstream"

এটি বেসলাইন ওয়াইডলি অ্যাভাইলেবল টার্গেট অনুসারে ডাউনস্ট্রিম ব্রাউজারগুলিকে টার্গেট করে। ব্রাউজারলিস্ট কোয়েরিতে এটি কীভাবে সমাধান হয় তা দেখতে, প্রকল্পটি পুনর্নির্মাণ করুন: 

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"

এই কনফিগারেশনের মাধ্যমে, আপনার ব্রাউজারলিস্ট কোয়েরি সেই অনুযায়ী পরিবর্তিত হবে: 

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

৬. লিন্টার এবং অন্যান্য সরঞ্জাম

Browserslist-এ তৈরি বেসলাইন কোয়েরিগুলি বান্ডলার এবং আপনার টুলচেইনের অন্যান্য অংশের মতো টুলের জন্য সুবিধাজনক, তবে অন্যান্য টুলেরও মূল্য রয়েছে, যেমন লিন্টার যা তাদের কনফিগারেশনের অংশ হিসাবে বেসলাইন টার্গেট গ্রহণ করেছে।

বেসলাইনের জন্য লিন্টার সাপোর্টের একটি ভালো উদাহরণ হল ESLint , যা তার CSS লিন্টিংয়ের অংশ হিসেবে @eslint/css ব্যবহার করে একটি use-baseline নিয়ম প্রদান করে যা আপনাকে বেসলাইন নিউলি, বেসলাইন ওয়াইডলি অ্যাভাইভেল, অথবা বেসলাইন বছরগুলিকে লক্ষ্য করতে দেয়। @html-eslint/eslint-plugin কমিউনিটিতেও একই রকম নিয়ম রয়েছে যা আপনাকে আপনার eslint.config.js ফাইলের HTML বৈশিষ্ট্যগুলির জন্য একই কাজ করতে দেয়: 

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. HTML এবং CSS লিন্টিং প্যাকেজ উভয়ই একটি use-baseline নিয়ম ব্যবহার করে এবং এটি available: "widely" কনফিগারেশন বিকল্প ব্যবহার করে Widely available এ সেট করা হয়।
  2. উভয় লিন্টিং প্যাকেজের জন্য, লিন্টার লঙ্ঘনের জন্য লগ লেভেল "warn" তে সেট করা আছে। এটি "error" তে সেট করা যেতে পারে যাতে কোনও বিল্ড ঘটতে না পারে তার জন্য একটি ত্রুটি কোড ব্যবহার করে ড্রপ আউট করা যায়।

npm run build চালানোর সময় আপনি হয়তো লিন্টার আউটপুট দেখেছেন, কিন্তু লিন্টার আউটপুট নিজে থেকেই দেখতে, আপনি নিম্নলিখিতগুলি চালাতে পারেন: 

npm run lint

আপনি যে আউটপুটটি দেখতে পাবেন তা প্রকল্পের CSS-এ বেশ কয়েকটি সতর্কতা হাইলাইট করে: 

/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

৭. শেষ করা

আপনার প্রোজেক্টে Browserslist দ্বারা প্রদত্ত বেসলাইন কোয়েরিগুলি ব্যবহার করার জন্য অন্তর্নিহিত বিল্ড টুল এবং Browserslist সম্পর্কে কিছু ধারণা থাকা প্রয়োজন, তবে একটি প্রোজেক্টে সেগুলিকে স্থাপন করার কাজটি নিজেই সংক্ষিপ্ত। এটি ব্যবহারের প্রাথমিক সুবিধা হল যে আপনাকে আর সংস্করণ সংখ্যার ক্ষেত্রে আপনার সমর্থন করা ব্রাউজারগুলি সম্পর্কে চিন্তা করতে হবে না, বরং একটি বেসলাইন টার্গেট যা আপনার জন্য ভারী কাজ করে।

উপরন্তু, এই ডেমোটির একটি সংস্করণ রয়েছে যা Rollup এ চলে এবং এই কোডল্যাবটি মূলত সেই ডেমো ব্যবহার করেও অনুসরণ করা যেতে পারে।

অন্যান্য বান্ডলিং টুলগুলিতেও বেসলাইন সাপোর্ট দেখা দিতে শুরু করেছে। উদাহরণস্বরূপ, Vite, যা হুডের নিচে রোলআপ ব্যবহার করে, এখন সংস্করণ 7 থেকে ডিফল্টরূপে বেসলাইন ব্যাপকভাবে উপলব্ধ ব্রাউজারগুলিকে লক্ষ্য করে ।

আপনি যাই করুন না কেন, আপনার প্রোজেক্টে Browserslist-এ উপলব্ধ বেসলাইন কোয়েরিগুলি প্রবর্তন করে - এবং আপনার জন্য কাজ করে এমন একটি বেসলাইন টার্গেট নির্বাচন করে - আপনি ব্রাউজারগুলিকে আরও সহজ এবং আরও নির্ভরযোগ্য উপায়ে টার্গেট করতে পারেন।