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

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 কনফিগারেশনটি আপনার অ্যাপ্লিকেশনকে পুরনো ব্রাউজারে সুসংগতভাবে চালাতে সাহায্য করবে।