@babel/preset-env:

@babel/preset-env হল একটি Babel preset যা ES6 (বা তার পরবর্তী সংস্করণ) থেকে ES5 এ কোড ট্রান্সপাইল করতে ব্যবহৃত হয়। এটি এমন একটি শক্তিশালী টুল যা কাস্টমাইজেশন এবং অটোমেটিক ব্রাউজার সমর্থন পরিচালনার মাধ্যমে JavaScript কোডের সাম্প্রতিক বৈশিষ্ট্যগুলোকে পুরনো ব্রাউজার বা পরিবেশের জন্য উপযুক্ত করে তোলে।

@babel/preset-env কী?

@babel/preset-env একটি অত্যন্ত জনপ্রিয় Babel preset যা আপনার কোডের সব আধুনিক ফিচার (যেমন, arrow functions, async/await, destructuring) কে এমনভাবে ট্রান্সপাইল করে, যাতে তা পুরনো JavaScript ইঞ্জিন (যেমন, ES5) দ্বারা সঠিকভাবে কাজ করে। এটি মডার্ন JavaScript কোডকে পুরনো কোডে রূপান্তরিত করার কাজটি সহজ করে এবং Polyfill ব্যবহারের মাধ্যমে প্রাচীন ব্রাউজারগুলির জন্য প্রয়োজনীয় ফিচারগুলো অন্তর্ভুক্ত করতে পারে।

এটি একটি অত্যন্ত কাস্টমাইজযোগ্য preset, যার মাধ্যমে আপনি নির্দিষ্ট ব্রাউজার বা এনভায়রনমেন্টের জন্য আপনার কোডটি ট্রান্সপাইল করতে পারেন।

@babel/preset-env এর সুবিধা

1. ব্যবহারকারী নির্ধারিত ব্রাউজার সাপোর্ট: আপনি নির্দিষ্ট ব্রাউজার বা সংস্করণ চয়ন করে আপনার কোডকে ট্রান্সপাইল করতে পারেন। উদাহরণস্বরূপ, আপনি চাইলে IE 11, Chrome 80, বা Safari 10 এর জন্য কোড ট্রান্সপাইল করতে পারেন।
2. স্বয়ংক্রিয় Polyfill ব্যবস্থাপনা: আপনি যে ফিচারগুলি ব্যবহার করছেন, তা ব্রাউজারে সঠিকভাবে কাজ করার জন্য স্বয়ংক্রিয়ভাবে প্রয়োজনীয় polyfill গুলো অন্তর্ভুক্ত করে। উদাহরণস্বরূপ, যদি আপনি Promise ব্যবহার করেন এবং ব্রাউজারটি এটি সমর্থন না করে, তাহলে এটি Babel এর মাধ্যমে polyfill হিসেবে যুক্ত হয়ে যাবে।
3. কাস্টমাইজেশন: আপনি targets, useBuiltIns, এবং corejs এর মতো বিভিন্ন কনফিগারেশন অপশন ব্যবহার করে আপনার প্রজেক্টের জন্য উপযুক্ত কনফিগারেশন তৈরি করতে পারেন।
4. কমপাইলিংকে সহজ করে: ES6 থেকে ES5 তে কোড ট্রান্সপাইল করতে এটি সহজ এবং সরল পদ্ধতি প্রদান করে, যার ফলে আপনি পুরনো ব্রাউজারেও আধুনিক কোড রান করাতে পারেন।

@babel/preset-env কনফিগারেশন

@babel/preset-env ব্যবহার করতে, প্রথমে এটি ইনস্টল করতে হবে এবং তারপর কনফিগারেশন ফাইলে এটি সংযুক্ত করতে হবে।

Step 1: Install @babel/preset-env

npm install --save-dev @babel/preset-env

Step 2: Babel কনফিগারেশন ফাইলে সেটআপ

Babel এর কনফিগারেশন ফাইলে (যেমন .babelrc অথবা babel.config.js) @babel/preset-env যোগ করতে হবে।

উদাহরণ (বাবেল কনফিগারেশন)

.babelrc

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

এছাড়া আপনি কাস্টম টার্গেটিং (targeting) এবং polyfill ব্যবস্থাপনার জন্য আরো সেটিংস দিতে পারেন। নিচে কিভাবে তা করবেন তা দেখানো হলো।

Step 3: কাস্টম টার্গেটস সেট করা

target ব্যবহার করে আপনি কোন ব্রাউজার বা Node.js ভার্সনের জন্য কোডটি ট্রান্সপাইল করতে চান তা নির্দিষ্ট করতে পারেন।

উদাহরণ: IE 11 এবং Chrome 80 এর জন্য কোড ট্রান্সপাইল করা

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

