Babel Polyfill এবং Runtime

BabelJS এর মধ্যে Polyfill এবং Runtime দুটি গুরুত্বপূর্ণ ধারণা যা ES6 এবং পরবর্তী JavaScript ফিচারগুলিকে পুরনো ব্রাউজার বা পরিবেশে ব্যবহারযোগ্য করে তোলে। এখানে বিস্তারিতভাবে ব্যাখ্যা করা হলো, Babel Polyfill এবং Runtime কীভাবে কাজ করে এবং এগুলোর মধ্যে পার্থক্য কী।

Babel Polyfill

Babel Polyfill এমন একটি সেট কোড যা নতুন JavaScript ফিচারগুলিকে পুরনো ব্রাউজার বা পরিবেশে সমর্থিত করে তোলে। এটি নতুন ফিচারগুলোর জন্য Polyfill যোগ করে, যেমন Promise, Map, Set, এবং Object.assign যা পুরনো ব্রাউজারে সমর্থিত নয়। Polyfill হল একটি কোডের অংশ যা নতুন ফিচারকে পুরনো সিস্টেমে সিমুলেট বা রিপ্লেস করে।

Babel Polyfill ব্যবহার করলে আপনার কোডে যেসব নতুন JavaScript ফিচার আছে সেগুলোর জন্য ব্রাউজার বা পরিবেশে প্রয়োজনীয় Polyfill যোগ করা হয়, যাতে এগুলো পুরনো ব্রাউজারেও সঠিকভাবে কাজ করতে পারে।

Babel Polyfill ব্যবহার করা

Babel Polyfill কে ব্যবহার করতে হলে আপনাকে মূল এন্ট্রি ফাইলে core-js এবং regenerator-runtime প্যাকেজগুলি ইমপোর্ট করতে হবে।

1. প্রথমে Core-js ইনস্টল করুন:

   npm install core-js
   npm install regenerator-runtime
   

2. এন্ট্রি ফাইলে Polyfill যোগ করুন: আপনার প্রজেক্টের প্রধান এন্ট্রি ফাইলে (যেমন index.js) core-js এবং regenerator-runtime ইমপোর্ট করতে হবে।

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

Polyfill অপশন

Babel এর @babel/preset-env তে useBuiltIns এবং corejs এর মতো অপশন ব্যবহার করে আপনি Polyfill কিভাবে ব্যবহৃত হবে তা নিয়ন্ত্রণ করতে পারেন।

• useBuiltIns:
  • "entry": আপনাকে ম্যানুয়ালি core-js এবং regenerator-runtime এর ইমপোর্ট করতে হবে আপনার এন্ট্রি ফাইলে।
  • "usage": শুধুমাত্র সেই ফিচারগুলোর জন্য Polyfill যোগ হবে যেগুলো আপনি আপনার কোডে ব্যবহার করেছেন।
• corejs: Polyfill এর জন্য কোন ভার্সন ব্যবহার করবেন তা নির্ধারণ করা যায়, যেমন corejs: 3।

উদাহরণ:

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

Babel Runtime

Babel Runtime মূলত একটি helper library যা নতুন JavaScript ফিচারগুলির জন্য ছোট্ট কোডের টুকরা সরবরাহ করে, যেমন async/await, generator functions, ইত্যাদি। এটি মূলত আপনার কোডের সাইজ কমাতে সাহায্য করে এবং রUNTIME এর মধ্যে টেমপ্লেট বা কম্পাইলেড কোডকে আরো অপ্টিমাইজ করে।

Babel Runtime এর দুটি গুরুত্বপূর্ণ অংশ রয়েছে:

1. @babel/plugin-transform-runtime: এটি Babel এর ট্রান্সপাইলড কোডের মধ্যে যেসব helper function ব্যবহার হয় সেগুলোর জন্য রিফ্যাক্টর করা হয় এবং এই কোডগুলো পুনরায় প্রতিটি ফাইলে ইনপুট না হয়ে একটি আলাদা লাইব্রেরি হিসেবে ব্যবহৃত হয়। এটি কোডের সাইজ কমায়।
2. regenerator-runtime: এটি async/await বা generators এর জন্য প্রয়োজনীয় runtime কোড যোগ করে। এটি যেকোনো এসিনক্রোনাস ফিচারের জন্য বাইন্ডিং এবং স্টেট মেশিন তৈরি করে।

