BabelJS এর @babel/preset-env একটি শক্তিশালী এবং অত্যন্ত ব্যবহৃত preset যা আপনার কোডকে নির্দিষ্ট target environment অনুযায়ী ট্রান্সপাইল (রূপান্তর) করতে সহায়তা করে। এর মাধ্যমে আপনি আপনার কোডটি বিভিন্ন ব্রাউজার, Node.js ভার্সন, বা অন্যান্য JavaScript রানটাইম প্ল্যাটফর্মে চালানোর উপযোগী করতে পারেন।
এটি সাধারণত পুরনো ব্রাউজার বা পরিবেশে আধুনিক JavaScript কোড (যেমন ES6, ES7+) চালানোর জন্য ব্যবহার করা হয়, যাতে আপনার কোডটির সর্বোচ্চ সম্ভাব্য সামঞ্জস্যতা নিশ্চিত হয়।
@babel/preset-env এর কাজ
@babel/preset-env আপনার target environment এর উপর ভিত্তি করে কোডের ট্রান্সফর্মেশন এবং polyfill প্রয়োগ করে। এটি প্রধানত দুইটি কাজ করে:
- সিনট্যাক্স ট্রান্সফরমেশন: আধুনিক JavaScript সিনট্যাক্স (যেমন arrow functions, classes, modules ইত্যাদি) কে পুরনো ভার্সনে রূপান্তরিত করা, যাতে পুরনো ব্রাউজার বা পরিবেশে কাজ করতে পারে।
- Polyfills যোগ করা: নতুন JavaScript ফিচার (যেমন
Promise,Array.from,Object.assignইত্যাদি) যদি ব্রাউজারে সাপোর্ট না থাকে, তাহলে স্বয়ংক্রিয়ভাবে polyfills যোগ করা, যাতে ওই ফিচারগুলো সঠিকভাবে কাজ করে।
টার্গেট Environment কনফিগারেশন
@babel/preset-env টার্গেট পরিবেশ কনফিগার করার জন্য বিভিন্ন অপশন প্রদান করে। এর মাধ্যমে আপনি কোন ব্রাউজার বা JavaScript রানটাইমের জন্য কোডটি তৈরি করবেন, তা নির্ধারণ করতে পারেন। এটি সাধারণত targets ফিল্ড ব্যবহার করে কনফিগার করা হয়।
১. targets অপশন
targets অপশনটি আপনাকে নির্দিষ্ট করে দিতে পারে যে, আপনি কোডটি কোন ব্রাউজার বা JavaScript ভার্সনের জন্য রূপান্তর করতে চান। এটি কয়েকটি উপায়ে কনফিগার করা যেতে পারে:
১.১ ব্রাউজার অনুযায়ী টার্গেট
আপনি ব্রাউজারের নাম এবং ভার্সন অনুযায়ী টার্গেট করতে পারেন। উদাহরণস্বরূপ, যদি আপনি কোডটি Chrome 58 এবং Firefox 50 এর জন্য সমর্থিত করতে চান, তাহলে আপনি এইভাবে কনফিগার করবেন:
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": ["Chrome 58", "Firefox 50"]
}
}
]
]
}
১.২ ব্রাউজারের বাজার শেয়ার অনুযায়ী টার্গেট
আপনি ব্রাউজারের বাজার শেয়ার অনুযায়ীও টার্গেট করতে পারেন। উদাহরণস্বরূপ, আপনি যেসব ব্রাউজারের বাজার শেয়ার 1% বা তার বেশি, সেগুলোর জন্য কোডটি ট্রান্সপাইল করতে চাইলে:
{
"presets": [
[
"@babel/preset-env",
{
"targets": "> 1%, not dead"
}
]
]
}
এখানে:
> 1%মানে বাজারে ১% বা তার বেশি শেয়ার রয়েছে এমন ব্রাউজার।not deadমানে মারা যাওয়া ব্রাউজারগুলি বাদ দেওয়া।
১.৩ ব্রাউজারের সর্বশেষ সংস্করণ
আপনি ব্রাউজারের সর্বশেষ দুটি ভার্সন লক্ষ্য করতে চাইলে:
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"browsers": ["last 2 versions"]
}
}
]
]
}
এখানে, last 2 versions অর্থ হলো ব্রাউজারের সর্বশেষ দুটি ভার্সন।
১.৪ Node.js ভার্সন অনুযায়ী টার্গেট
আপনি Node.js এর নির্দিষ্ট ভার্সনের জন্য কোডটি ট্রান্সপাইল করতে চাইলে:
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "14"
}
}
]
]
}
এখানে, node: "14" Node.js এর ১৪ তম সংস্করণের জন্য কোডটি ট্রান্সপাইল করবে।
২. useBuiltIns এবং corejs অপশন
যদি আপনার টার্গেট পরিবেশে কিছু আধুনিক JavaScript ফিচার বা API (যেমন Array.from, Promise ইত্যাদি) না থাকে, তাহলে আপনি polyfills ব্যবহার করতে পারেন। useBuiltIns এবং corejs অপশন দুটি আপনাকে এই পলিফিলগুলো স্বয়ংক্রিয়ভাবে অন্তর্ভুক্ত করতে সহায়তা করবে।
২.১ useBuiltIns
useBuiltIns: "entry": এই অপশন ব্যবহার করলে, আপনাকেcore-jsএবংregenerator-runtimeডিপেন্ডেন্সি ফাইলগুলোimportকরতে হবে এবং এটি প্রয়োজনীয় polyfills ইনক্লুড করবে।useBuiltIns: "usage": এই অপশন ব্যবহার করলে, শুধুমাত্র আপনার কোডে ব্যবহৃত ফিচারগুলোর জন্য polyfills যোগ করা হবে।
২.২ corejs
corejs অপশনটি নির্ধারণ করে কোন ভার্সনের core-js পলিফিলগুলো ব্যবহার করতে চান। corejs এর দুটি ভার্সন রয়েছে: 2.x এবং 3.x।
উদাহরণ:
{
"presets": [
[
"@babel/preset-env",
{
"targets": "> 0.25%, not dead",
"useBuiltIns": "usage",
"corejs": 3
}
]
]
}
এখানে:
useBuiltIns: "usage": কেবলমাত্র আপনার কোডে ব্যবহৃত ফিচারগুলোর জন্য polyfills অন্তর্ভুক্ত হবে।corejs: 3: Core-js এর ৩য় ভার্সন ব্যবহার করা হবে।
৩. Force All Polyfills
আপনি যদি সবগুলো polyfills ইনক্লুড করতে চান, তবে useBuiltIns: "entry" এর সাথে আপনাকে polyfills এর জন্য ম্যানুয়ালি import করতে হবে:
import "core-js";
import "regenerator-runtime/runtime";
এভাবে সবগুলোর জন্য পলিফিলস যোগ করা হবে।
সারাংশ
@babel/preset-env এর মাধ্যমে আপনি target environment কনফিগার করতে পারেন এবং সেই অনুযায়ী কোডটিকে ট্রান্সপাইল করতে পারেন। targets অপশনটি আপনাকে নির্দিষ্ট ব্রাউজার বা Node.js ভার্সন কনফিগার করার সুযোগ দেয়। এর সাথে আপনি useBuiltIns এবং corejs অপশন ব্যবহার করে স্বয়ংক্রিয়ভাবে polyfills অন্তর্ভুক্ত করতে পারেন।
এটি মূলত কোডটিকে সব ধরণের পুরনো পরিবেশে চলার উপযোগী করে তোলে, যাতে আপনার JavaScript কোডটি সর্বোচ্চ সংখ্যক ব্রাউজার এবং প্ল্যাটফর্মে কাজ করতে পারে।