এখানে:

• "browsers" অপশনে ব্রাউজারের ভার্সন এবং জনপ্রিয়তার ভিত্তিতে কোড ট্রান্সপাইল হবে।
• "last 2 versions" মানে শেষ দুটি ব্রাউজার সংস্করণ সমর্থিত হবে।

Step 4: Polyfills সহ কাজ করা

Babel polyfill ব্যবহারের মাধ্যমে নতুন ফিচারগুলিকে পুরনো ব্রাউজারেও কাজ করার উপযোগী করে তোলে। আপনি যদি polyfill ব্যবহার করতে চান, তাহলে useBuiltIns এবং corejs অপশন ব্যবহার করতে হবে।

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

এখানে:

• useBuiltIns: "entry": এর মানে হল যে polyfill গুলি কেবল তখনই লোড হবে যখন আপনি import "core-js"; বা import "regenerator-runtime/runtime"; যোগ করবেন।
• corejs: 3: এটি polyfill গুলোর ভার্সন নির্দিষ্ট করে (যেমন, core-js ভার্সন 3)।

আপনি যদি চাইলে useBuiltIns অপশনে "usage" ব্যবহার করতে পারেন, যাতে শুধুমাত্র আপনার কোডে ব্যবহৃত ফিচারগুলির জন্য polyfill লোড হয়।

@babel/preset-env এর অপশনসমূহ

1. targets: আপনার কোড কোন পরিবেশে চলবে তা নির্দিষ্ট করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, ব্রাউজার বা Node.js সংস্করণ।
2. useBuiltIns: polyfill ব্যবহারের কিভাবে তা পরিচালনা করবে, যেমন "entry" বা "usage"।
3. corejs: polyfill গুলি কোন ভার্সনের জন্য ব্যবহার করা হবে তা নির্দিষ্ট করা।
4. modules: মডিউল সিস্টেমটি কোন ফরম্যাটে থাকবে তা নির্ধারণ করা। উদাহরণস্বরূপ, false, "commonjs", "umd" ইত্যাদি।

@babel/preset-env এর উদাহরণ কনফিগারেশন

babel.config.js (নতুন ফিচারের জন্য কাস্টম কনফিগারেশন)

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: '> 0.25%, not dead',  // সর্বাধিক জনপ্রিয় ব্রাউজার
        useBuiltIns: 'usage',           // ব্যবহৃত ফিচারের জন্য polyfill
        corejs: 3,                     // core-js ভার্সন 3 ব্যবহার
      },
    ],
  ],
};

@babel/preset-env এর উপকারিতা

1. কাস্টমাইজেশন: আপনি আপনার প্রজেক্টের জন্য খুবই নির্দিষ্ট কনফিগারেশন তৈরি করতে পারেন, যেমন কোন ব্রাউজার বা Node.js সংস্করণের জন্য কোড ট্রান্সপাইল করা হবে।
2. Polyfill ব্যবস্থাপনা: useBuiltIns এবং corejs এর মাধ্যমে স্বয়ংক্রিয়ভাবে polyfills অন্তর্ভুক্ত করতে পারে।
3. কমপাইলিং সহজ করে: একটি কনফিগারেশন দিয়ে আপনি কোডের আধুনিক বৈশিষ্ট্যগুলোকে পুরনো ব্রাউজার বা পরিবেশে সমর্থনযোগ্য করে ফেলতে পারেন।

সারাংশ

@babel/preset-env হল একটি অত্যন্ত শক্তিশালী Babel preset যা আধুনিক JavaScript ফিচারগুলোকে পুরনো ব্রাউজার বা Node.js পরিবেশের জন্য উপযোগী করে তোলে। এটি কাস্টমাইজযোগ্য, স্বয়ংক্রিয়ভাবে polyfill অন্তর্ভুক্ত করতে পারে এবং একটি নির্দিষ্ট টার্গেট প্ল্যাটফর্মের জন্য কোড ট্রান্সপাইল করতে সাহায্য করে। এটি JavaScript ডেভেলপমেন্টকে সহজ এবং কার্যকরী করে তোলে, বিশেষত যখন পুরনো ব্রাউজার সাপোর্ট করা প্রয়োজন।

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, এবং অন্যান্য অপশনগুলি ব্যবহার করে আপনি কীভাবে কোডটি ট্রান্সপাইল হবে তা নিয়ন্ত্রণ করতে পারেন।

