এর কাজ কী?

BabelJS এর মধ্যে @babel/preset-env একটি অত্যন্ত শক্তিশালী এবং জনপ্রিয় preset (প্রিসেট) যা JavaScript কোডকে পুরনো ব্রাউজার বা পরিবেশে চলার মতো রূপান্তরিত করতে ব্যবহৃত হয়। এটি ES6 বা পরবর্তী JavaScript সংস্করণ (যেমন ES7, ES8) কে পুরনো সংস্করণে রূপান্তরিত করার জন্য বিভিন্ন প্লাগিন এবং ট্রান্সফরমেশন ব্যবহার করে।

@babel/preset-env এর কাজ

@babel/preset-env মূলত আপনার বর্তমান JavaScript কোডটি পর্যালোচনা করে এবং প্রয়োজনীয় ট্রান্সফরমেশন এবং প্লাগিনসমূহ নির্বাচন করে, যাতে কোডটি একটি নির্দিষ্ট ব্রাউজার বা পরিবেশে সঠিকভাবে কাজ করতে পারে। এটি মডার্ন JavaScript ফিচারগুলো (যেমন, Arrow Functions, Promises, Class, Destructuring) কে পুরনো JavaScript সংস্করণ (ES5) তে রূপান্তর করে।

@babel/preset-env এর কাজের প্রধান দিকগুলো

1. ব্রাউজার বা পরিবেশের জন্য ট্রান্সফরমেশন
   @babel/preset-env এর মাধ্যমে আপনি নির্দিষ্ট ব্রাউজার বা পরিবেশের জন্য ট্রান্সপাইলিং (transpiling) করতে পারেন। উদাহরণস্বরূপ, আপনি যদি বলতে চান যে আপনার কোডটি শুধুমাত্র Internet Explorer 11 বা আধুনিক Chrome, Firefox এবং Safari ব্রাউজারে কাজ করবে, তাহলে preset-env সেই অনুযায়ী কোডটি ট্রান্সপাইল করবে।
2. Polyfills যোগ করা
   যেসব নতুন JavaScript ফিচারগুলি পুরনো ব্রাউজার বা পরিবেশে সমর্থিত নয় (যেমন Array.prototype.includes বা Promise), preset-env স্বয়ংক্রিয়ভাবে প্রয়োজনীয় polyfills যুক্ত করবে। Polyfills হল এমন স্ক্রিপ্ট যা নতুন ফিচারগুলোর সমর্থন আনতে পুরনো ব্রাউজারে যোগ করা হয়।

3. আপনার টার্গেট নির্ধারণ
   preset-env ব্যবহার করার সময় আপনি target environments নির্ধারণ করতে পারেন, যেমন:

   • ব্রাউজারের সংস্করণ (যেমন, Chrome 80, Firefox 70)
   • Node.js এর সংস্করণ
   • বা এমনকি সাধারণ “last 2 versions” বা “> 0.25%” (সবচেয়ে জনপ্রিয় ব্রাউজার) এর মতো কভারেজ ব্যবহার করা যায়।

   উদাহরণ:

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "targets": "> 0.25%, not dead"
         }
       ]
     ]
   }
   

   এখানে "targets": "> 0.25%, not dead" এর মানে হল যে preset-env কোডটিকে শুধুমাত্র এমন ব্রাউজারে ট্রান্সপাইল করবে যেগুলোর বাজারে জনপ্রিয়তা 0.25% এর বেশি, এবং dead ব্রাউজার (যেগুলো আর আপডেট হয় না) বাদ দেবে।

4. স্মার্ট ট্রান্সফরমেশন
   preset-env স্মার্টভাবে কোড ট্রান্সফর্ম করে শুধুমাত্র সেই ফিচারগুলো ট্রান্সপাইল করে যা টার্গেট পরিবেশে সমর্থিত নয়। এর ফলে কোডের সাইজ কম থাকে এবং অপ্রয়োজনীয় ট্রান্সফরমেশন হয় না।

