Babel কনফিগারেশন ফাইল (.babelrc, babel.config.js)

BabelJS এর কনফিগারেশন ফাইল হলো গুরুত্বপূর্ণ অংশ যা আপনার কোডের ট্রান্সপাইলিং কিভাবে হবে তা নির্ধারণ করে। আপনি বিভিন্ন কনফিগারেশন ফাইল ব্যবহার করতে পারেন যেমন .babelrc, babel.config.json, এবং babel.config.js। এখানে প্রতিটি ফাইলের ধরন এবং এর ব্যবহারের পদ্ধতি সম্পর্কে বিস্তারিত আলোচনা করা হয়েছে।

১. .babelrc কনফিগারেশন ফাইল

.babelrc ফাইলটি সাধারণত প্রকল্পের মূল ফোল্ডারে থাকে এবং এটি JSON ফরম্যাটে লেখা হয়। এটি শুধুমাত্র একটি নির্দিষ্ট ফোল্ডারের মধ্যে থাকা কোডের জন্য কনফিগারেশন সেট করে। এই ফাইলটি সাধারণত ছোট প্রকল্প বা নির্দিষ্ট ফোল্ডারগুলোতে ব্যবহৃত হয়।

উদাহরণ: .babelrc ফাইল

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}

এখানে:

• presets: এটি প্রিসেটের তালিকা যা Babel কে বলে দেয় কীভাবে কোড ট্রান্সপাইল করতে হবে। উদাহরণস্বরূপ, @babel/preset-env ES6+ কোডকে ES5 এ রূপান্তরিত করে এবং @babel/preset-react React JSX কোডকে JavaScript এ রূপান্তরিত করে।
• plugins: এটি বিভিন্ন Babel প্লাগিন যুক্ত করার জন্য ব্যবহৃত হয়, যেমন @babel/plugin-transform-arrow-functions যেটি arrow functions কে সাধারণ function এ রূপান্তরিত করে।

বিঃদ্রঃ .babelrc ফাইল শুধুমাত্র সেই ফোল্ডারের ফাইলগুলোকে প্রভাবিত করে যেখানে এটি অবস্থিত। অর্থাৎ, যদি আপনি .babelrc ফাইলটি শুধুমাত্র একটি সাব-ফোল্ডারে রাখেন, তাহলে সেই ফোল্ডারের কোডে এই কনফিগারেশনটি প্রযোজ্য হবে।

২. babel.config.json কনফিগারেশন ফাইল

babel.config.json ফাইলটি একটি JSON ফাইল যা প্রকল্পের মূল ফোল্ডারে থাকে এবং এটি প্রকল্পের সব কোডে প্রযোজ্য। এই কনফিগারেশনটি ব্যবহার করা হয় যখন আপনি আপনার প্রকল্পের সমস্ত ফোল্ডারে একই কনফিগারেশন চান।

উদাহরণ: babel.config.json ফাইল

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}

এটি .babelrc এর মতো, তবে এটি পুরো প্রকল্পে প্রযোজ্য, এবং babel.config.json সব ফোল্ডারের জন্য সাধারণ কনফিগারেশন সেট করে।

বিঃদ্রঃ babel.config.json ফাইলটি প্রকল্পের মূল ডিরেক্টরিতে রাখা হয় এবং এটি প্রকল্পের সমস্ত কোডে প্রযোজ্য।

৩. babel.config.js কনফিগারেশন ফাইল

babel.config.js ফাইলটি JavaScript ফাইল হিসেবে ব্যবহার করা হয় এবং এতে আপনি প্রোগ্রাম্যাটিক্যালি কনফিগারেশন সেট করতে পারেন। অর্থাৎ, আপনি যদি কোনো শর্তে কনফিগারেশন পরিবর্তন করতে চান বা কনফিগারেশন ফাইলের মধ্যে লজিক রাখতে চান, তাহলে babel.config.js উপযুক্ত।

উদাহরণ: babel.config.js ফাইল

module.exports = {
  presets: ["@babel/preset-env", "@babel/preset-react"],
  plugins: ["@babel/plugin-transform-arrow-functions"]
};