Babel Runtime ব্যবহার করা

Babel Runtime ব্যবহার করতে হলে আপনাকে @babel/plugin-transform-runtime ইনস্টল এবং কনফিগার করতে হবে।

1. @babel/plugin-transform-runtime ইনস্টল করা:

   npm install --save-dev @babel/plugin-transform-runtime
   

2. Babel কনফিগারেশন ফাইলে Runtime প্লাগিন যোগ করা:

   {
     "plugins": [
       "@babel/plugin-transform-runtime"
     ]
   }
   

Babel Polyfill এবং Runtime এর মধ্যে পার্থক্য

সারাংশ

• Babel Polyfill JavaScript কোডের জন্য নতুন ফিচারগুলোর Polyfill যোগ করে, যাতে পুরনো ব্রাউজারে বা পরিবেশে এগুলো কাজ করতে পারে।
• Babel Runtime JavaScript এর helper functions সরবরাহ করে, যা কোডের সাইজ কমাতে সাহায্য করে এবং async/await, generators এর মতো আধুনিক ফিচারগুলোর জন্য প্রয়োজনীয় কোড সরবরাহ করে।

Babel Polyfill আপনার কোডের জন্য বড়ো আকারের Polyfill যোগ করে, আর Babel Runtime কোডের পুনরাবৃত্তি থেকে বাঁচাতে এবং কোডের সাইজ কমাতে সহায়তা করে।

Polyfill হলো এমন একটি কোড বা লাইব্রেরি যা ব্রাউজার বা JavaScript রানটাইমে পূর্ববর্তী বা সীমিত সংস্করণের জন্য নতুন বা আধুনিক ফিচারগুলো সমর্থনযোগ্য করে তোলে। যখন আপনি নতুন JavaScript ফিচার (যেমন, async/await, Array.prototype.includes, Object.assign, Promise, ইত্যাদি) ব্যবহার করেন, তখন পুরনো ব্রাউজারগুলো এই ফিচারগুলো সমর্থন নাও করতে পারে। এ ধরনের পরিস্থিতিতে Polyfill ব্যবহার করে সেই ফিচারগুলোর সমাধান করা হয়। BabelJS polyfill ব্যবস্থাপনাকে আরও সহজ করে তোলে, বিশেষ করে @babel/preset-env এর মাধ্যমে।

Polyfill কীভাবে কাজ করে?

Polyfill মূলত কোডের এমন অংশ যা নতুন JavaScript ফিচারগুলোকে পুরনো ব্রাউজারে শুধু-শুধু ম্যানুয়ালি যুক্ত না করে স্বয়ংক্রিয়ভাবে যুক্ত করে। এটি এমন একটি পদ্ধতি যার মাধ্যমে ব্রাউজারের বা JavaScript প্ল্যাটফর্মের অক্ষম ফিচারগুলোর জন্য প্রতিস্থাপন সরবরাহ করা হয়।

যেমন:

• Promise বা async/await এর মতো ফিচার যেগুলি পুরনো ব্রাউজারে কাজ না করলে, polyfill তাদের জন্য প্রতিস্থাপন সরবরাহ করবে।
• ES6 এর Array.prototype.includes() অথবা Object.assign() এর মতো ফিচারগুলোও polyfill এর মাধ্যমে যোগ করা যায়।

Polyfill এর প্রয়োজনীয়তা

1. ব্রাউজারের মধ্যে অসামঞ্জস্যতা (Browser Incompatibility):
   • পুরনো ব্রাউজারগুলো নতুন JavaScript ফিচারগুলো সঠিকভাবে সমর্থন নাও করতে পারে। উদাহরণস্বরূপ, IE 11 ব্রাউজারে Promise সমর্থিত নয়।
   • Polyfill ব্যবহার করে নতুন ফিচারগুলো পুরনো ব্রাউজারে সমর্থনযোগ্য করা হয়।
2. অধিক কোড কম্প্যাটিবিলিটি (Increased Code Compatibility):
   • বিভিন্ন ব্রাউজারে একেবারে একইভাবে কোড কাজ করার জন্য polyfill ব্যবহার করা হয়। উদাহরণস্বরূপ, Array.prototype.includes() ES6 এর একটি নতুন ফিচার, যা IE 11 সমর্থন করে না।
   • Polyfill এই ফিচারগুলো ব্রাউজারটিতে আনার জন্য একটি সমাধান হিসেবে কাজ করে।
