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

1. ভূমিকা

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

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

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

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

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

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

git checkout 94f12e34

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

nvm install
nvm use

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

npm install

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

npm start

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

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

3. কিভাবে প্রকল্পের মধ্যে বেসলাইন সংহত করা যায়

এই ডেমো শুরুতে একটি ব্রাউজারলিস্ট কনফিগারেশন নির্দিষ্ট করে না। ব্রাউজারলিস্ট হল একটি কমপ্যাক্ট ক্যোয়ারী সিনট্যাক্স যা টুলচেইনকে বলে যে কোন ন্যূনতম ব্রাউজার সংস্করণগুলিকে সমর্থন করতে হবে৷ উদাহরণস্বরূপ, last 3 years একটি প্রশ্ন ব্যবহার করে লক্ষ্যগুলির একটি বিস্তৃত পরিসর নির্দিষ্ট করা হবে। এই ডেমোতে, আমরা একটি ব্রাউজারলিস্ট কোয়েরি নির্দিষ্ট করতে browserslist-config-baseline নামে একটি npm প্যাকেজ ব্যবহার করব যা আপনি আপনার টুলচেইনে ব্যবহার করতে পারেন এমন বেসলাইন লক্ষ্যগুলির সাথে সারিবদ্ধ।

শুরু করার জন্য, browserslist-config-baseline ইনস্টল করুন:

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

ইনস্টল করা হলে, এই প্যাকেজটি আপনাকে আপনার প্রজেক্টে একটি extends ব্রাউজারলিস্ট কোয়েরি নির্দিষ্ট করতে দেয় যা বেসলাইন ব্রাউজারগুলির একটি তালিকার সমাধান করে। এই বেসলাইন লক্ষ্যগুলি নিম্নলিখিতগুলির মধ্যে একটি হতে পারে:

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

শুরু করার জন্য, আমরা প্রজেক্টের জন্য চলমান বেসলাইন ব্যাপকভাবে উপলব্ধ লক্ষ্য নির্বাচন করতে browserslist-config-baseline ব্যবহার করব। এটি করার জন্য, package.json খুলুন এবং নিম্নলিখিত যোগ করুন:

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

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

আপনি এইমাত্র ডেমো প্রকল্পের লক্ষ্য হিসাবে ব্যাপকভাবে উপলব্ধ বেসলাইন নির্বাচন করেছেন৷ পরবর্তী, আপনি প্রকল্পটি তৈরি করতে চাইবেন:

npm run build

এখানে প্রচুর অতিরিক্ত আউটপুট রয়েছে কারণ @babel/preset-env এর debug বিকল্পটি প্রকল্পের babel.config.js এ true হিসাবে নির্দিষ্ট করা হয়েছে। প্রথমে, বান্ডলার পরিসংখ্যানে CSS এবং 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 KiB , এবং CSS হল 3.64 KiB । কারণ এই প্রকল্পটি জাভাস্ক্রিপ্ট পলিফিল এবং autoprefixer জন্য core-js ব্যবহার করে CSS বৈশিষ্ট্যগুলির জন্য বিক্রেতা-নির্দিষ্ট উপসর্গগুলি প্রয়োগ করতে যা এখনও সম্পূর্ণরূপে আন্তঃপ্রক্রিয়াযোগ্য নয়। core-js এবং autoprefixer উভয়ই browserslist-config-baseline দ্বারা প্রভাবিত হয়।

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

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": "extends browserslist-config-baseline/2016"

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

npm run build

প্রথমে, বান্ডলার পরিসংখ্যানে প্রকল্পের জাভাস্ক্রিপ্ট এবং সিএসএসের ফাইলের আকারের পরিবর্তন লক্ষ্য করুন: 

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 KiB বৃদ্ধি পেয়েছে। 2016 বেসলাইন টার্গেটের উপর ভিত্তি করে autoprefixer আরও বিক্রেতা উপসর্গ যোগ করার কারণে প্রকল্পের CSS শুধুমাত্র সামান্য বড়। এছাড়াও Browserslist ক্যোয়ারী পরিবর্তন নোট করুন: 

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

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

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" }

এখানে টেকঅ্যাওয়ে হল যে আপনার বেসলাইন টার্গেট আপনার প্রজেক্টের টুলচেন দ্বারা কীভাবে আপনার অ্যাপ্লিকেশন রূপান্তরিত হয় তার উপর একটি উল্লেখযোগ্য প্রভাব ফেলতে পারে; এই উদাহরণে থাকা অ্যাপ্লিকেশনটি খুবই মৌলিক, যার মধ্যে রিঅ্যাক্ট বা অ্যাপ্লিকেশনটিতেই খুব বেশি কাটিং-এজ ডেভেলপার অভিজ্ঞতা বৈশিষ্ট্য নেই। যথেষ্ট জটিল অ্যাপ্লিকেশানগুলির জন্য, আপনি অনেকগুলি ভিন্ন ফলাফল আশা করতে পারেন—সম্ভবত আরও বেশি যোগ করা পলিফিল, রূপান্তর, এবং আপনার বেছে নেওয়া বেসলাইন লক্ষ্যের সাথে সামঞ্জস্য করার জন্য অতিরিক্ত কোডের অন্যান্য উত্সের মাধ্যমে।

5. ব্রাউজারলিস্ট-কনফিগ-বেসলাইন সহ ডাউনস্ট্রিম ব্রাউজারগুলিকে লক্ষ্য করা

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

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

যাইহোক, আপনি "ডাউনস্ট্রিম ব্রাউজার" হিসাবে পরিচিত কি লক্ষ্য করতে পারেন। এই ব্রাউজারগুলি হল সেগুলি যাদের ইঞ্জিনগুলি মূল ব্রাউজার সেটের একটি ব্রাউজার থেকে প্রাপ্ত হয় - প্রায়শই Chromium৷ এর মধ্যে রয়েছে অপেরা, স্যামসাং ইন্টারনেট এবং অন্যান্য ব্রাউজার। আপনি browserslist-config-baseline আপনার package.json ফাইলে লক্ষ্য করার জন্য কনফিগার করতে পারেন: 

"browserslist": "extends browserslist-config-baseline/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": "extends browserslist-config-baseline/with-downstream/2016"

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

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 , যা এর CSS linting-এর একটি অংশ হিসাবে, @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. এইচটিএমএল এবং সিএসএস লিন্টিং উভয় প্যাকেজই একটি use-baseline নিয়ম ব্যবহার করে এবং এটি available: "widely" কনফিগারেশন বিকল্প ব্যবহার করে ব্যাপকভাবে উপলব্ধ-এ সেট করা হয়।
  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

7. মোড়ানো

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

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

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

যাইহোক আপনি এটি সম্পর্কে যাওয়ার সিদ্ধান্ত নেন, আপনার প্রকল্পের টুলচেইনে browserslist-config-baseline প্রবর্তন করে — এবং আপনার জন্য কাজ করে এমন একটি বেসলাইন লক্ষ্য নির্বাচন করে — আপনি আরও সহজ এবং আরও নির্ভরযোগ্য উপায়ে ব্রাউজারগুলিকে লক্ষ্য করতে পারেন৷