Builder Tool
💡 Builder Tool বলতে এমন একটি টুলকে বোঝায় যা তোমার source code (JSX, TypeScript, CSS, etc.) কে browser-ready optimized code এ রূপান্তর করে।
👉 সহজ ভাষায়:
Builder Tool এমন এক জিনিস, যা তোমার কোডকে "build" করে production-ready final output বানিয়ে দেয় ✅
🧱 উদাহরণ দিয়ে বোঝাই:
তুমি যখন React-এ কোড লেখো:
const App = () => {
return <h1>Hello World</h1>;
};
এই JSX, modern JS ফাইল, CSS, images — সবকিছু browser সরাসরি বুঝতে পারে না।
Builder Tool এইসবকে bundle, transpile, optimize করে এমন ফর্মে দেয় যা browser বুঝে।
🔧 Builder Tool কী কী কাজ করে?
| কাজ | ব্যাখ্যা |
|---|---|
| ✅ Transpile | JSX বা TypeScript → JavaScript |
| ✅ Bundle | অনেকগুলো ফাইলকে এক বা কয়েকটি ফাইলে রূপান্তর |
| ✅ Minify | Code ছোট করে ফেলে (remove whitespace, comments) |
| ✅ Optimize | Unused কোড ফেলে দেয় (tree-shaking) |
| ✅ Serve | Dev server চালায় (live reload সহ) |
| ✅ Static assets handle | CSS, images, fonts ইত্যাদি manage করে |
🔧 জনপ্রিয় Builder Tools:
| নাম | ভাষা | কী ব্যবহার করে |
|---|---|---|
| Webpack | JS | Babel, plugins |
| Rollup | JS | Tree-shaking optimized |
| Parcel | JS | Zero-config bundler |
| Vite | Go (ESBuild) + Rollup | Super fast build |
| ESBuild | Go | Super fast, low-level bundler |
🧠 উদাহরণ:
# Vite দিয়ে React প্রজেক্ট বানানো
npm create vite@latest my-app --template react
# তারপর build command চালাও
npm run build
এই npm run build কমান্ডই builder tool কে চালায় — যা সব JS, CSS, images → optimize করে dist/ ফোল্ডারে ফেলে।
🔚 সংক্ষেপে:
Builder Tool হলো এমন একটি টুল যা তোমার কোডকে browser-ready করে তোলে — transpile, bundle, optimize করে production এর জন্য প্রস্তুত করে।