BabelJS একটি শক্তিশালী ট্রান্সপাইলার যা JavaScript কোডকে আধুনিক ES6 বা পরবর্তী সংস্করণ থেকে পুরনো ES5 সংস্করণে রূপান্তর করে, যাতে এটি পুরনো ব্রাউজার এবং প্ল্যাটফর্মে নির্বিঘ্নে চলতে পারে। BabelJS ব্যবহার করতে হলে প্রথমে Node.js ইনস্টল করা আবশ্যক, কারণ BabelJS Node.js ভিত্তিক একটি টুল।
নিচে দেওয়া হল BabelJS এর ইনস্টলেশন প্রক্রিয়া, যা Node.js এর সঙ্গে ব্যবহৃত হবে।
১. Node.js ইনস্টল করা
BabelJS ব্যবহার করতে হলে আপনার সিস্টেমে Node.js ইনস্টল থাকতে হবে। আপনি Node.js এর অফিসিয়াল ওয়েবসাইট থেকে এটি ডাউনলোড করে ইনস্টল করতে পারেন:
Node.js ইনস্টল করার পর, আপনি টার্মিনালে নিচের কমান্ড দিয়ে ইনস্টলেশন চেক করতে পারেন:
node -v
npm -v
এটি Node.js এবং npm (Node Package Manager)-এর সংস্করণ দেখাবে, যা নিশ্চিত করবে যে আপনি সফলভাবে Node.js ইনস্টল করেছেন।
২. প্রকল্প তৈরি করা
BabelJS সেটআপ করতে প্রথমে একটি নতুন প্রজেক্ট তৈরি করুন, অথবা একটি বিদ্যমান প্রজেক্টে BabelJS যোগ করুন।
প্রথমে, একটি নতুন ফোল্ডার তৈরি করুন:
mkdir babel-project
cd babel-project
এটি আপনার প্রজেক্টের ফোল্ডার তৈরি করবে এবং সেখানে যাবে।
৩. npm প্রজেক্ট ইনিশিয়ালাইজ করা
npm init কমান্ড দিয়ে package.json ফাইল তৈরি করুন। এটি আপনার প্রজেক্টের ডিপেনডেন্সি এবং কনফিগারেশন ধারণ করবে।
npm init -y
এই কমান্ডটি package.json ফাইল তৈরি করবে।
৪. Babel এর প্যাকেজ ইনস্টল করা
BabelJS এর মূল প্যাকেজগুলি ইনস্টল করতে npm install কমান্ড ব্যবহার করা হয়। কমপক্ষে তিনটি প্যাকেজ ইনস্টল করতে হবে:
- @babel/core: Babel এর মূল কোর।
- @babel/cli: Babel এর CLI (Command Line Interface) টুল।
- @babel/preset-env: আধুনিক JavaScript কোডকে ES5 এ রূপান্তরিত করতে ব্যবহৃত প্রিসেট।
এগুলো ইনস্টল করতে, নিচের কমান্ডটি ব্যবহার করুন:
npm install --save-dev @babel/core @babel/cli @babel/preset-env
এই কমান্ডটি তিনটি প্যাকেজ ইনস্টল করবে, যা আপনার প্রজেক্টের ডেভেলপমেন্ট ডিপেনডেন্সি হিসেবে যুক্ত হবে।
৫. Babel কনফিগারেশন ফাইল তৈরি করা
Babel এর কনফিগারেশন ফাইল হিসাবে .babelrc বা babel.config.json ফাইল ব্যবহার করা হয়। এখানে .babelrc ফাইলের উদাহরণ দেওয়া হলো, যা আপনার ES6 কোডকে ES5 তে রূপান্তর করবে।
.babelrc ফাইলটি প্রকল্পের মূল ডিরেক্টরিতে তৈরি করুন এবং এর মধ্যে নিচের কনফিগারেশন যুক্ত করুন:
{
"presets": ["@babel/preset-env"]
}
এটি Babel কে বলে যে, ES6 এবং পরবর্তী সংস্করণের কোডকে ES5 তে রূপান্তরিত করতে হবে।
৬. কোড ফাইল তৈরি করা
এখন কিছু JavaScript কোড লিখুন যা আপনি ট্রান্সপাইল করতে চান। উদাহরণস্বরূপ, src নামক একটি ফোল্ডার তৈরি করুন এবং তাতে index.js ফাইল তৈরি করুন।
mkdir src
touch src/index.js
index.js ফাইলের মধ্যে কিছু ES6 কোড লিখুন:
// src/index.js
const greet = (name) => `Hello, ${name}!`;
console.log(greet('World'));
৭. Babel CLI দিয়ে কোড ট্রান্সপাইল করা
Babel CLI ব্যবহার করে আপনার কোড ES5 তে ট্রান্সপাইল করতে npx ব্যবহার করুন:
npx babel src --out-dir dist
এটি src ফোল্ডারের কোডটিকে dist ফোল্ডারে ট্রান্সপাইল করে রাখবে। আপনি যদি index.js ফাইলটি dist ফোল্ডারে খুলে দেখেন, তাহলে আপনি ES5 কোড দেখতে পাবেন:
// dist/index.js
var greet = function(name) {
return "Hello, " + name + "!";
};
console.log(greet('World'));
৮. অটোমেটিক ট্রান্সপাইলিং (Optional)
যদি আপনি কোডে কোনো পরিবর্তন করলে অটোমেটিকভাবে ট্রান্সপাইল করতে চান, তাহলে Babel এর --watch ফ্ল্যাগ ব্যবহার করতে পারেন:
npx babel src --out-dir dist --watch
এটি src ফোল্ডারে থাকা ফাইলগুলোর পরিবর্তন ট্র্যাক করবে এবং পরিবর্তন হলে সেগুলি স্বয়ংক্রিয়ভাবে dist ফোল্ডারে ট্রান্সপাইল করবে।
সারাংশ
BabelJS ইনস্টল এবং সেটআপ করার জন্য প্রথমে Node.js ইনস্টল করতে হবে। তারপর npm init কমান্ড দিয়ে প্রজেক্ট শুরু করে, Babel এর মূল প্যাকেজগুলি ইনস্টল করতে হবে। .babelrc কনফিগারেশন ফাইল তৈরি করে, Babel CLI ব্যবহার করে ES6 কোডকে ES5 তে রূপান্তর করা সম্ভব। এই প্রক্রিয়া আপনাকে আধুনিক JavaScript কোড ব্যবহার করার সুযোগ দেয়, অথচ কোডটি পুরনো ব্রাউজারেও নির্বিঘ্নে চলতে পারে।
