BabelJS একটি শক্তিশালী টুল যা আপনাকে JavaScript কোডটি আধুনিক ফিচার থেকে পুরনো ব্রাউজার বা পরিবেশে সাপোর্ট করার জন্য রূপান্তর করতে সহায়তা করে। তবে শুধু ES6/ES7 কোডই নয়, আপনি বিভিন্ন ফ্রেমওয়ার্ক বা লাইব্রেরি যেমন Vue, Angular ইত্যাদির জন্য নির্দিষ্ট presets ব্যবহার করতে পারেন, যা আপনাকে সহজে এসব পরিবেশের জন্য কাস্টম কোড রূপান্তর করতে সহায়তা করে। এখানে বিভিন্ন জনপ্রিয় ফ্রেমওয়ার্কের জন্য ব্যবহৃত Babel presets এর সম্পর্কে আলোচনা করা হয়েছে।
১. @babel/preset-react (React)
React, যা একটি জনপ্রিয় JavaScript লাইব্রেরি, সাধারণত JSX ব্যবহার করে। JSX হলো HTML এর মতো সিনট্যাক্স যা JavaScript কোডের মধ্যে লেখা হয়। BabelJS এর @babel/preset-react preset এই JSX কোডকে সাধারণ JavaScript এ রূপান্তর করতে সহায়তা করে।
ব্যবহারের উদাহরণ:
{
"presets": ["@babel/preset-react"]
}
@babel/preset-react JSX কোডকে সাধারণ JavaScript কোডে রূপান্তরিত করে এবং React এর অন্যান্য বৈশিষ্ট্য যেমন React.createElement() ফাংশন ব্যবহার করতে সহায়তা করে।
২. @babel/preset-vue (Vue)
Vue.js হলো আরেকটি জনপ্রিয় JavaScript ফ্রেমওয়ার্ক যা একটি রিয়্যাকটিভ ইউজার ইন্টারফেস তৈরি করতে ব্যবহৃত হয়। Vue-র কোড সাধারণত Vue সিঙ্কট্যাক্স ব্যবহার করে, যা ডিফল্টভাবে JSX-এর মতো নয়। Vue কোডকে সঠিকভাবে ট্রান্সপাইল করার জন্য Babel এর জন্য একটি নির্দিষ্ট preset রয়েছে, যা @babel/preset-vue নামে পরিচিত।
ব্যবহারের উদাহরণ:
{
"presets": ["@babel/preset-vue"]
}
এই preset Vue ফাইলগুলিকে উপযুক্ত JavaScript কোডে রূপান্তর করতে সহায়তা করে এবং Vue এর single file components (SFC) সমর্থন করে।
৩. @babel/preset-angular (Angular)
Angular হলো একটি শক্তিশালী JavaScript ফ্রেমওয়ার্ক যা TypeScript এবং HTML templates ব্যবহার করে। Angular প্রকল্পে কোড ট্রান্সপাইল করার জন্য @babel/preset-angular একটি নির্দিষ্ট preset হিসেবে ব্যবহৃত হয়। এটি Angular এর ফিচার যেমন decorators এবং TypeScript-এ লেখা কোডকে সমর্থন করতে সহায়তা করে।
ব্যবহারের উদাহরণ:
{
"presets": ["@babel/preset-angular"]
}
এই preset Angular এর কোড, যেমন TypeScript ফাইল এবং Angular decorators কে আধুনিক JavaScript কোডে রূপান্তর করে।
৪. @babel/preset-typescript (TypeScript)
যদিও TypeScript নিজেই একটি টাইপিং সিস্টেম, BabelJS-এ একটি নির্দিষ্ট preset রয়েছে, যা TypeScript কোডকে JavaScript কোডে রূপান্তরিত করতে সাহায্য করে। @babel/preset-typescript মূলত TypeScript এর নতুন ফিচারগুলোকে সাধারণ JavaScript কোডে রূপান্তর করে, তবে TypeScript-এর টাইপ চেকিং এর কাজটি Babel করে না, সেক্ষেত্রে TSC (TypeScript Compiler) এর মাধ্যমে টাইপ চেকিং করা হয়।
ব্যবহারের উদাহরণ:
{
"presets": ["@babel/preset-typescript"]
}
এটি TypeScript কোডের type annotations এবং interfaces কে উপেক্ষা করে, শুধুমাত্র কোডটিকে JavaScript-এ রূপান্তরিত করে।
৫. @babel/preset-env (ES6/ES7/ESNext)
যদিও @babel/preset-env মূলত ES6 এবং পরবর্তী সংস্করণের JavaScript কোডের জন্য ব্যবহৃত হয়, তবে এটি অন্যান্য ফ্রেমওয়ার্কের কোড রূপান্তরেও সহায়তা করতে পারে। @babel/preset-env এমন একটি preset যা বর্তমান JavaScript কোডের সব ধরনের ফিচার এবং polyfill ব্যবহারের সুযোগ দেয়, যাতে কোডটি পুরনো ব্রাউজারে কাজ করে।
ব্যবহারের উদাহরণ:
{
"presets": ["@babel/preset-env"]
}
এই preset ES6/ES7/ESNext ফিচারগুলোকে সাধারণ JavaScript কোডে রূপান্তর করে, যেমন arrow functions, async/await, const/let, ইত্যাদি।
৬. @babel/preset-flow (Flow)
Flow হলো Facebook এর একটি টাইপিং সিস্টেম যা JavaScript কোডে টাইপ চেকিং করতে ব্যবহৃত হয়। BabelJS এর জন্য @babel/preset-flow একটি নির্দিষ্ট preset যা Flow টাইপ অ্যানোটেশনগুলিকে JavaScript কোড থেকে বাদ দিয়ে সাধারণ JavaScript কোডে রূপান্তর করতে ব্যবহৃত হয়।
ব্যবহারের উদাহরণ:
{
"presets": ["@babel/preset-flow"]
}
এই preset Flow টাইপ অ্যানোটেশনগুলোকে উপেক্ষা করে এবং কোডটিকে সাধারণ JavaScript কোডে রূপান্তরিত করে।
৭. @babel/preset-stage-0, @babel/preset-stage-1, @babel/preset-stage-2, @babel/preset-stage-3
Babel এর stage presets ছিল কিছু নির্দিষ্ট JavaScript ফিচারগুলোর পরীক্ষামূলক (experimental) ফিচার সমর্থন করার জন্য ব্যবহৃত presets। তবে, এগুলো এখন @babel/preset-env দ্বারা প্রতিস্থাপিত হয়েছে। @babel/preset-env আপনাকে নির্দিষ্ট ফিচারগুলোর পলিফিলস এবং ট্রান্সফরমেশন কাস্টমাইজ করার সুযোগ দেয়।
সারাংশ
BabelJS বিভিন্ন ধরনের presets প্রদান করে যা বিভিন্ন ফ্রেমওয়ার্ক এবং লাইব্রেরি সমর্থন করতে সহায়তা করে। এই presets ব্যবহার করে আপনি কোডটিকে নির্দিষ্ট পরিবেশ বা ফিচারের জন্য উপযুক্তভাবে ট্রান্সপাইল করতে পারবেন। জনপ্রিয় কিছু presets হলো:
- @babel/preset-react: React JSX কোড ট্রান্সপাইল করতে ব্যবহৃত।
- @babel/preset-vue: Vue.js কোড ট্রান্সপাইল করতে ব্যবহৃত।
- @babel/preset-angular: Angular কোড ট্রান্সপাইল করতে ব্যবহৃত।
- @babel/preset-typescript: TypeScript কোড ট্রান্সপাইল করতে ব্যবহৃত।
- @babel/preset-env: ES6 এবং পরবর্তী ফিচারগুলোকে পুরনো ব্রাউজার সাপোর্ট করার জন্য ট্রান্সপাইল করতে ব্যবহৃত।
এই presets গুলোর মাধ্যমে আপনি আধুনিক JavaScript ফিচারগুলোর ব্যবহার নিশ্চিত করতে পারবেন এবং কোডের প্রাপ্যতা বাড়াতে পারবেন বিভিন্ন পরিবেশে।
