ব্রাউজার কম্প্যাটিবিলিটি ম্যানেজ করা

@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 এর মাধ্যমে আপনি কোডের কম্প্যাটিবিলিটি পরিচালনা করতে পারেন এবং প্রয়োজনীয় ফিচারগুলো ছেড়ে দেয়ার মাধ্যমে কোডকে ছোট ও দ্রুত রাখতে পারেন।