پروژه وب را با TS & Webpack از ابتدا شروع کنید

من در حال تلاش برای ایجاد برنامه وب با استفاده از TS و Webpack هستم، نام آن “Shooter” است – یک بازی اساسی در مرورگر. امروز به شما نشان خواهم داد که چگونه پروژه را با Typescript شروع کنید و از Webpack برای بسته بندی کدها استفاده کنید.

پیش نیازها

یک پوشه جدید ایجاد کنید، سپس آن را با vscode باز کنید

mkdir shooter
cd shooter
code .

npm و git را راه اندازی کنید

npm init -y
git init

که در .gitignore فایل، اضافه کنید node_modules و dist برای نادیده گرفتن آنها

پیکربندی تایپ اسکریپ و بسته وب را راه اندازی کنید

فایل پیکربندی typescript را راه اندازی کنید

npx tsc --init

اضافه کردن ts-loader و webpack-cli برای استفاده از بسته وب با تایپ اسکریپت

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

ايجاد كردن webpack.config.js فایل و آن تنظیمات را اضافه کنید:

const path = require("path");
module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
};

فایل .ts بسازید و تست کنید

ايجاد كردن src دایرکتوری و index.ts فایل با مقداری کد تایپ برای تست.

که در package.json فایل، این اسکریپت را داخل آن اضافه کنید scripts برای ساخت کد

"build": "webpack --mode=development"

ساخت کد با استفاده از

npm run build

و می توانید فایل را ببینید bundle.js داخل dist پوشه

اضافه کردن watch ویژگی

برای اینکه هر بار که کد را تغییر می‌دهید، بسته‌های وب بسته به صورت خودکار کد بسازید src دایرکتوری، این اسکریپت را به آن اضافه کنید package.json

"watch": "webpack --mode=development --watch"

سعی کنید کد را در داخل به روز کنید src دایرکتوری و بسته های بسته وب را تماشا کنید که بلافاصله کد می کنید.

الزام آور bundle.js با index.html

ايجاد كردن index.html فایل با مقداری کد در public فهرست راهنما.

اضافه کردن html-webpack-plugin

npm install --save-dev html-webpack-plugin

به روز رسانی اضافه کردن افزونه به webpack.config.js فایل

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.ts",
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "public/index.html",
    }),
  ],
};

حالا دوباره پروژه را اجرا کنید، می بینید bundle.js در تگ هدر الزام آور است.

استفاده کنید dev-server

برای راه اندازی وب اپلیکیشن شما و اعمال تغییر کد تماشا در وب پک، می توانیم استفاده کنیم web-pack-dev-server

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

این پیکربندی را به آن اضافه کنید webpack.config.js

devServer: {
    static: {
      directory: path.join(__dirname, "dist"),
    },
    compress: true,
    port: 9000,
  },

سپس در نهایت این اسکریپت را اضافه کنید package.json

"start": "webpack serve --mode=development"

حالا پروژه را با

npm run start

و http://localhost:9000/ را باز کنید، برنامه خود را در آنجا اجرا می کنید.