3. কোডের দক্ষতা বৃদ্ধি (Code Efficiency):
   • Polyfill ব্যবহার করার মাধ্যমে, আপনি কোডটিকে মোবাইল এবং পুরনো ব্রাউজারের জন্য পুরোপুরি কার্যকরী করতে পারেন। এতে ডেভেলপারদের কোডটিকে অ্যাডাপ্ট করতে হয় না, বরং polyfill স্বয়ংক্রিয়ভাবে ব্রাউজারের জন্য প্রয়োজনীয় ফিচার যোগ করে দেয়।
4. JavaScript ফিচারের পূর্ণ ব্যবহার (Full Use of JavaScript Features):
   • আপনি যখন ES6 বা ES7 এর মতো নতুন ফিচার ব্যবহার করেন, তখন polyfill এর মাধ্যমে সেই ফিচারগুলো পুরনো ব্রাউজারে ব্যবহার করা যায়।
   • উদাহরণস্বরূপ, Object.assign() একটি ES6 ফিচার যা পুরনো ব্রাউজারগুলোতে সমর্থিত নয়, কিন্তু polyfill এর মাধ্যমে এটি উপলব্ধ করা সম্ভব।

BabelJS এবং Polyfill

BabelJS এর মাধ্যমে polyfill ব্যবহারের সুবিধা হল যে এটি আপনাকে কাস্টমাইজ করতে দেয় যে কোন ব্রাউজারে আপনার কোড চলবে এবং সেই অনুযায়ী polyfill যোগ করতে পারে।

BabelJS এর @babel/preset-env preset এর মধ্যে useBuiltIns এবং corejs অপশন ব্যবহার করে আপনি polyfill গুলো পরিচালনা করতে পারেন।

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

1. useBuiltIns: "usage":

   • এই কনফিগারেশন ব্যবহার করলে, BabelJS আপনার কোডে যে ফিচারগুলো ব্যবহৃত হচ্ছে, সেগুলোর জন্য প্রয়োজনীয় polyfill গুলি স্বয়ংক্রিয়ভাবে যোগ করবে।
   • এতে অব্যবহৃত polyfills গুলো অন্তর্ভুক্ত হবে না, ফলে কোডটি ছোট এবং দ্রুত হবে।

   উদাহরণ:

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

   এখানে:

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

2. useBuiltIns: "entry":

   • এই কনফিগারেশনে, আপনাকে কোডে core-js এবং regenerator-runtime এর entry পয়েন্ট যোগ করতে হবে।
   • এটি পুরো প্রজেক্টের জন্য polyfills লোড করবে, সুতরাং প্রতিটি ES6 ফিচারের জন্য polyfill অন্তর্ভুক্ত হবে।

   উদাহরণ:

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

   আপনাকে আপনার এন্ট্রি ফাইলগুলিতে এই কোড যোগ করতে হবে:

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

Polyfill ব্যবহারের সুবিধা

1. অধিক ব্রাউজার সাপোর্ট: Polyfill ব্যবহার করে আপনি আপনার কোডকে পুরনো ব্রাউজারগুলোতেও কার্যকরী করতে পারেন। এটি ব্রাউজারের সাথে সামঞ্জস্যপূর্ণ কোড তৈরি করতে সহায়ক।
2. কোডে কমপ্লেক্সিটি কমানো: Polyfill শুধুমাত্র সেই ফিচারগুলো যোগ করবে যা প্রয়োজন, ফলে কোডটি ছোট এবং কমপ্লেক্স হবে।
3. সম্মিলিত সমাধান: Polyfill ব্যবহার করে আপনি পুরনো ব্রাউজারগুলির জন্য উন্নত ফিচার সাপোর্ট নিশ্চিত করতে পারেন, যা ক্লায়েন্ট সাইড এবং সার্ভার সাইড অ্যাপ্লিকেশন উভয় ক্ষেত্রেই প্রযোজ্য।

সারাংশ

