Webpack হল একটি শক্তিশালী মডিউল বান্ডলার যা প্রধানত JavaScript, CSS, HTML এবং অন্যান্য রিসোর্স যেমন ইমেজ এবং ফন্ট একত্রিত করতে ব্যবহৃত হয়। TypeScript প্রজেক্টে Webpack ব্যবহার করলে আপনি TypeScript কোডকে JavaScript কোডে ট্রান্সপাইল (compile) করতে পারবেন এবং কোডের মডুলারিটি বজায় রাখতে পারবেন।
Webpack এর মাধ্যমে TypeScript প্রজেক্ট বিল্ড করা একটি সাধারণ প্রক্রিয়া এবং এটি সহজেই স্কেল করা যায়। এই টিউটোরিয়ালে আমরা দেখব কীভাবে TypeScript এবং Webpack ব্যবহার করে একটি প্রজেক্ট বিল্ড করা যায়।
১. Webpack এবং TypeScript সেটআপ
১.১ নতুন প্রজেক্ট তৈরি করা
প্রথমে একটি নতুন প্রজেক্ট ফোল্ডার তৈরি করুন:
mkdir typescript-webpack
cd typescript-webpack
১.২ npm ইনিশিয়ালাইজ করা
npm ইনিশিয়ালাইজ করুন এবং package.json ফাইল তৈরি করুন:
npm init -y
১.৩ Webpack এবং TypeScript ইনস্টল করা
Webpack এবং TypeScript সহ অন্যান্য প্রয়োজনীয় প্যাকেজ ইনস্টল করুন:
npm install --save-dev webpack webpack-cli typescript ts-loader
webpackওwebpack-cli: Webpack এবং এর কমান্ড লাইন ইন্টারফেস।typescript: TypeScript প্যাকেজ।ts-loader: Webpack-এর জন্য একটি লোডার, যা TypeScript কোডকে JavaScript এ ট্রান্সপাইল করে।
১.৪ TypeScript কনফিগারেশন ফাইল তৈরি করা
TypeScript কনফিগারেশন ফাইল তৈরি করুন:
npx tsc --init
এটি একটি tsconfig.json ফাইল তৈরি করবে। ফাইলটি দেখতে এমন হবে:
{
"compilerOptions": {
"target": "ES6",
"module": "CommonJS",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"outDir": "./dist"
},
"include": ["src/**/*.ts"]
}
এখানে:
target: TypeScript কনটেন্ট কীভাবে কম্পাইল হবে।module: JavaScript মডিউল সিস্টেম।outDir: কম্পাইলড JavaScript ফাইলগুলো কোথায় রাখা হবে (এখানেdistফোল্ডারে)।
১.৫ Webpack কনফিগারেশন ফাইল তৈরি করা
এখন Webpack কনফিগারেশন ফাইল (webpack.config.js) তৈরি করুন।
const path = require('path');
module.exports = {
entry: './src/index.ts', // ইনপুট ফাইল
output: {
filename: 'bundle.js', // আউটপুট ফাইল
path: path.resolve(__dirname, 'dist')
},
resolve: {
extensions: ['.ts', '.js'] // .ts এবং .js এক্সটেনশনকে সমর্থন করে
},
module: {
rules: [
{
test: /\.ts$/, // TypeScript ফাইলের জন্য লোডার
use: 'ts-loader',
exclude: /node_modules/
}
]
},
mode: 'development' // ডেভেলপমেন্ট মোডে কাজ করবে
};
এখানে:
entry: আপনার TypeScript প্রজেক্টের এন্ট্রি পয়েন্ট।output: আউটপুট ফাইলের পাথ এবং নাম।resolve: Webpack কে.tsএবং.jsএক্সটেনশন সহ ফাইলগুলো খুঁজতে সাহায্য করে।module.rules: TypeScript ফাইলের জন্যts-loaderব্যবহার করতে বলে, যা TypeScript কোডকে JavaScript এ কম্পাইল করে।
২. ফোল্ডার গঠন
আপনার প্রজেক্ট ফোল্ডার গঠন এমন হতে হবে:
typescript-webpack/
|-- src/
| |-- index.ts
|
|-- dist/ (this will be generated after build)
|-- package.json
|-- tsconfig.json
|-- webpack.config.js
৩. TypeScript কোড লেখা
এখন src/index.ts ফাইলে TypeScript কোড লিখুন:
const greet = (name: string): string => {
return `Hello, ${name}!`;
}
console.log(greet('TypeScript'));
এটি একটি সাধারণ TypeScript ফাংশন যা একটি স্ট্রিং আর্গুমেন্ট নেয় এবং একটি স্ট্রিং রিটার্ন করে। এরপর এটি কনসোলে greet ফাংশনের আউটপুট প্রিন্ট করবে।
৪. বিল্ড প্রক্রিয়া শুরু করা
এখন আপনি Webpack ব্যবহার করে TypeScript প্রজেক্টটি বিল্ড করতে পারবেন। প্রথমে একটি build স্ক্রিপ্ট তৈরি করুন package.json ফাইলে:
{
"scripts": {
"build": "webpack"
}
}
এখন বিল্ড প্রক্রিয়া চালানোর জন্য কমান্ড ব্যবহার করুন:
npm run build
এটি dist ফোল্ডারে bundle.js নামক একটি ফাইল তৈরি করবে, যা আপনার TypeScript কোডের কম্পাইল করা JavaScript সংস্করণ।
৫. ব্রাউজারে আউটপুট দেখা
এখন আপনি একটি HTML ফাইল তৈরি করে ব্রাউজারে এই আউটপুট দেখতে পারেন। উদাহরণস্বরূপ:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TypeScript Webpack Example</title>
</head>
<body>
<script src="dist/bundle.js"></script>
</body>
</html>
এখন আপনার ব্রাউজারে index.html ফাইলটি খুললে, কনসোলে Hello, TypeScript! বার্তা দেখাবে।
৬. ডেভেলপমেন্ট সার্ভার ব্যবহার করা
বিল্ড প্রক্রিয়াতে আরও সুবিধা পেতে এবং দ্রুত রিফ্রেশের জন্য আপনি webpack-dev-server ব্যবহার করতে পারেন। এটি ইনস্টল করতে হবে:
npm install --save-dev webpack-dev-server
তারপর webpack.config.js ফাইলে ডেভেলপমেন্ট সার্ভার কনফিগার করুন:
module.exports = {
// অন্যান্য কনফিগারেশন
devServer: {
static: './dist',
open: true, // স্বয়ংক্রিয়ভাবে ব্রাউজার খুলবে
hot: true // হট মোডিফিকেশন
}
};
এখন npm run start কমান্ড দিয়ে ডেভেলপমেন্ট সার্ভার চালাতে পারেন। এটি আপনার পরিবর্তনগুলো লাইভ দেখতে সাহায্য করবে এবং স্বয়ংক্রিয়ভাবে ব্রাউজারে রিফ্রেশ করবে।
সারাংশ
- Webpack TypeScript কোড কম্পাইল করার জন্য একটি শক্তিশালী টুল।
ts-loaderব্যবহার করে Webpack TypeScript ফাইলকে JavaScript এ ট্রান্সপাইল করতে পারে।- TypeScript এবং Webpack একসাথে ব্যবহার করলে স্কেলেবল এবং টাইপ সেফ প্রজেক্ট তৈরি করা সহজ হয়।
- ডেভেলপমেন্ট পরিবেশে webpack-dev-server ব্যবহার করলে ডেভেলপমেন্টের সময় ব্রাউজার অটো-রিফ্রেশ ও দ্রুত পরিবর্তন দেখতে পারবেন।
এভাবে আপনি Webpack এর মাধ্যমে TypeScript প্রজেক্ট তৈরি ও বিল্ড করতে পারবেন।
Read more
