Babel CLI ইন্সটল করা

Babel CLI (Command Line Interface) হল একটি টুল যা আপনাকে Babel ব্যবহার করে কোড ট্রান্সপাইল করতে সাহায্য করে, সরাসরি কমান্ড লাইন থেকে। এর মাধ্যমে আপনি আপনার JavaScript কোডকে ES6 থেকে ES5 বা অন্য কোনো সংস্করণে রূপান্তর করতে পারেন।

১. Node.js ইনস্টল করা

Babel CLI ব্যবহার করতে হলে প্রথমে আপনার সিস্টেমে Node.js ইনস্টল থাকতে হবে। যদি Node.js ইনস্টল না থাকে, তবে আপনি Node.js এর অফিসিয়াল সাইট থেকে এটি ডাউনলোড এবং ইনস্টল করতে পারেন।

২. প্রকল্পে Babel CLI ইনস্টল করা

Babel CLI ইনস্টল করার জন্য প্রথমে আপনার প্রকল্পে npm init চালিয়ে package.json ফাইল তৈরি করুন। তারপরে Babel এর প্রয়োজনীয় প্যাকেজগুলো ইনস্টল করুন।

Step-by-step ইনস্টলেশন:

1. প্রথমে প্রকল্প ফোল্ডারে NPM ইনিশিয়ালাইজ করুন:

   যদি আপনার প্রকল্পে এখনও package.json ফাইল না থাকে, তাহলে নিচের কমান্ডটি চালিয়ে package.json তৈরি করুন:

   npm init -y
   

2. Babel CLI ইনস্টল করুন:

   Babel CLI ইনস্টল করতে নিচের কমান্ডটি চালান:

   npm install --save-dev @babel/cli
   

   এই কমান্ডটি Babel CLI কে আপনার প্রকল্পের ডেভেলপমেন্ট ডিপেনডেন্সি হিসেবে ইনস্টল করবে।

3. Babel Core এবং Presets ইনস্টল করুন:

   Babel CLI এর সাথে কাজ করতে হলে আপনাকে @babel/core এবং @babel/preset-env প্রিসেটও ইনস্টল করতে হবে। এই প্রিসেট ES6 এবং তার পরবর্তী সংস্করণের কোডকে ES5 কোডে রূপান্তর করে।

   এটি ইনস্টল করতে নিচের কমান্ডটি ব্যবহার করুন:

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

৩. Babel কনফিগারেশন ফাইল তৈরি করা

Babel CLI এর মাধ্যমে কোড ট্রান্সপাইল করার জন্য আপনাকে .babelrc বা babel.config.json নামক একটি কনফিগারেশন ফাইল তৈরি করতে হবে। এই ফাইলে আপনি কোন প্রিসেট ব্যবহার করবেন তা নির্ধারণ করতে পারবেন।

.babelrc ফাইল তৈরি করুন:

আপনার প্রকল্পের মূল ডিরেক্টরিতে .babelrc নামে একটি ফাইল তৈরি করুন এবং এর মধ্যে নিচের কনফিগারেশন যুক্ত করুন:

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

এটি Babel কে বলে যে, ES6+ কোডকে ES5 তে রূপান্তরিত করতে হবে।

৪. Babel CLI দিয়ে কোড ট্রান্সপাইল করা

Babel CLI ইনস্টল এবং কনফিগারেশনের পর, আপনি আপনার JavaScript কোডকে ট্রান্সপাইল করতে পারেন।

1. ফোল্ডারে একটি JavaScript ফাইল তৈরি করুন:

   উদাহরণস্বরূপ, src নামক একটি ফোল্ডার তৈরি করুন এবং তার মধ্যে index.js নামে একটি ফাইল তৈরি করুন। এতে কিছু ES6 কোড লিখুন:

   const greet = (name) => `Hello, ${name}!`;
   console.log(greet('World'));
   

2. Babel CLI দিয়ে ট্রান্সপাইল করুন:

   এবার, টার্মিনালে নিচের কমান্ডটি ব্যবহার করুন:

   npx babel src --out-dir dist
   

   এখানে, src ফোল্ডারের সমস্ত JavaScript ফাইলকে dist ফোল্ডারে ES5 কোডে রূপান্তরিত করা হবে।

3. পরীক্ষা করুন:

   dist/index.js ফাইলটি খুললে আপনি দেখতে পাবেন যে ES6 কোডটি ES5 কোডে রূপান্তরিত হয়ে গিয়েছে:

   var greet = function(name) {
     return "Hello, " + name + "!";
   };
   console.log(greet('World'));
   

৫. Babel Watcher (অটোমেটিক ট্রান্সপাইলিং)

আপনি চাইলে Babel CLI এর মাধ্যমে অটোমেটিক ট্রান্সপাইলিং সেটআপ করতে পারেন। এর জন্য --watch ফ্ল্যাগ ব্যবহার করা হয়, যা কোডের পরিবর্তনগুলো ট্র্যাক করে স্বয়ংক্রিয়ভাবে রূপান্তর করে।

npx babel src --out-dir dist --watch

এটি src ফোল্ডারে থাকা সব ফাইলের পরিবর্তনকে মনিটর করবে এবং যেকোনো পরিবর্তনের পর সেই ফাইলটি আবার dist ফোল্ডারে ট্রান্সপাইল করবে।

সারাংশ

Babel CLI ইনস্টল এবং সেটআপ করা সহজ। প্রথমে Node.js ইনস্টল করে npm দিয়ে Babel এর প্রয়োজনীয় প্যাকেজগুলো ইনস্টল করুন। এরপর .babelrc কনফিগারেশন ফাইল তৈরি করে, Babel CLI দিয়ে আপনার JavaScript কোড ট্রান্সপাইল করতে পারবেন। Babel CLI আপনাকে নতুন JavaScript ফিচারগুলো ব্যবহার করতে দেয়, তবে সেই কোডটি পুরনো ব্রাউজারেও নির্বিঘ্নে চলতে পারে।