Polyfill একটি গুরুত্বপূর্ণ টুল যা নতুন JavaScript ফিচারগুলোকে পুরনো বা সীমিত ব্রাউজারে সমর্থনযোগ্য করে তোলে। BabelJS এর মাধ্যমে polyfill ব্যবহার করলে আপনার কোডের ব্রাউজার কম্প্যাটিবিলিটি বৃদ্ধি পায় এবং কোডটিকে এমনভাবে ট্রান্সপাইল করা হয় যাতে এটি পুরনো ব্রাউজারেও ঠিকভাবে কাজ করে। @babel/preset-env এর মাধ্যমে 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 ফিচারগুলোর জন্য পুরনো ব্রাউজারগুলোতে সমর্থন যোগ করতে পারবেন এবং কোডকে যথাযথভাবে ট্রান্সপাইল করতে পারবেন।

Polyfill হলো এমন একটি কোড, যা আধুনিক JavaScript ফিচারগুলিকে পুরনো ব্রাউজার বা পরিবেশে সমর্থনযোগ্য করতে সাহায্য করে। যখন আপনি নতুন JavaScript ফিচার ব্যবহার করেন, যেমন Promise, Array.from, বা Object.assign, তখন কিছু পুরনো ব্রাউজারে এসব ফিচার সমর্থিত নাও থাকতে পারে। এই সমস্যা সমাধান করতে CoreJS এবং Babel একত্রে কাজ করে।

BabelJS এর মাধ্যমে আপনি CoreJS ব্যবহার করে JavaScript এর নতুন ফিচারগুলোকে পুরনো JavaScript সংস্করণে (যেমন ES5) রূপান্তর করতে পারেন, যাতে আপনার কোড পুরনো ব্রাউজারে সঠিকভাবে চলে।

CoreJS এবং Babel এর মাধ্যমে Polyfill কনফিগারেশন করার জন্য নিচে বিস্তারিত ব্যাখ্যা দেওয়া হয়েছে।

CoreJS এবং Polyfill কী?

• CoreJS: এটি একটি জনপ্রিয় JavaScript লাইব্রেরি, যা JavaScript এর বিভিন্ন নতুন ফিচারের polyfill সরবরাহ করে। এতে বিভিন্ন মডিউল রয়েছে, যেমন Promise, Map, Set, Symbol, Array.prototype.includes ইত্যাদি, যা ব্রাউজার বা প্ল্যাটফর্মে সমর্থিত না থাকলে ব্যবহৃত হয়।
• Polyfill: Polyfill এমন একটি কোড যা নতুন ফিচারগুলোকে পুরনো ব্রাউজারে যোগ করে। এটি মূলত এমন কোড বা ফাংশন যা নতুন JavaScript ফিচারগুলি সরবরাহ করে, যাতে পুরনো JavaScript ইঞ্জিনগুলোও সেগুলো বুঝতে পারে।

CoreJS এর সাথে Polyfill কনফিগারেশন

Babel এর মাধ্যমে CoreJS ব্যবহার করে polyfill করার জন্য আপনাকে কয়েকটি পদক্ষেপ অনুসরণ করতে হবে।

১. CoreJS ইনস্টল করা

প্রথমে core-js এবং @babel/preset-env প্যাকেজ দুটি ইনস্টল করতে হবে। কমান্ড লাইন থেকে এই কমান্ডটি চালান:

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

২. Babel কনফিগারেশন সেটআপ করা

এখন আপনাকে Babel এর কনফিগারেশন ফাইলে (যেমন .babelrc বা babel.config.js) @babel/preset-env এর মাধ্যমে CoreJS এর polyfill ব্যবহার করতে হবে।

.babelrc বা babel.config.js ফাইলে কনফিগারেশন:

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

এখানে useBuiltIns: "usage" এবং corejs: 3 এর মানে হলো:

• useBuiltIns: এই অপশনটি নির্দেশ করে যে polyfill কেবল তখনই যুক্ত হবে যখন কোডে সেই ফিচারটি ব্যবহার করা হবে। এর মানে, যেখানে যেখানে নতুন JavaScript ফিচার ব্যবহৃত হবে, সেখানে সেখানে polyfill যোগ হবে।
• corejs: 3: এটি CoreJS এর সংস্করণ নির্ধারণ করে। বর্তমান সময়ের জন্য corejs: 3 ব্যবহার করা উচিত, কারণ এটি সর্বশেষ সংস্করণ এবং অধিক সংখ্যক ফিচার সমর্থন করে।

