Webpack এ TypeScript লোডার কনফিগার করা

Webpack হলো একটি জনপ্রিয় JavaScript মডিউল বান্ডলার, যা ফ্রন্ট-এন্ড অ্যাপ্লিকেশন তৈরিতে ব্যবহৃত হয়। TypeScript-এ কোড লেখা হলে, তাকে JavaScript-এ ট্রান্সপাইল (compile) করতে হবে। Webpack এ TypeScript কোড ট্রান্সপাইল করার জন্য আমাদের TypeScript লোডার (ts-loader) কনফিগার করতে হয়।

এখানে আমরা দেখবো কীভাবে Webpack এবং TypeScript একসাথে কাজ করে একটি TypeScript প্রজেক্ট সেটআপ করা যায়।

১. Webpack এবং TypeScript এর জন্য প্রয়োজনীয় প্যাকেজ ইনস্টল করা

প্রথমে আমাদের প্রয়োজনীয় কিছু প্যাকেজ ইনস্টল করতে হবে, যেমন Webpack, TypeScript, এবং TypeScript লোডার (ts-loader), এবং Webpack এর CLI।

npm install --save-dev webpack webpack-cli typescript ts-loader

এছাড়া, যদি আপনি Webpack Dev Server ব্যবহার করতে চান, তবে সেটিও ইনস্টল করতে পারেন।

npm install --save-dev webpack-dev-server

২. TypeScript কনফিগারেশন (tsconfig.json) তৈরি করা

TypeScript-এ কোড কম্পাইল করতে tsconfig.json ফাইল প্রয়োজন। এই ফাইলটি TypeScript কম্পাইলারের কনফিগারেশন ডিফাইন করে। আপনি নিজে থেকে এই ফাইল তৈরি করতে পারেন, অথবা tsc --init কমান্ড দিয়ে স্বয়ংক্রিয়ভাবে এটি তৈরি করতে পারেন।

npx tsc --init

tsconfig.json ফাইলটি কিছু সঠিক সেটিংস সহ তৈরি হবে, তবে আপনি এই ফাইলটি Webpack-এর সাথে সুসংগত করার জন্য কিছু সেটিংস কাস্টমাইজ করতে পারেন।

tsconfig.json ফাইলের উদাহরণ:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es6",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "outDir": "./dist",
    "rootDir": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

এখানে:

• "target": JavaScript এর যে ভার্সনে TypeScript ট্রান্সপাইল হবে। এখানে es5 সিলেক্ট করা হয়েছে।
• "module": মডিউল সিস্টেমের টাইপ। এখানে es6 নির্বাচন করা হয়েছে।
• "outDir": ট্রান্সপাইলড JavaScript ফাইল কোথায় রাখা হবে।
• "rootDir": TypeScript সোর্স ফাইলের মূল ডিরেক্টরি।

৩. Webpack কনফিগারেশন (webpack.config.js) তৈরি করা

Webpack কনফিগারেশন ফাইল তৈরি করতে হবে যাতে TypeScript লোডারকে সঠিকভাবে কনফিগার করা যায়।

webpack.config.js ফাইলের উদাহরণ:

const path = require('path');

module.exports = {
  entry: './src/index.ts', // আপনার TypeScript এন্ট্রি পয়েন্ট
  output: {
    filename: 'bundle.js', // আউটপুট ফাইল
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: ['.ts', '.js'] // TypeScript এবং JavaScript এক্সটেনশন রেজলভ করা
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/, // TypeScript ফাইলের জন্য রেগুলার এক্সপ্রেশন
        use: 'ts-loader', // ts-loader ব্যবহার করা
        exclude: /node_modules/
      }
    ]
  },
  devtool: 'source-map', // সোর্স ম্যাপ জেনারেট করা
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'), // সাইট স্ট্যাটিক ফাইলের লোকেশন
    port: 9000 // ওয়েবপ্যাক ডেভ সার্ভারের পোর্ট
  }
};

এখানে:

• entry: এটি হলো TypeScript প্রজেক্টের এন্ট্রি পয়েন্ট। এখানে src/index.ts ফাইলটি সিলেক্ট করা হয়েছে।
• output: এখানে bundle.js ফাইলের আউটপুট ডিরেক্টরি এবং নাম কনফিগার করা হয়েছে।
• resolve: ts এবং js এক্সটেনশন গুলি Webpack এর মডিউল রেজলভেশনে অন্তর্ভুক্ত করা হয়েছে।
• module.rules: এখানে ts-loader ব্যবহার করা হয়েছে .ts এবং .tsx ফাইলের জন্য।
• devtool: সোর্স ম্যাপ জেনারেট করার জন্য source-map ব্যবহার করা হয়েছে।
• devServer: এটি Webpack Dev Server এর কনফিগারেশন, যা ডেভেলপমেন্ট পরিবেশে লোড এবং রিফ্রেশ সহজ করে।

৪. TypeScript কোড লেখা

এখন, আপনি আপনার TypeScript কোড লেখা শুরু করতে পারেন। উদাহরণস্বরূপ, src/index.ts ফাইল তৈরি করুন।

src/index.ts উদাহরণ:

const greet = (name: string): string => {
  return `Hello, ${name}!`;
};

console.log(greet('World'));

৫. প্রজেক্ট বিল্ড করা

Webpack কনফিগারেশন ফাইল এবং TypeScript ফাইল সেটআপ করার পর, আপনি webpack কমান্ড দিয়ে প্রজেক্ট বিল্ড করতে পারেন।

npx webpack --config webpack.config.js

এটি আপনার TypeScript কোডকে ট্রান্সপাইল করে dist/ ফোল্ডারে bundle.js ফাইল আউটপুট করবে।

৬. ডেভেলপমেন্ট সার্ভার চালানো

Webpack Dev Server চালাতে, আপনি নিচের কমান্ডটি ব্যবহার করতে পারেন, যাতে আপনার প্রজেক্ট লোকাল সার্ভারে রান করতে পারে এবং চেঞ্জ হলে অটো রিফ্রেশ হয়।

npx webpack serve --config webpack.config.js

এটি ওয়েবপ্যাক ডেভ সার্ভার শুরু করবে এবং আপনার ব্রাউজারে প্রকল্প চালু করবে। আপনি পোর্ট 9000-এ ব্রাউজারে এটি দেখতে পাবেন, যেমন http://localhost:9000।

সারাংশ

এভাবে Webpack এবং TypeScript-কে একত্রিত করে একটি শক্তিশালী ফ্রন্টএন্ড অ্যাপ্লিকেশন তৈরি করা যায়। ts-loader ব্যবহার করে Webpack আপনার TypeScript কোডকে JavaScript-এ ট্রান্সপাইল করবে এবং আপনি উন্নত কোডিং অভিজ্ঞতা ও টাইপ সেফটি পাবেন।