@babel/preset-env হলো একটি Babel preset যা আপনার JavaScript কোডকে সেই ব্রাউজার বা প্ল্যাটফর্মের জন্য ট্রান্সপাইল (transpile) করে, যেখানে এটি চলবে। এটি মূলত ES6 (বা তার পরবর্তী সংস্করণ) এর নতুন ফিচারগুলোকে পুরনো ব্রাউজারে কাজ করার জন্য সমর্থনযোগ্য (backward compatible) কোডে রূপান্তর করে। এই preset ব্যবহার করে আপনি নির্দিষ্ট ব্রাউজার বা প্ল্যাটফর্মের জন্য কোডকে কাস্টমাইজ করতে পারেন, যাতে কোড শুধুমাত্র সেইসব ফিচারগুলো অন্তর্ভুক্ত করে যা আপনার লক্ষ্য প্ল্যাটফর্মে সমর্থিত।

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

@babel/preset-env আপনার কোডকে এমনভাবে রূপান্তরিত করে যাতে তা আধুনিক JavaScript ফিচার (যেমন arrow functions, async/await, etc.) পুরনো বা সীমিত ব্রাউজারে সমর্থিত হয়। এটি কনফিগারেশনের মাধ্যমে আপনাকে নির্দেশ দেয় যে, আপনি কোন ব্রাউজারগুলোতে আপনার কোড চালাতে চান এবং সেই অনুযায়ী কোড ট্রান্সপাইল করা হয়।

@babel/preset-env ব্রাউজার কম্প্যাটিবিলিটি পরিচালনার জন্য দুইটি মূল পদ্ধতি ব্যবহার করে:

1. ব্যবহারকারীর পছন্দের ব্রাউজার নির্ধারণ (Targets): আপনি কোন ব্রাউজারে বা JavaScript রuntime-এ কোড রান করতে চান তা নির্দিষ্ট করতে পারেন।
2. polyfills এবং transformations: এটি প্রয়োজনীয় polyfills এবং transformations যোগ করে, যাতে পুরনো ব্রাউজারগুলো নতুন ফিচারগুলো বুঝতে পারে।

ব্রাউজার বা প্ল্যাটফর্ম নির্ধারণ করা

@babel/preset-env কনফিগার করার সময় আপনি targets অপশন ব্যবহার করে নির্দিষ্ট করতে পারেন যে কোন ব্রাউজার বা প্ল্যাটফর্মের জন্য কোডটিকে ট্রান্সপাইল করা হবে।

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

1. ব্রাউজার সাপোর্টের জন্য targets:

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

এখানে:

• > 0.25%: বিশ্বের ০.২৫% ব্রাউজারের জন্য কোডটিকে সমর্থনযোগ্য করতে বলছে।
• not dead: অর্থাৎ, যে ব্রাউজারগুলো আর ব্যবহার হয় না বা যেগুলোর সাপোর্ট বন্ধ হয়ে গেছে (যেমন Internet Explorer 10), সেগুলোর জন্য কোড রূপান্তর করতে চাইছে না।

2. নির্দিষ্ট ব্রাউজার নির্ধারণ:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "58",
          "firefox": "54",
          "safari": "10"
        }
      }
    ]
  ]
}

এখানে কোড শুধুমাত্র Chrome 58, Firefox 54, এবং Safari 10 এর জন্য ট্রান্সপাইল হবে।

3. ব্রাউজার ভার্সন রেঞ্জ:

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

এখানে last 2 versions নির্দেশ করছে যে, কোডটি সর্বশেষ দুইটি ভার্সনের সকল ব্রাউজারের জন্য সমর্থনযোগ্য হবে।

4. Node.js রuntime এর জন্য:

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "node": "10"
        }
      }
    ]
  ]
}

এখানে node: "10" ব্যবহার করে Node.js এর ভার্সন 10 এর জন্য কোডটিকে ট্রান্সপাইল করতে বলা হচ্ছে।

Polyfill সমর্থন

Polyfills হলো কোডের ছোট অংশ যা পুরনো ব্রাউজারে নতুন JavaScript ফিচারগুলো সমর্থনযোগ্য করে তোলে। যেমন, যদি আপনার কোডে Promise বা Object.assign ব্যবহার করা থাকে, তাহলে পুরনো ব্রাউজারে এই ফিচারগুলো কাজ না করার সম্ভাবনা থাকে। @babel/preset-env এই সমস্যা সমাধান করতে সাহায্য করে, যাতে প্রয়োজনীয় polyfills স্বয়ংক্রিয়ভাবে কোডে যুক্ত হয়।

Polyfill যোগ করার জন্য দুটি প্রধান পদ্ধতি:

