Browserslist কনফিগারেশন

Browserslist একটি কনফিগারেশন টুল যা বিভিন্ন ধরনের ফিচার এবং ব্রাউজার সমর্থন করতে ব্যবহৃত হয়। এটি বিশেষভাবে BabelJS এবং অন্যান্য টুল যেমন Autoprefixer, ESLint ইত্যাদির সাথে ব্যবহৃত হয়, যাতে আপনি নির্দিষ্ট ব্রাউজার বা ব্রাউজার ভার্সনের জন্য কোড ট্রান্সপাইল করতে পারেন। Browserslist আপনাকে ঠিক করে দেয় কোন ব্রাউজারগুলোতে কোড সমর্থিত হবে এবং কোন ব্রাউজারে কোডের সর্বোচ্চ কার্যকারিতা নিশ্চিত করা যাবে।

BabelJS এর ক্ষেত্রে, Browserslist কনফিগারেশন ব্রাউজার অনুযায়ী কোন JavaScript ফিচার ট্রান্সপাইল করতে হবে তা নির্ধারণ করে। এই কনফিগারেশনটি BabelJS এর @babel/preset-env প্রিসেটের মাধ্যমে ব্যবহৃত হয়, যা অটোমেটিকভাবে নির্দিষ্ট ব্রাউজারগুলোর জন্য কোডকে ট্রান্সপাইল করে।

১. Browserslist কনফিগারেশন ফাইল

