ব্রাউজার অনুযায়ী কোড আউটপুট কাস্টমাইজ করা

BabelJS একটি শক্তিশালী ট্রান্সপাইলার, যা আধুনিক JavaScript কোড (ES6, ES7, ESNext) কে পুরনো JavaScript সংস্করণে রূপান্তর করতে ব্যবহৃত হয়, যাতে এটি পুরনো ব্রাউজারে সঠিকভাবে কাজ করে। তবে, সব ব্রাউজারের জন্য একই রকম কোড আউটপুট প্রয়োজন হয় না। কিছু ব্রাউজার নতুন JavaScript ফিচার সাপোর্ট করে, আবার কিছু পুরনো ব্রাউজার শুধুমাত্র পুরনো ফিচারগুলো সাপোর্ট করে।

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

১. Browserslist কনফিগারেশন ব্যবহার করা

Browserslist একটি কনফিগারেশন ফাইল বা পদ্ধতি যা আপনাকে নির্দিষ্ট ব্রাউজার এবং তাদের ভার্সন অনুযায়ী কোড আউটপুট কাস্টমাইজ করতে সাহায্য করে। এটি একটি সহজ কনফিগারেশন ফাইল বা প্যাকেজের মধ্যে উল্লেখ করা যায়, যা BabelJS, Autoprefixer, ESLint ইত্যাদির সাথে ইন্টিগ্রেট করা যায়।

Browserslist কনফিগারেশন ফাইল তৈরি করা

আপনি browserslist ফাইল তৈরি করে বা package.json এর মধ্যে browserslist সেকশন যোগ করে আপনার লক্ষ্য ব্রাউজারগুলো উল্লেখ করতে পারেন।

package.json এ Browserslist কনফিগারেশন:

{
  "browserslist": [
    "last 2 versions",
    "not dead",
    "> 0.2%",
    "Firefox ESR"
  ]
}

এখানে:

• "last 2 versions": শেষ দুটি ব্রাউজার ভার্সন সমর্থিত হবে।
• "not dead": "dead" ব্রাউজার (যেগুলোর আর সাপোর্ট নেই) বাদ দেওয়া হবে।
• "> 0.2%": ব্রাউজারগুলোর বাজার শেয়ার যদি ০.২% বা তার বেশি হয়, সেগুলো অন্তর্ভুক্ত করা হবে।
• "Firefox ESR": Firefox এর Extended Support Release (ESR) ভার্সন সমর্থিত হবে।

এছাড়াও, আপনি অন্য কনফিগারেশন পদ্ধতি যেমন .browserslistrc ফাইলও ব্যবহার করতে পারেন।

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

@babel/preset-env একটি Babel প্রিসেট যা browserslist কনফিগারেশন অনুসরণ করে এবং কেবলমাত্র সেই JavaScript ফিচারগুলো ট্রান্সপাইল বা পলিফিল করে যা নির্দিষ্ট ব্রাউজারে কাজ করবে না।

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

babel.config.js:

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: '> 0.2%, last 2 versions, not dead',  // Browserslist কনফিগারেশন
        useBuiltIns: 'usage',  // প্রয়োজন অনুযায়ী পলিফিল ব্যবহার
        corejs: 3,  // Core-js সংস্করণ
      },
    ],
  ],
};

এখানে:

• targets: এটি browserslist কনফিগারেশন ফাইলের বিকল্প হিসেবে কাজ করে। আপনি যদি browserslist ফাইল ব্যবহার না করতে চান, তাহলে এখানে সরাসরি ব্রাউজার নির্ধারণ করতে পারেন।
• useBuiltIns: এই সেটিংটি নির্ধারণ করে যে কীভাবে পলিফিল ব্যবহার করা হবে। এর দুটি অপশন আছে:
  • false: পলিফিল ব্যবহার করা হবে না।
  • entry: সব পলিফিল core-js এবং regenerator-runtime এর মতো প্যাকেজ থেকে ইনপোর্ট করা হবে।
  • usage: শুধুমাত্র আপনার কোডে যে ফিচারগুলো ব্যবহার করা হয়েছে, সেগুলোর জন্য পলিফিল যোগ করা হবে।
• corejs: পলিফিলের জন্য ব্যবহৃত Core-js সংস্করণ উল্লেখ করা।

৩. Polyfills এবং JavaScript ফিচার কাস্টমাইজ করা

BabelJS শুধুমাত্র সিনট্যাক্স ট্রান্সপাইল করেই শেষ নয়, এটি আধুনিক JavaScript ফিচারগুলোর জন্য পলিফিল (polyfill)ও যোগ করতে পারে। পলিফিল এমন কোড ব্লক যা পুরনো ব্রাউজারগুলোতে নতুন ফিচারগুলোর কাজ করার সুবিধা দেয়।

Polyfill এর উদাহরণ:

Promise এবং Array.from মতো ফিচারগুলো যদি আপনার কোডে থাকে এবং পুরনো ব্রাউজারে সাপোর্ট না থাকে, তবে BabelJS core-js প্যাকেজের মাধ্যমে পলিফিল যোগ করতে পারে।

আপনি useBuiltIns: 'usage' এবং corejs: 3 ব্যবহার করলে, Babel শুধুমাত্র আপনার কোডে যে নতুন ফিচারগুলো ব্যবহার করা হয়েছে, সেগুলোর জন্য পলিফিল যোগ করবে।

৪. Babel CLI এবং Browserslist এর Integration

Babel CLI এর মাধ্যমে আপনি কোড ট্রান্সপাইল করার সময় --env ফ্ল্যাগ ব্যবহার করে নির্দিষ্ট ব্রাউজার বা পরিবেশ অনুযায়ী কাস্টমাইজড কোড আউটপুট করতে পারেন।

উদাহরণ:

npx babel src --out-dir dist --env production

এখানে, --env ফ্ল্যাগ ব্যবহার করে নির্দিষ্ট পরিবেশের জন্য ব্রাউজার টার্গেট করা যায়। যেমন production পরিবেশের জন্য আপনি আলাদা কনফিগারেশন রাখতে পারেন।

৫. Babel এবং Autoprefixer Integration

ব্রাউজার অনুযায়ী কোড আউটপুট কাস্টমাইজ করার সময়, আপনাকে CSS এ ব্রাউজার সাপোর্টের জন্য prefixes যোগ করতে হতে পারে। এ জন্য Autoprefixer প্যাকেজ ব্যবহার করা হয়, যা CSS কোডে ব্রাউজারের জন্য প্রয়োজনীয় prefixes যোগ করে।

Autoprefixer ইন্টিগ্রেট করার উদাহরণ:

npm install --save-dev autoprefixer

এটা PostCSS এর মাধ্যমে ব্যবহার করা যায়। Autoprefixer CSS এর জন্য স্বয়ংক্রিয়ভাবে ব্রাউজার নির্ধারণ করে এবং প্রয়োজনীয় prefixes যোগ করে।

সারাংশ

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

এছাড়া, Polyfills এবং Autoprefixer ইন্টিগ্রেশন ব্যবহার করে CSS এবং JavaScript উভয়ের ক্ষেত্রেই ব্রাউজার সাপোর্ট নিশ্চিত করতে পারেন।