1. UseBuiltIns: "usage": এই অপশনটি ব্যবহার করলে, Babel শুধুমাত্র আপনার কোডে যেসব নতুন ফিচার ব্যবহার করা হয়েছে তা সাপোর্ট করার জন্য polyfills যোগ করবে। এটি সবচেয়ে কার্যকরী পদ্ধতি, কারণ এতে অব্যবহৃত polyfill গুলো অন্তর্ভুক্ত করা হয় না।

   উদাহরণ:

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

   এখানে:

   • useBuiltIns: "usage": কেবলমাত্র কোডে ব্যবহৃত নতুন ফিচারগুলির জন্য polyfills যুক্ত করবে।
   • corejs: 3: core-js লাইব্রেরির ৩য় সংস্করণ ব্যবহার করে polyfill গুলি যোগ করা হবে।

2. UseBuiltIns: "entry": এই অপশনটি ব্যবহার করলে, আপনাকে core-js এবং regenerator-runtime এর entry পয়েন্টগুলো নিজে যোগ করতে হবে। এটি পুরো প্রজেক্টের জন্য polyfills লোড করবে।

   উদাহরণ:

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

   এই ক্ষেত্রে আপনাকে আপনার কোডের entry ফাইলে polyfill যোগ করতে হবে:

   import "core-js";
   import "regenerator-runtime/runtime";
   

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

• loose: এই অপশনটি ব্যবহার করলে, Babel কিছু ফিচারের ট্রান্সপাইলিংয়ের সময় আরও বেশি অনুমতি দেয়, যাতে কোড ছোট হয় এবং আরও দ্রুত চলে, তবে এতে কিছু বৈশিষ্ট্য ক্ষতিগ্রস্ত হতে পারে।

  {
    "presets": [
      [
        "@babel/preset-env",
        {
          "loose": true
        }
      ]
    ]
  }
  

• modules: এই অপশনটি false করলে, Babel মডিউল সিস্টেমটি পরিবর্তন করবে না (যেমন ES মডিউল)। এটি আপনার কোডকে ক্লায়েন্ট সাইডে সহজে বান্ধব করবে।

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

সারাংশ

@babel/preset-env হল একটি শক্তিশালী Babel preset যা ES6 এবং পরবর্তী সংস্করণের ফিচারগুলোকে এমনভাবে রূপান্তরিত করে, যাতে তা শুধুমাত্র আপনার লক্ষ্য ব্রাউজার বা প্ল্যাটফর্মে সমর্থিত হয়। এটি আপনাকে targets অপশনের মাধ্যমে নির্দিষ্ট ব্রাউজার বা Node.js সংস্করণ নির্ধারণের সুবিধা দেয় এবং polyfills যোগ করতে সাহায্য করে, যাতে আপনার কোড পুরনো ব্রাউজারেও ঠিকভাবে কাজ করে। @babel/preset-env এর মাধ্যমে আপনি কোডের কম্প্যাটিবিলিটি পরিচালনা করতে পারেন এবং প্রয়োজনীয় ফিচারগুলো ছেড়ে দেয়ার মাধ্যমে কোডকে ছোট ও দ্রুত রাখতে পারেন।

BabelJS এর @babel/preset-env একটি শক্তিশালী এবং অত্যন্ত ব্যবহৃত preset যা আপনার কোডকে নির্দিষ্ট target environment অনুযায়ী ট্রান্সপাইল (রূপান্তর) করতে সহায়তা করে। এর মাধ্যমে আপনি আপনার কোডটি বিভিন্ন ব্রাউজার, Node.js ভার্সন, বা অন্যান্য JavaScript রানটাইম প্ল্যাটফর্মে চালানোর উপযোগী করতে পারেন।

এটি সাধারণত পুরনো ব্রাউজার বা পরিবেশে আধুনিক JavaScript কোড (যেমন ES6, ES7+) চালানোর জন্য ব্যবহার করা হয়, যাতে আপনার কোডটির সর্বোচ্চ সম্ভাব্য সামঞ্জস্যতা নিশ্চিত হয়।

@babel/preset-env এর কাজ

@babel/preset-env আপনার target environment এর উপর ভিত্তি করে কোডের ট্রান্সফর্মেশন এবং polyfill প্রয়োগ করে। এটি প্রধানত দুইটি কাজ করে:

1. সিনট্যাক্স ট্রান্সফরমেশন: আধুনিক JavaScript সিনট্যাক্স (যেমন arrow functions, classes, modules ইত্যাদি) কে পুরনো ভার্সনে রূপান্তরিত করা, যাতে পুরনো ব্রাউজার বা পরিবেশে কাজ করতে পারে।
2. 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 কোডটি সর্বোচ্চ সংখ্যক ব্রাউজার এবং প্ল্যাটফর্মে কাজ করতে পারে।