৩. Polyfill যোগ করা

এখন @babel/preset-env CoreJS এর polyfill যোগ করবে আপনার কোডে, যেখানে যেখানে প্রয়োজনীয় ফিচারগুলির সমর্থন নেই। এই কনফিগারেশনটি নিশ্চিত করবে যে আপনার কোড ES5 বা পুরনো JavaScript সংস্করণে সঠিকভাবে কাজ করবে।

যেমন:

// Promise ব্যবহার
const promise = new Promise((resolve, reject) => {
  resolve('Hello, World!');
});

// Array.from ব্যবহার
const arr = Array.from('Hello');
console.log(arr); // ['H', 'e', 'l', 'l', 'o']

যতটুকু সময় আপনার কোডে Promise বা Array.from এর মতো ফিচার ব্যবহার করা হবে, ততটুকু সময় CoreJS সেই ফিচারগুলোর polyfill যোগ করবে।

৪. Polyfill ছাড়া Babel কনফিগারেশন

যদি আপনি CoreJS ছাড়া polyfill ব্যবহার করতে চান, তবে useBuiltIns: false সেট করতে পারেন। এর ফলে কোনো polyfill যোগ হবে না, এবং আপনি যদি সেগুলো ব্যবহার করতে চান, তবে আপনাকে নিজে polyfill অন্তর্ভুক্ত করতে হবে।

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

CoreJS-এর বিভিন্ন অপশন:

1. useBuiltIns: "entry"

   • এই অপশনটি নির্দেশ করে যে আপনাকে polyfill কেবলমাত্র একটি নির্দিষ্ট এন্ট্রি ফাইলে যুক্ত করতে হবে। আপনাকে আপনার অ্যাপ্লিকেশনটির মূল এন্ট্রি ফাইল (যেমন index.js) এ import 'core-js'; যোগ করতে হবে, যা CoreJS এর সমস্ত polyfill অন্তর্ভুক্ত করবে।

   উদাহরণ:

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

   useBuiltIns: "entry" ব্যবহারে, CoreJS সমস্ত ফিচারগুলো অ্যাপ্লিকেশনটির এন্ট্রি ফাইলে যোগ করবে।

2. useBuiltIns: "usage"

   • এই অপশনটি প্রতিটি ফিচারের জন্য polyfill যোগ করবে যেখানে আপনি সেই ফিচার ব্যবহার করেছেন। এটি কোডের আকার ছোট রাখতে সহায়তা করে এবং শুধুমাত্র প্রয়োজনীয় polyfill গুলোই লোড হবে।

   উদাহরণ:

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

   এখানে, শুধুমাত্র যে ফিচারগুলো আপনার কোডে ব্যবহৃত হবে, তাদের জন্য polyfill যোগ করা হবে।

Polyfill এবং Babel এর অন্যান্য ব্যবহারের ক্ষেত্রে

• Async/Await: যদি আপনি async/await ব্যবহার করেন, তাহলে আপনি regenerator-runtime ইমপোর্ট করতে হতে পারে, যা পলিফিল হিসাবে কাজ করবে।

  উদাহরণ:

  npm install --save regenerator-runtime
  

  তারপর কোডে:

  import 'regenerator-runtime/runtime';
  

• Babel Plugins: CoreJS এবং Polyfill এর সাথে Babel Plugins ব্যবহার করে আরো কাস্টমাইজেশন করা যেতে পারে। যেমন @babel/plugin-transform-runtime প্লাগিন ব্যবহার করে আপনি আরো ক্ষুদ্র এবং পুনরায় ব্যবহারযোগ্য কোড পেতে পারেন।

সারাংশ

BabelJS এবং CoreJS এর মাধ্যমে polyfill কনফিগারেশন করে আপনি পুরনো ব্রাউজারে নতুন JavaScript ফিচারগুলো ব্যবহার করতে পারবেন। @babel/preset-env এর মাধ্যমে useBuiltIns অপশনটি ব্যবহার করে polyfill এর আকার কমানো যায় এবং শুধু প্রয়োজনীয় ফিচারগুলোই অন্তর্ভুক্ত করা হয়। corejs: 3 এর মাধ্যমে আপনি আধুনিক JavaScript ফিচারগুলো সমর্থিত করতে পারেন। Polyfill কনফিগারেশনটি আপনার অ্যাপ্লিকেশনকে পুরনো ব্রাউজারে সুসংগতভাবে চালাতে সাহায্য করবে।