@babel/preset-env কিভাবে কাজ করে?

এটি কাজ করে নির্দিষ্ট কনফিগারেশন ও টার্গেট পরিবেশের উপর ভিত্তি করে। যখন আপনি @babel/preset-env ব্যবহার করেন, এটি আপনার কোডের জন্য উপযুক্ত প্লাগিন এবং ট্রান্সফরমেশন নির্বাচন করে এবং আপনার নির্ধারিত টার্গেট ব্রাউজারে কাজ করার জন্য কোডটি রূপান্তর করে।

উদাহরণ:

1. targets অপশন দিয়ে নির্দিষ্ট পরিবেশ লক্ষ্য করা
   ধরুন আপনি আপনার কোডটিকে Internet Explorer 11 এবং সর্বশেষ দুইটি Chrome সংস্করণের জন্য ট্রান্সপাইল করতে চান:

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "targets": {
             "browsers": ["IE 11", "last 2 versions"]
           }
         }
       ]
     ]
   }
   

2. useBuiltIns এবং corejs অপশন
   আপনার কোডে যেসব নতুন JavaScript ফিচার রয়েছে, সেগুলোর জন্য Polyfills যুক্ত করার জন্য আপনি useBuiltIns অপশন এবং corejs সংস্করণ ব্যবহার করতে পারেন। এতে আপনি কোন JavaScript ফিচারগুলো Polyfill করতে চান তা নির্ধারণ করতে পারবেন।

   উদাহরণ:

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "useBuiltIns": "entry",
           "corejs": 3
         }
       ]
     ]
   }
   

   এখানে:

   • useBuiltIns: "entry" অর্থ হল যে আপনাকে আপনার অ্যাপ্লিকেশনের প্রধান এন্ট্রি ফাইলে import "core-js"; যোগ করতে হবে।
   • corejs: 3 দ্বারা আপনি নির্দিষ্ট করেন যে Polyfill এর জন্য core-js এর 3rd সংস্করণ ব্যবহার হবে।

@babel/preset-env এর অন্যান্য অপশন

1. modules: এটি নির্ধারণ করে যে আপনি মডিউল সিস্টেমের জন্য কী ধরনের ট্রান্সফরমেশন চান। আপনি যদি Webpack বা Rollup এর মতো বান্ডলার ব্যবহার করেন, তাহলে আপনি মডিউল সিস্টেমকে false হিসেবে সেট করতে পারেন যাতে মডিউলগুলো ES6 মডিউল হিসেবে থাকে এবং বাণ্ডলিং সময় এগুলি প্রক্রিয়া করা হয়।

   উদাহরণ:

   {
     "presets": [
       [
         "@babel/preset-env",
         {
           "modules": false
         }
       ]
     ]
   }
   

2. shippedProposals: এটি ES বৈশিষ্ট্যগুলির ভবিষ্যত সংস্করণ যা সম্ভবত ব্রাউজারে শিপ হবে, তাদের জন্য Polyfill যোগ করার জন্য ব্যবহৃত হয়।

সারাংশ

@babel/preset-env হলো একটি অত্যন্ত শক্তিশালী টুল যা ES6 এবং পরবর্তী সংস্করণের JavaScript কোডকে পুরনো ব্রাউজার এবং পরিবেশের সাথে সামঞ্জস্যপূর্ণ করতে রূপান্তরিত করে। এটি আপনার নির্দিষ্ট target environments অনুসারে কেবলমাত্র প্রয়োজনীয় প্লাগিন এবং Polyfills যোগ করে, ফলে কোডের সাইজ কম হয় এবং কার্যকারিতা বজায় থাকে। targets, useBuiltIns, corejs, এবং অন্যান্য অপশনগুলি ব্যবহার করে আপনি কীভাবে কোডটি ট্রান্সপাইল হবে তা নিয়ন্ত্রণ করতে পারেন।