প্রকাশিত: 7 মে, 2025
ফ্রন্টএন্ড কোড বেসগুলিতে ন্যূনতম সমর্থিত ব্রাউজার সংস্করণগুলি কনফিগার করার জন্য ব্রাউজারলিস্ট অন্যতম জনপ্রিয় সরঞ্জাম। বিকাশকারীরা তাদের package.json ফাইলে একটি browserslist কোয়েরি যোগ করে এবং ব্রাউজারলিস্ট ন্যূনতম সমর্থিত ব্রাউজারগুলির একটি তালিকা প্রকাশ করে। ব্রাউজারলিস্টটি জনপ্রিয় লিন্টিং, পলিফিলিং এবং প্যাকেজিং সরঞ্জামগুলির বিস্তৃত পরিসরের সাথে ব্যবহার করা যেতে পারে, যার মধ্যে রয়েছে:
- অটোপ্রিফিক্সার
- Babel ব্যবহার করে
@babel/preset-env - পোস্টসিএসএস
postcss-preset-envব্যবহার করে - ESLint
eslint-plugin-compatব্যবহার করে - Stylelint ব্যবহার করে
stylelint-no-unsupported-browser-features - ওয়েবপ্যাক
বেসলাইন টার্গেট
আপনি যখন বেসলাইন ব্যবহার করার সিদ্ধান্ত নেন, তখন আপনার ব্যবহারকারীর ভিত্তি বিবেচনা করা উচিত এবং আপনি কোন বেসলাইন বৈশিষ্ট্য সেটকে লক্ষ্য করতে চান তা নির্ধারণ করা উচিত:
- বেসলাইন ব্যাপকভাবে উপলব্ধ সমস্ত ওয়েব বৈশিষ্ট্যগুলিকে অন্তর্ভুক্ত করে যা অতীতে 30 বা তার বেশি মাস বেসলাইন কোর ব্রাউজার দ্বারা সম্পূর্ণরূপে সমর্থিত ছিল৷
- বেসলাইন বছরের বৈশিষ্ট্য সেট, উদাহরণস্বরূপ বেসলাইন 2020 , নির্দিষ্ট বছরের শেষে নতুনভাবে উপলব্ধ সমস্ত বৈশিষ্ট্য অন্তর্ভুক্ত করে।
আপনার ব্যবহারকারীর ভিত্তির উপর নির্ভর করে, আপনি ব্যাপকভাবে উপলব্ধ বেসলাইন টার্গেট করতে সক্ষম হতে পারেন, অথবা আপনাকে একটি পুরানো বেসলাইন বছর লক্ষ্য করতে হতে পারে। আপনার ব্যবহারকারীদের কোন ব্রাউজার সংস্করণ রয়েছে তা বোঝার জন্য আপনার বিশ্লেষণ বা RUM সরঞ্জামগুলির সাথে পরামর্শ করুন৷
browserslist-config-baseline ইনস্টল করুন
আপনি কোন বেসলাইন বৈশিষ্ট্য সেট টার্গেট করতে চান তা নির্ধারণ করার পরে, আপনি আপনার বিকাশকারী সরঞ্জামগুলিতে সেই লক্ষ্যটি প্রয়োগ করতে পারেন। ব্রাউজারলিস্ট ব্যবহার করে এমন যেকোনো সরঞ্জামের জন্য এটি করার সবচেয়ে সহজ উপায় হল browserslist-config-baseline ইনস্টল করা:
# npm
npm i browserslist-config-baseline@latest -D
# yarn
yarn add --latest browserslist-config-baseline -D
# bun
bun add browserslist-config-baseline@latest -d
বেসলাইন টার্গেট কিভাবে ব্যাপকভাবে উপলব্ধ
ব্যাপকভাবে উপলব্ধ বেসলাইন টার্গেট করতে, extends কীওয়ার্ড ব্যবহার করে package.json এ browserlist কনফিগারেশন আপডেট বা যোগ করুন:
{
...
"browserslist": [
"extends browserslist-config-baseline"
]
...
}
যখন browserslist তার সমর্থিত ব্রাউজারগুলির তালিকা লোড করে, browserslist-config-baseline গতিশীলভাবে বর্তমান ন্যূনতম ব্রাউজার সংস্করণগুলি তৈরি করবে যা এখন ব্যাপকভাবে উপলব্ধ সমস্ত বৈশিষ্ট্যগুলিকে সমর্থন করে। আপনি একটি .browserslistrc ফাইলে extends browserslist-config-baseline যোগ করতে পারেন এবং এটি একইভাবে পরিচালনা করা হবে।
কিভাবে বেসলাইন বছর টার্গেট
আপনি যদি একটি বেসলাইন বছরের বৈশিষ্ট্য সেট টার্গেট করতে চান, তাহলে আপনার browserslist কোয়েরির শেষে YYYY ফর্ম্যাটে একটি / এবং বছর যোগ করুন:
"browserslist": "extends browserslist-config-baseline/2020"
ডাউনস্ট্রিম ব্রাউজারগুলি কীভাবে নির্দিষ্ট করবেন
বেসলাইন কোর ব্রাউজার সেটে রয়েছে ক্রোম, এজ, ফায়ারফক্স এবং সাফারি। অন্যান্য ব্রাউজারগুলি ক্রোম এবং এজ-ক্রোমিয়াম-এর মতো একই ওপেন সোর্স কোডের উপর ভিত্তি করে তৈরি করা হয় এবং ক্রোমিয়ামের যে কোনও সংস্করণ প্রয়োগ করে সেই একই বৈশিষ্ট্য সেট সমর্থন করা উচিত।
browserslist-config-baseline baseline-browser-mapping ব্যবহার করে ব্রাউজার সংস্করণগুলিকে তারা সমর্থন করে এমন বৈশিষ্ট্যগুলির সাথে সম্পর্কযুক্ত করতে। UC ব্রাউজার মোবাইল এবং QQ ব্রাউজার মোবাইলের জন্য ম্যাপিংগুলি baseline-browser-mapping এ উপলব্ধ এবং ভবিষ্যতে অন্যান্য ব্রাউজারগুলি অন্তর্ভুক্ত হতে পারে৷
আপনার বেসলাইন কনফিগারেশনে এই ব্রাউজারগুলিকে অন্তর্ভুক্ত করতে, আপনার browserslist কনফিগারেশনে মডিউল নামের সাথে সাথেই /with-downstream যোগ করুন:
"browserslist": "extends browserslist-config-baseline/with-downstream"
বা:
"browserslist": "extends browserslist-config-baseline/with-downstream/2020"
browserslist-config-baseline উদাহরণ
প্যাকেজিং সরঞ্জামগুলিতে
আপনার সংগ্রহস্থলে browserslist-config-baseline যোগ করা তাৎক্ষণিক প্রভাব ফেলতে পারে। ব্যাবেল জাভাস্ক্রিপ্ট প্যাকেজ করার জন্য একটি জনপ্রিয় বিল্ড টুল। আপনি যদি @babel/preset-env প্যাকেজ ডিফল্ট ব্যবহার করেন, অনেক আধুনিক জাভাস্ক্রিপ্ট API এবং পদ্ধতিগুলি পুরানো ব্রাউজারগুলির জন্য প্রয়োজনীয় আরও ভার্বোস সিনট্যাক্স দিয়ে প্রতিস্থাপিত হবে:
যাইহোক, একই উদাহরণ প্রকল্পে বেসলাইন 2020 লক্ষ্য করার জন্য browserslist-config-baseline সেট করা এই জাভাস্ক্রিপ্টের আউটপুট আকারকে নাটকীয়ভাবে হ্রাস করে, কারণ কম সিনট্যাক্স রূপান্তর প্রয়োজন:
Google Chrome Labs বেসলাইন-ডেমো রিপোজিটরিতে উদাহরণ কোড ব্যবহার করে নিজের জন্য এটি চেষ্টা করুন।
লিন্টারে
কিছু লিন্টার ইতিমধ্যেই ব্রাউজারলিস্টের সাথে কাজ করে, বা একটি সামঞ্জস্য মডিউল ব্যবহার করে ব্রাউজারলিস্টের সাথে কাজ করা যেতে পারে। উদাহরণস্বরূপ, স্টাইললিন্ট স্টাইলিন্ট-ব্রাউজার-কম্প্যাট মডিউল ব্যবহার করে একটি browserslist কনফিগারেশন গ্রহণ করতে পারে। browserslist-config-baseline ব্যবহার করতে আপনার stylelint.config.js ফাইল সেট করুন:
module.exports = {
plugins: ['stylelint-browser-compat'],
rules: {
'plugin/browser-compat': [
true,
{
browserslist: ['extends browserslist-config-baseline'],
},
],
},
};
Stylelint এখন CSS ফ্ল্যাগ করবে যা বর্তমানে বেসলাইনের অংশ নয় ব্যাপকভাবে উপলব্ধ:
Stylelint একটি প্লাগইনও প্রদান করে যা আপনাকে বেসলাইন নিয়মগুলি সরাসরি সেট করতে দেয়, কিন্তু আপনি যদি ইতিমধ্যে আপনার কনফিগারেশন পরিচালনা করার জন্য ব্রাউজারলিস্ট ব্যবহার করেন, browserslist-config-baseline হল একটি ড্রপ-ইন সমাধান।
browserslist-config-baseline কীভাবে অবদান রাখবেন
আপনি যদি browserslist-config-baseline জন্য একটি বৈশিষ্ট্য অনুরোধ করতে চান, একটি সমস্যা তৈরি করুন বা GitHub সংগ্রহস্থলে অনুরোধ করুন।
আপনি যদি আরও ডাউনস্ট্রিম ব্রাউজার ডেটাতে অবদান রাখতে চান বা কোনও ডেটা সমস্যা রিপোর্ট করতে চান, baseline-browser-mapping রিপোজিটরিতে একটি সমস্যা বা একটি টান অনুরোধ তৈরি করুন ।