@babel/polyfill এর ব্যবহার এবং কনফিগারেশন

@babel/polyfill ছিল একটি পুরোনো Babel প্যাকেজ যা JavaScript polyfills যোগ করার জন্য ব্যবহৃত হতো। এটি core-js এবং regenerator-runtime সহ আনে, যা পুরনো ব্রাউজারে আধুনিক JavaScript ফিচারগুলোর (যেমন Promise, Array.from, async/await ইত্যাদি) সমর্থন যোগ করে।

তবে, Babel 7.4.0 থেকে @babel/polyfill প্যাকেজটি ডিপ্রিকেটেড (deprecated) হয়ে গেছে এবং এর স্থলে core-js এবং regenerator-runtime ব্যবহার করার পরামর্শ দেওয়া হয়েছে। এখন, যদি আপনি polyfills ব্যবহার করতে চান, আপনাকে আলাদাভাবে core-js এবং regenerator-runtime ইন্সটল করতে হবে এবং @babel/preset-env এর সাথে কনফিগার করতে হবে।

@babel/polyfill এর পূর্বে ব্যবহার

Babel 7 এর আগে, @babel/polyfill ব্যবহার করা হত JavaScript কোডে প্রয়োজনীয় polyfills এবং async/await এর জন্য সমর্থন যোগ করার জন্য।

উদাহরণ:

npm install --save @babel/polyfill

main.js

import "@babel/polyfill";

// Promise, Array.from ইত্যাদি আধুনিক ফিচারের ব্যবহার

এখানে @babel/polyfill ইনপোর্ট করলে এটি কোডে আধুনিক JavaScript ফিচারগুলো অটোমেটিকালি polyfill করে দিত।

core-js এবং regenerator-runtime এর সাথে বর্তমান কনফিগারেশন

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

১. core-js এবং regenerator-runtime ইনস্টল করা

যেহেতু @babel/polyfill আর ব্যবহার হয় না, আপনি core-js এবং regenerator-runtime আলাদাভাবে ইনস্টল করতে হবে:

npm install --save core-js regenerator-runtime

২. @babel/preset-env কনফিগার করা

এখন আপনাকে @babel/preset-env কনফিগার করতে হবে যাতে polyfills যুক্ত করা হয়। আপনি useBuiltIns এবং corejs অপশন দিয়ে এই কনফিগারেশনটি করতে পারবেন।

উদাহরণ:

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

এখানে:

• useBuiltIns: "entry": আপনাকে core-js এবং regenerator-runtime ম্যানুয়ালি ইনপোর্ট করতে হবে (যেমন নিচে দেখানো হয়েছে), এবং প্রয়োজনীয় polyfills ইনক্লুড হবে।
• corejs: 3: core-js এর ৩য় ভার্সন ব্যবহার করতে বলা হচ্ছে।

main.js ফাইলে:

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

// এখানে আপনার JavaScript কোড থাকবে

এখন, core-js এবং regenerator-runtime ম্যানুয়ালি ইনপোর্ট করে আপনার কোডে polyfills অন্তর্ভুক্ত করতে হবে।

৩. useBuiltIns অপশনের বিকল্পসমূহ

Babel এ useBuiltIns এর দুটি বিকল্প রয়েছে:

• useBuiltIns: "entry": এই অপশনটি ব্যবহার করলে আপনাকে নিজে core-js এবং regenerator-runtime ইনপোর্ট করতে হবে এবং polyfills স্বয়ংক্রিয়ভাবে যোগ হবে।
• useBuiltIns: "usage": এই অপশনটি ব্যবহার করলে Babel আপনার কোডে ব্যবহৃত ফিচারের ভিত্তিতে স্বয়ংক্রিয়ভাবে polyfills যোগ করবে, এবং আপনাকে আলাদাভাবে core-js ইনপোর্ট করার প্রয়োজন হবে না।

উদাহরণ: useBuiltIns: "usage"

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

এখানে, শুধুমাত্র আপনার কোডে ব্যবহৃত নতুন JavaScript ফিচারের জন্য polyfills যোগ করা হবে, এবং আপনার কোডে ব্যবহৃত ফিচারগুলির সাথে মিল রেখে প্রয়োজনীয় polyfills স্বয়ংক্রিয়ভাবে অন্তর্ভুক্ত হবে।

৪. Polyfills ও Code Size

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

সারাংশ

• @babel/polyfill এখন ডিপ্রিকেটেড (deprecated) এবং core-js ও regenerator-runtime প্যাকেজগুলি ব্যবহার করার পরামর্শ দেওয়া হয়েছে।
• @babel/preset-env এর useBuiltIns এবং corejs অপশন ব্যবহার করে polyfills যুক্ত করা হয়।
• useBuiltIns: "entry" এলে, আপনাকে manually core-js এবং regenerator-runtime ইনপোর্ট করতে হবে, এবং useBuiltIns: "usage" এলে শুধু প্রয়োজনীয় polyfills যোগ হবে।

এভাবে, আপনি আধুনিক JavaScript ফিচারগুলোর জন্য পুরনো ব্রাউজারগুলোতে সমর্থন যোগ করতে পারবেন এবং কোডকে যথাযথভাবে ট্রান্সপাইল করতে পারবেন।