Babel দিয়ে একটি প্রাথমিক প্রজেক্ট কনফিগার করতে, আপনাকে কয়েকটি ধাপে চলতে হবে। এখানে আমরা একটি সাধারন ES6 থেকে ES5 ট্রান্সপাইলার প্রজেক্ট কনফিগারেশন তৈরি করব, যাতে আপনি সহজেই আধুনিক JavaScript ফিচার ব্যবহার করতে পারেন, এবং সেই কোডটি পুরনো ব্রাউজারেও সঠিকভাবে কাজ করবে।
১. Node.js ইনস্টল করা
প্রথমে নিশ্চিত হয়ে নিন যে আপনার সিস্টেমে Node.js ইনস্টল আছে। যদি এটি ইনস্টল না থাকে, তবে আপনি Node.js অফিসিয়াল সাইট থেকে এটি ডাউনলোড করে ইনস্টল করতে পারেন।
২. প্রকল্প ফোল্ডার তৈরি করুন
আপনার প্রজেক্টের জন্য একটি নতুন ফোল্ডার তৈরি করুন এবং সেখানে কাজ শুরু করুন।
mkdir babel-project
cd babel-project
৩. npm প্রজেক্ট ইনিশিয়ালাইজ করুন
npm init কমান্ডটি দিয়ে আপনার প্রকল্পে package.json ফাইল তৈরি করুন:
npm init -y
এটি একটি ডিফল্ট package.json ফাইল তৈরি করবে, যা আপনার প্রজেক্টের কনফিগারেশন ধারণ করবে।
৪. Babel প্যাকেজ ইনস্টল করা
এখন, Babel এর প্রয়োজনীয় প্যাকেজগুলি ইনস্টল করুন। আমাদের কমপক্ষে দুটি প্যাকেজ ইনস্টল করতে হবে:
- @babel/core: Babel এর মূল কোড।
- @babel/cli: কমান্ড লাইন ইন্টারফেস যা Babel কে টার্মিনাল থেকে চালানোর অনুমতি দেয়।
- @babel/preset-env: ES6 এবং তার পরবর্তী সংস্করণের কোডকে ES5 তে রূপান্তর করতে ব্যবহৃত প্রিসেট।
নিচের কমান্ডটি চালিয়ে প্যাকেজগুলো ইনস্টল করুন:
npm install --save-dev @babel/core @babel/cli @babel/preset-env
৫. Babel কনফিগারেশন ফাইল তৈরি করা
Babel এর কনফিগারেশন ফাইল তৈরি করুন যাতে আপনি নির্দেশ দিতে পারেন যে, কোন প্রিসেট এবং প্লাগিন ব্যবহৃত হবে।
.babelrc ফাইল তৈরি করুন:
প্রকল্পের মূল ডিরেক্টরিতে .babelrc নামক একটি ফাইল তৈরি করুন এবং এটি এরকম কনফিগারেশন লিখুন:
{
"presets": ["@babel/preset-env"]
}
এটি Babel কে বলে যে, ES6 এবং পরবর্তী কোডকে ES5 তে রূপান্তর করতে হবে, যা পুরনো ব্রাউজারে সমর্থিত।
৬. কোড ফোল্ডার তৈরি করুন
কিছু কোড লিখুন যা আপনি ট্রান্সপাইল করতে চান। উদাহরণস্বরূপ, 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 ব্যবহার করে src ফোল্ডারের কোডটিকে dist ফোল্ডারে রূপান্তরিত করুন:
npx babel src --out-dir dist
এটি src/index.js ফাইলটিকে ট্রান্সপাইল করে dist ফোল্ডারে রাখবে।
৮. ট্রান্সপাইল করা কোড পরীক্ষা করা
dist/index.js ফাইলটি খুললে দেখতে পাবেন যে ES6 কোডটি ES5 কোডে রূপান্তরিত হয়ে গিয়েছে:
// dist/index.js
var greet = function(name) {
return "Hello, " + name + "!";
};
console.log(greet('World'));
৯. অটোমেটিক ট্রান্সপাইলিং (Optional)
যদি আপনি আপনার কোডে কোনো পরিবর্তন করলে অটোমেটিকভাবে ট্রান্সপাইল হতে চান, তাহলে --watch ফ্ল্যাগ ব্যবহার করতে পারেন:
npx babel src --out-dir dist --watch
এটি src ফোল্ডারে সব ফাইলের পরিবর্তন ট্র্যাক করবে এবং যখনই কোনো পরিবর্তন হবে, তখনই সেগুলি dist ফোল্ডারে ট্রান্সপাইল করবে।
১০. আপনার প্রজেক্টের ডিরেক্টরি কাঠামো
আপনার প্রজেক্টের ফোল্ডার স্ট্রাকচার কিছুটা এই রকম হতে পারে:
babel-project/
├── node_modules/
├── src/
│ └── index.js
├── dist/
├── .babelrc
├── package.json
└── package-lock.json
সারাংশ
এটি ছিল Babel এর জন্য একটি প্রাথমিক প্রজেক্ট কনফিগারেশন। প্রথমে Node.js ইনস্টল করে প্রকল্প সেটআপ শুরু করুন, তারপরে Babel এর মূল প্যাকেজ এবং প্রিসেট ইনস্টল করুন। .babelrc ফাইল তৈরি করে কনফিগারেশন সেট করুন, এবং তারপর Babel CLI দিয়ে আপনার ES6 কোডকে ES5 কোডে ট্রান্সপাইল করুন। এই প্রক্রিয়ার মাধ্যমে আপনি আধুনিক JavaScript ফিচার ব্যবহার করতে পারবেন, এবং সেই কোডটি পুরনো ব্রাউজারেও নির্বিঘ্নে চলবে।