এটি babel.config.json এর মতো, তবে এখানে আপনি কোডের মাধ্যমে কনফিগারেশন সেট করতে পারবেন, যেমন if-else শর্ত ব্যবহার করতে পারেন, পরিবেশ (environment) চেক করতে পারেন, অথবা আরও জটিল কনফিগারেশন তৈরি করতে পারেন।

আরেকটি উদাহরণ যেখানে পরিবেশ ভেরিয়েবল ব্যবহার করা হয়েছে:

module.exports = function (api) {
  api.cache(true);

  const presets = [
    ["@babel/preset-env", { targets: "defaults" }],
    "@babel/preset-react"
  ];

  const plugins = ["@babel/plugin-transform-arrow-functions"];

  if (process.env.NODE_ENV === "production") {
    plugins.push("@babel/plugin-transform-runtime");
  }

  return {
    presets,
    plugins
  };
};

এখানে, process.env.NODE_ENV চেক করা হচ্ছে এবং যদি এটি production হয়, তবে @babel/plugin-transform-runtime প্লাগিনটি যুক্ত করা হচ্ছে।

৪. কনফিগারেশন ফাইলের মধ্যে অপশন

Babel কনফিগারেশনে আপনি বেশ কিছু সাধারণ অপশন ব্যবহার করতে পারেন। এখানে কিছু গুরুত্বপূর্ণ অপশন উল্লেখ করা হলো:

presets:

Babel এর প্রিসেটগুলি হলো কনফিগারেশন গ্রুপ যা আপনার কোডের ফিচারগুলিকে সমর্থন করতে ব্যবহৃত হয়। যেমন:

• @babel/preset-env: ES6 বা পরবর্তী সংস্করণের কোডকে ES5 তে রূপান্তরিত করার জন্য।
• @babel/preset-react: React JSX কোডকে JavaScript এ রূপান্তরিত করার জন্য।
• @babel/preset-typescript: TypeScript কোডকে JavaScript এ রূপান্তরিত করার জন্য।

plugins:

Babel প্লাগিনগুলি নির্দিষ্ট বৈশিষ্ট্যগুলোকে ট্রান্সপাইল করে। যেমন:

• @babel/plugin-transform-arrow-functions: Arrow functions কে সাধারণ function এ রূপান্তরিত করে।
• @babel/plugin-proposal-class-properties: ES6 ক্লাস প্রপার্টির সমর্থন যোগ করে।

targets:

এটি আপনি যেসব পরিবেশে কোডটি চালাতে চান, সেই অনুযায়ী কোডটি ট্রান্সপাইল করতে ব্যবহার হয়। যেমন:

"targets": "> 0.25%, not dead"

modules:

এই অপশনটি কোডের মডিউল সিস্টেম নির্ধারণ করতে ব্যবহৃত হয়। যেমন:

"modules": "commonjs"

৫. কোন ফাইলটি ব্যবহার করবেন?

• .babelrc: যদি আপনার প্রজেক্টে ছোট ছোট সাব-ফোল্ডার থাকে এবং আপনি কেবল সেই ফোল্ডারের জন্য কনফিগারেশন চান, তবে .babelrc ব্যবহার করুন।
• babel.config.json: যদি আপনার প্রজেক্টের সব ফোল্ডারের জন্য একক কনফিগারেশন দরকার হয়, তবে babel.config.json ব্যবহার করুন।
• babel.config.js: যদি আপনাকে কনফিগারেশন ফাইলে ডাইনামিক বা প্রোগ্রাম্যাটিকাল লজিক ব্যবহার করতে হয়, তবে babel.config.js ব্যবহার করুন।

সারাংশ

Babel কনফিগারেশন ফাইল (যেমন .babelrc, babel.config.json, বা babel.config.js) ব্যবহার করে আপনি আপনার কোডের ট্রান্সপাইলিং কনফিগার করতে পারেন। .babelrc ফাইলটি সাধারণত সাব-ফোল্ডারের জন্য ব্যবহৃত হয়, babel.config.json এবং babel.config.js পুরো প্রকল্পের জন্য ব্যবহৃত হয়। আপনি প্রিসেট এবং প্লাগিন ব্যবহার করে কোডের ট্রান্সপাইলিং কাস্টমাইজ করতে পারেন এবং পরিবেশ অনুযায়ী কনফিগারেশন সেট করতে পারেন।