Babel Runtime হল একটি বাইবিলিওথেক (library) যা Babel এর সাহায্যে JavaScript কোড ট্রান্সপাইল করার পর কোডের আকার ছোট এবং অপ্টিমাইজড রাখতে সহায়তা করে। এটি আপনার কোডে পুনরাবৃত্তি বা অপ্রয়োজনীয় কোড কমাতে এবং কোডের পুনঃব্যবহারযোগ্যতা বাড়াতে গুরুত্বপূর্ণ ভূমিকা পালন করে।

Babel Runtime কী?

Babel Runtime হল একটি Babel প্লাগিন এবং প্যাকেজ যা প্রধানত দুইটি কাজ করে:

1. Helper functions: Babel সাধারণত ES6+ বা আধুনিক JavaScript ফিচারগুলিকে পুরনো JavaScript সংস্করণে রূপান্তর করার সময় অনেক ধরনের helper function ব্যবহার করে, যেমন interopRequireDefault, classCallCheck, extends, defineProperty ইত্যাদি। তবে প্রতিটি helper function যদি বার বার কোডে থাকে, তাহলে কোডের আকার বেড়ে যায়। Babel Runtime এই helper functions গুলোকে একটি বাইরের লাইব্রেরি হিসেবে এনে কোডের আকার ছোট করে।
2. Polyfills: আধুনিক JavaScript ফিচার (যেমন async/await, Promise, Object.assign ইত্যাদি) যদি পুরনো ব্রাউজারে বা পরিবেশে সাপোর্ট না থাকে, তবে Polyfill এর মাধ্যমে তাদের সাপোর্ট যোগ করা হয়। Babel Runtime Polyfill ব্যবহারের মাধ্যমে পুরনো JavaScript কোডে নতুন ফিচারগুলোর সাপোর্ট এনে দেয়, যার ফলে কোডটি কমপ্যাটিবল হয়ে যায়।

Babel Runtime এর কীভাবে কাজ করে?

Babel Runtime কাজ করে দুইটি প্রধান উপায়ে:

1. Helper Functions Extraction: Babel যখন ES6+ কোড ট্রান্সপাইল করে, তখন সাধারণত helper ফাংশনগুলো প্রতিটি ফাইলেই ডুপ্লিকেট হয়ে যায়। Babel Runtime এই helper ফাংশনগুলোকে একবার একটি নির্দিষ্ট জায়গায় সরিয়ে রাখে, যাতে প্রতিটি ফাইলে পুনরায় সেগুলো ব্যবহার করতে না হয়। এর ফলে কোডের আকার কমে যায় এবং কোডটিকে সহজে মেইনটেইন করা যায়।
2. Polyfill Management: যদি আপনার কোডে কোনো আধুনিক ফিচার যেমন async/await ব্যবহার করা হয় এবং এটি পুরনো পরিবেশে সাপোর্ট না থাকে, তবে Babel Runtime সেই ফিচারগুলোর জন্য প্রয়োজনীয় Polyfill অন্তর্ভুক্ত করে দেয়। এটি শুধু প্রয়োজনীয় Polyfill যোগ করে, যাতে অপ্রয়োজনীয় কোড আপনার কোড বেসে না চলে আসে।

Babel Runtime এর মাধ্যমে কোড অপ্টিমাইজেশন

Babel Runtime এর প্রধান সুবিধাগুলি নিচে দেওয়া হলো:

১. কোডের আকার ছোট করা

Babel Runtime helper functions কে বাইরের লাইব্রেরি হিসেবে ব্যবহারের ফলে কোডের আকার কমে যায়। এর ফলে একাধিক ফাইলে একই ফাংশন বারবার ইনক্লুড না হয়ে একটি একক জায়গায় রাখা হয়, যা কোডের পুনঃব্যবহারযোগ্যতা বাড়ায় এবং অবাঞ্ছিত কোড ডুপ্লিকেশন কমায়।

উদাহরণ:

যদি আপনি ES6 ক্লাস ব্যবহার করেন, তখন Babel সাধারণত classCallCheck নামক একটি helper function ব্যবহার করবে। যদি Babel Runtime ব্যবহার না করেন, তবে এটি প্রতিটি ফাইলে এই helper function বসাবে। তবে Babel Runtime ব্যবহারে শুধুমাত্র একটি জায়গায় এটি থাকবে।

২. Polyfill কোড পরিচালনা

বেশিরভাগ ব্রাউজার বা পরিবেশে নতুন JavaScript ফিচারগুলো সাপোর্ট নাও করতে পারে। যেমন, যদি আপনি Promise বা async/await ব্যবহার করেন, তবে পুরনো ব্রাউজারগুলোর জন্য Polyfill যুক্ত করতে হয়। Babel Runtime Polyfill এর মাধ্যমে এগুলো সঠিকভাবে যোগ করে দেয়, তবে শুধু যেখানে প্রয়োজন তা-ই।

৩. Performance Optimization

Babel Runtime ব্যবহারের মাধ্যমে কোডের সাইজ কমে যাওয়ার কারণে ব্রাউজারে কোডের লোডিং টাইম এবং রানটাইম পারফরম্যান্সে উন্নতি হতে পারে, বিশেষত বড় প্রজেক্ট বা ওয়েব অ্যাপ্লিকেশনগুলোর ক্ষেত্রে।

৪. কোড পুনঃব্যবহারযোগ্যতা বৃদ্ধি

বাবেল রানটাইমের সাহায্যে helper functions একবার সরবরাহ করার ফলে, কোডের বিভিন্ন অংশে বারবার একই কোড লেখার প্রয়োজন হয় না, ফলে কোড আরো পরিস্কার এবং কমপ্যাক্ট হয়।

Babel Runtime ব্যবহার করা

Babel Runtime ব্যবহার করতে আপনাকে কিছু নির্দিষ্ট প্যাকেজ ইনস্টল করতে হবে এবং কিছু কনফিগারেশন করতে হবে।

১. Babel Runtime ইনস্টল করা

Babel Runtime ব্যবহারের জন্য আপনাকে প্রথমে @babel/runtime এবং @babel/plugin-transform-runtime ইনস্টল করতে হবে।

npm install --save @babel/runtime
npm install --save-dev @babel/plugin-transform-runtime

২. Babel কনফিগারেশন আপডেট করা

Babel কনফিগারেশন ফাইলে @babel/plugin-transform-runtime যোগ করতে হবে। এটি কোড ট্রান্সপাইলারকে জানায় যে, আপনি Babel Runtime ব্যবহার করতে চান।

.babelrc বা babel.config.js কনফিগারেশন ফাইল:

{
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
}

এই কনফিগারেশনটি Babel কে নির্দেশ দেবে যাতে এটি helper functions এবং polyfills গুলোকে আলাদা বাইব্রেরি থেকে রেফারেন্স করে।

Babel Runtime এর সুবিধাসমূহ

1. কোডের আকার কমানো: পুনরাবৃত্তি কমানো এবং এক্সটেনশনের মাধ্যমে কোড ছোট করা।
2. Polyfill সমর্থন: পুরনো ব্রাউজার বা পরিবেশে আধুনিক ফিচারগুলির জন্য স্বয়ংক্রিয় Polyfill অন্তর্ভুক্তকরণ।
3. কোড পরিস্কার ও প্রোটেকশন: পুনঃব্যবহারযোগ্য কোডের মাধ্যমে কোড সিস্টেম পরিস্কার রাখা।
4. পারফরম্যান্স উন্নতি: কোডের সাইজ কমানো এবং উন্নত রানটাইম পারফরম্যান্স।

সারাংশ

Babel Runtime একটি গুরুত্বপূর্ণ টুল যা কোডের পুনঃব্যবহারযোগ্যতা এবং অপ্টিমাইজেশনের জন্য সহায়ক। এটি helper functions এবং polyfills গুলোকে বাইব্রেরি হিসেবে ব্যবহার করে, যা কোডের সাইজ কমাতে এবং পারফরম্যান্স উন্নত করতে সাহায্য করে। বিশেষত বড় React বা JavaScript অ্যাপ্লিকেশনগুলিতে এটি ব্যবহারে কোড বেস আরও কার্যকরী এবং সহজে বজায় রাখা যায়।