Browserslist কনফিগারেশন সাধারণত একটি **.browserslistrc** ফাইলে রাখা হয় অথবা package.jsonফাইলে"browserslist"` নামক একটি সেকশনে নির্ধারণ করা হয়।

.browserslistrc ফাইল

আপনি যদি .browserslistrc ফাইল ব্যবহার করতে চান, তবে এই ফাইলটি আপনার প্রজেক্টের মূল ডিরেক্টরিতে রাখতে হবে। এই ফাইলে আপনি সমর্থিত ব্রাউজারগুলোর জন্য নিয়মাবলী নির্ধারণ করতে পারেন।

উদাহরণ:

> 0.5%
last 2 versions
Firefox ESR
not dead

এখানে:

• > 0.5%: বিশ্বব্যাপী ব্রাউজার মার্কেট শেয়ারের 0.5% এর বেশি ব্যবহৃত ব্রাউজারগুলোকে সমর্থন করবে।
• last 2 versions: শেষ দুইটি ভার্সন সব ব্রাউজারের জন্য সমর্থিত হবে।
• Firefox ESR: Firefox এর ESR (Extended Support Release) ভার্সন সমর্থিত হবে।
• not dead: যে ব্রাউজারগুলোর আর আপডেট পাওয়া যাচ্ছে না, সেগুলোকে বাদ দেয়া হবে।

package.json এ Browserslist কনফিগারেশন

আপনি চাইলে package.json ফাইলের মধ্যে "browserslist" সেকশন ব্যবহার করে কনফিগারেশন করতে পারেন।

{
  "browserslist": [
    "> 0.5%",
    "last 2 versions",
    "Firefox ESR",
    "not dead"
  ]
}

এভাবে package.json ফাইলের মধ্যেও Browserslist কনফিগারেশন রাখা যায়।

২. BabelJS এবং Browserslist এর সংযোগ

BabelJS এর @babel/preset-env প্রিসেট ব্যবহার করার সময়, Browserslist কনফিগারেশন স্বয়ংক্রিয়ভাবে ব্যবহৃত হয়। @babel/preset-env আপনার কোডকে শুধুমাত্র সেই ব্রাউজারগুলোর জন্য ট্রান্সপাইল করবে, যেগুলো আপনি Browserslist কনফিগারেশন ফাইলে নির্ধারণ করেছেন।

Babel কনফিগারেশন উদাহরণ:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: "> 0.5%, last 2 versions, Firefox ESR, not dead"
      }
    ]
  ]
};

এখানে, @babel/preset-env প্রিসেটের মাধ্যমে BabelJS শুধুমাত্র নির্দিষ্ট ব্রাউজারগুলোর জন্য কোড ট্রান্সপাইল করবে, যা আপনি Browserslist কনফিগারেশনে উল্লেখ করেছেন।

৩. Browserslist এর স্ট্রিং সন্নিবেশ (Query)

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

সাধারণ কুয়েরি:

• last 2 versions: সর্বশেষ দুইটি ভার্সন সব ব্রাউজারের জন্য সমর্থিত।
• > 0.5%: বিশ্বব্যাপী 0.5% বা তার বেশি ব্যবহৃত ব্রাউজারগুলো।
• not dead: মৃত (dead) ব্রাউজার বাদ দিতে ব্যবহার হয়। মৃত ব্রাউজার মানে, যেগুলো আর আপডেট হয় না।
• Safari >= 10: Safari ব্রাউজারের ভার্সন 10 অথবা তার পরবর্তী ভার্সন।
• Firefox > 50: Firefox ব্রাউজারের 50 এর উপরের ভার্সন।
• Edge >= 16: Microsoft Edge ব্রাউজারের ভার্সন 16 বা তার পরবর্তী ভার্সন।

এবং কিছু উদাহরণ:

last 2 versions  # শেষ দুটি ভার্সন সব ব্রাউজারের
> 1%             # ১% বা তার বেশি ব্যবহৃত ব্রাউজার
Safari >= 10     # Safari ১০ অথবা পরবর্তী ভার্সন

৪. Autoprefixer এবং Browserslist

Autoprefixer একটি জনপ্রিয় CSS টুল, যা আপনার CSS কোডে স্বয়ংক্রিয়ভাবে সঠিক ব্রাউজার প্রিফিক্স যোগ করে দেয়। এটি Browserslist কনফিগারেশন ফাইল ব্যবহার করে এবং সেই অনুযায়ী প্রিফিক্স যোগ করে।

Autoprefixer কনফিগারেশন:

আপনি যদি Autoprefixer ব্যবহার করতে চান, তবে সেটি PostCSS এর মাধ্যমে করতে পারেন। Browserslist কনফিগারেশনটি স্বয়ংক্রিয়ভাবে Autoprefixer দ্বারা ব্যবহৃত হবে।

উদাহরণ (PostCSS কনফিগারেশন):

{
  "plugins": {
    "autoprefixer": {}
  }
}

এখানে, Autoprefixer কনফিগারেশন স্বয়ংক্রিয়ভাবে Browserslist কনফিগারেশন অনুযায়ী কাজ করবে।

৫. Browserslist এর ফিচার

Browserslist একটি শক্তিশালী কনফিগারেশন টুল যা আপনাকে শুধুমাত্র কোডের কার্যকারিতা উন্নত করতে সহায়তা করে না, বরং ব্রাউজারের গতিশীল পরিবর্তনগুলোও চিহ্নিত করতে সহায়তা করে। এটি CSS এবং JavaScript এর জন্য সমর্থিত ব্রাউজারগুলোকে নির্ধারণ করতে ব্যবহৃত হয়।

• Dynamic Query: Browserslist কনফিগারেশন ফাইলটি আপডেট করলে সেটি তৎক্ষণাৎ কার্যকর হয়।
• Cross-tool Support: এটি Babel, Autoprefixer, ESLint, Stylelint ইত্যাদির মাধ্যমে ব্যবহৃত হয়।
• Simplicity: কনফিগারেশন খুবই সহজ এবং ব্রাউজার সমর্থন সম্পর্কিত সিদ্ধান্ত নিতে সহায়ক।

সারাংশ

BabelJS এবং Browserslist একসাথে কাজ করে এবং আপনাকে সেই ব্রাউজারগুলোর জন্য কোড ট্রান্সপাইল করার সুযোগ দেয়, যেগুলোর জন্য আপনি নির্দিষ্ট কনফিগারেশন দিয়েছেন। Browserslist এর কনফিগারেশন দিয়ে আপনি কোডের কার্যকারিতা নিশ্চিত করতে পারবেন এবং একই সাথে পুরনো ব্রাউজারে আধুনিক JavaScript ফিচারগুলো ব্যবহারযোগ্য করতে পারবেন। এটি কেবলমাত্র Babel বা Autoprefixer এর মতো টুলসের সাথে কাজ করে না, বরং কোডের আপডেট এবং পরিবর্তনযোগ্যতা নিয়েও কাজ করে।