BabelJS একটি শক্তিশালী ট্রান্সপাইলার যা আধুনিক JavaScript কোডকে পুরনো JavaScript সংস্করণে রূপান্তরিত করে, যাতে এটি পুরনো বা Legacy ব্রাউজারে সঠিকভাবে কাজ করতে পারে। Legacy ব্রাউজার সাপোর্ট মানে হচ্ছে, যেসব ব্রাউজারে আধুনিক JavaScript ফিচার (যেমন ES6, ES7, JSX, অথবা Async/Await) সমর্থিত নয়, সেগুলোতে কোডটি চালানো।
যেহেতু অনেক পুরনো ব্রাউজার (যেমন Internet Explorer, পুরনো Firefox, Safari, এবং Edge) নতুন JavaScript ফিচারগুলো সঠিকভাবে সমর্থন করে না, তাই BabelJS ব্যবহার করা হয় এই ফিচারগুলোকে polyfill এবং transpile করার জন্য, যাতে কোডটি এগুলোর সাথে সামঞ্জস্যপূর্ণ হয়।
Legacy ব্রাউজার সাপোর্ট কেন গুরুত্বপূর্ণ?
বিভিন্ন পুরনো ব্রাউজারে নতুন JavaScript ফিচারগুলো সঠিকভাবে কাজ নাও করতে পারে। যেমন:
- ES6 (ECMAScript 2015) এর নতুন ফিচারগুলি (যেমন
let,const,arrow functions,classes) পুরনো ব্রাউজারে নেই। - Promises, async/await, modules (import/export) ইত্যাদি ES6 এর পরবর্তী ফিচারগুলোও পুরনো ব্রাউজারে সমর্থিত নয়।
- JSX React কোডে ব্যবহৃত হয়, যা শুধুমাত্র
React.createElement()এ ট্রান্সপাইল হয়।
এই সমস্যা সমাধানে BabelJS ব্যবহার করা হয়, যা polyfills যোগ করে এবং transpile (রূপান্তর) করে কোডটিকে পুরনো ব্রাউজারে চালানোর উপযোগী করে।
BabelJS এর মাধ্যমে Legacy ব্রাউজার সাপোর্ট যোগ করা
Legacy ব্রাউজার সাপোর্ট যোগ করার জন্য আপনাকে Babel কনফিগারেশনে কিছু অতিরিক্ত সেটিংস করতে হবে:
- @babel/preset-env ব্যবহার করা
- Polyfill যোগ করা (যদি প্রয়োজন হয়)
- Targets সেট করা
১. @babel/preset-env ব্যবহার করা
@babel/preset-env আপনার JavaScript কোডকে বর্তমান ব্রাউজার এবং নেটিভ JavaScript ফিচার অনুযায়ী রূপান্তরিত করে। আপনি কনফিগারেশনে নির্দিষ্ট করতে পারেন যে কোন ব্রাউজারগুলিকে সমর্থন করতে হবে, এবং BabelJS স্বয়ংক্রিয়ভাবে সেই ব্রাউজারগুলোর জন্য কোডটিকে ট্রান্সপাইল করবে।
.babelrc অথবা babel.config.json ফাইল কনফিগারেশন:
{
"presets": [
[
"@babel/preset-env",
{
"targets": "> 0.25%, not dead"
}
]
]
}
এখানে:
"targets": "> 0.25%, not dead": এই সেটিংটি নির্দেশ করে যে কোডটি বিশ্বের ০.২৫% বা তার বেশি ব্যবহারকারী থাকা ব্রাউজারগুলির জন্য ট্রান্সপাইল হবে এবং মৃত ব্রাউজার (যেমন Internet Explorer 10 বা পুরনো) বাদ দেওয়া হবে।- আপনি যদি নির্দিষ্ট ব্রাউজার লক্ষ্য করতে চান, তাহলে আপনি ব্রাউজারের নাম উল্লেখ করতে পারেন, যেমন:
"chrome >= 58", "firefox >= 50", ইত্যাদি।
এইভাবে, আপনি legacy বা পুরনো ব্রাউজার যেমন Internet Explorer এর জন্য কোডটিকে ট্রান্সপাইল করতে পারবেন।
২. Polyfill যোগ করা
Polyfill হলো একটি স্ক্রিপ্ট যা আধুনিক ফিচারগুলিকে পুরনো JavaScript ইঞ্জিনে সমর্থন করার জন্য প্রয়োজনীয় ফাংশনালিটি প্রদান করে। কিছু নতুন JavaScript ফিচার (যেমন Array.from(), Promise, Object.assign()) পুরনো ব্রাউজারে স্বাভাবিকভাবে কাজ করে না। আপনি core-js এবং regenerator-runtime লাইব্রেরি ব্যবহার করে এই ফিচারগুলোকে polyfill করতে পারেন।
Polyfill ব্যবহার করা:
প্রথমে আপনাকে core-js এবং regenerator-runtime ইন্সটল করতে হবে:
npm install core-js regenerator-runtime
তারপর, Babel কনফিগারেশনে polyfill যুক্ত করুন।
.babelrc কনফিগারেশন:
{
"presets": [
[
"@babel/preset-env",
{
"targets": "> 0.25%, not dead",
"useBuiltIns": "usage",
"corejs": 3
}
]
]
}
এখানে:
"useBuiltIns": "usage": BabelJS স্বয়ংক্রিয়ভাবে polyfills যোগ করবে যখন আপনি নতুন JavaScript ফিচার ব্যবহার করবেন।"corejs": 3: এটি core-js এর সংস্করণ নির্ধারণ করে, যেটি polyfill যোগ করার জন্য ব্যবহৃত হবে।
এটি BabelJS কে নির্দেশ দেয় যে শুধুমাত্র সেই ফিচারগুলির জন্য polyfills যোগ করতে হবে, যেগুলো আপনি কোডে ব্যবহার করেছেন।
৩. ব্রাউজারের জন্য টার্গেটস সেট করা
@babel/preset-env কনফিগারেশনের মধ্যে targets সেট করা খুবই গুরুত্বপূর্ণ, কারণ এটি নির্ধারণ করে যে কোন ব্রাউজারগুলোকে আপনি সাপোর্ট করতে চান।
উদাহরণ:
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": ["last 2 versions", "IE 11"]
}
}
]
]
}
এখানে:
"last 2 versions": এই সেটিংটি সর্বশেষ দুটি সংস্করণের ব্রাউজারগুলোকে সমর্থন করবে।"IE 11": এটি Internet Explorer 11 ব্রাউজারটিকে সাপোর্ট করবে।
React অ্যাপ্লিকেশনের জন্য Legacy ব্রাউজার সাপোর্ট
যদি আপনি React ব্যবহার করেন, তবে @babel/preset-react এবং @babel/preset-env একসাথে ব্যবহার করতে পারেন। React JSX কোডটিকে সাধারণ JavaScript কোডে রূপান্তর করতে এবং Legacy ব্রাউজারে সাপোর্ট যোগ করতে এই presets দুটি দরকার।
React প্রকল্পের জন্য কনফিগারেশন:
{
"presets": [
[
"@babel/preset-env",
{
"targets": "> 0.25%, not dead",
"useBuiltIns": "usage",
"corejs": 3
}
],
"@babel/preset-react"
]
}
এই কনফিগারেশনটি React কোডের জন্য JSX ট্রান্সপাইল করবে এবং Legacy ব্রাউজারগুলির জন্য JavaScript ফিচারগুলিকে polyfill করবে।
BabelJS Legacy ব্রাউজার সাপোর্ট যোগ করার জন্য অত্যন্ত গুরুত্বপূর্ণ একটি টুল। এটি @babel/preset-env এর মাধ্যমে কোডটিকে পুরনো ব্রাউজারগুলির জন্য ট্রান্সপাইল করে এবং polyfills যোগ করে নতুন JavaScript ফিচারগুলোকে পুরনো ব্রাউজারে সমর্থিত করে তোলে। Legacy ব্রাউজারগুলোর জন্য React অ্যাপ্লিকেশন বা সাধারণ JavaScript কোডের সাপোর্ট নিশ্চিত করতে আপনাকে Babel এর সঠিক কনফিগারেশন এবং polyfills ব্যবহারের মাধ্যমে এই কাজটি করতে হবে।
Read more
