ماژول و namespace: آشنایی با Webpack

در قسمت قبل با ES6 Module ها آشنا شدیم که بهترین گزینه ما هستند اما مشکل اینجا بود که این ماژول ها تعداد فایل های ما را زیاد می کنند. همانطور که می دانید هر درخواست HTTP که به سمت سرور ارسال می شود، مدت زمانی طول خواهد کشید و از طرفی هر فایل یک درخواست جداگانه به حساب می آید. با این حساب افزایش تعداد فایل ها یعنی افزایش تعداد درخواست ها که باعث کند شدن برنامه ما می شود. اینجاست که webpack وارد بحث می شود.

شما می توانید با مراجعه به آدرس https://webpack.js.org/ اطلاعات کلی این ابزار قدرتمند را بخوانید اما در ساده ترین حالت، webpack ابزاری است که فایل های ما را در یک bundle قرار می دهد. documentation وب سایت رسمی webpack نیز بسیار کامل و جامع است و می توانید با استفاده از آن به راحتی همه چیز را یاد بگیرید. webpack ابتدا تمام کدها را minify می کند (حجم آن ها را تا حد ممکن کاهش می دهد)، سپس تمام کدها را درون یک فایل قرار می دهد.

برای استفاده از Webpack باید ابتدا آن را دانلود کنیم بنابراین من یک ترمینال را باز کرده و کد زیر را در آن اجرا می کنم:

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

با npm install که آشنا هستید. قسمت --save-dev می گوید که این پکیج فقط در هنگام توسعه (development) و کدنویسی جزء وابستگی ها محسوب می شود و روی سرور واقعی نیازی به آن نداریم. بقیه کدها هر کدام پکیج های مختلفی هستند که تک تک آن ها را برایتان توضیح می دهم. زمانی که کد بالا را اجرا کنید در قسمت devDependencies کد زیر را مشاهده می کنید:

  "devDependencies": {
    "lite-server": "^2.5.4",
    "ts-loader": "^6.2.1",
    "typescript": "^3.7.2",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0"
  }

یعنی پکیج های ما نصب شده اند. احتمالا بگویید lite-server از کجا آمده ما که آن را نصب نکرده ایم. حرفتان درست است، من از lite-server برای ایجاد یک سرور مجازی استفاده می کنم و این پکیج از قبل برای من موجود بوده است. اگر شما از آن استفاده نمی کنید بهتر است آن را نصب کنید چرا که کارتان را راحت تر می کند. از بین پکیج های اضافه شده ساده ترین پکیج که قلب پروژه ما خواهد بود webpack می باشد. من در مورد webpack توضیح داده ام بنابراین نیازی به توضیحات اضافه نیست. هدف من این است که webpack به جای bundle کردن فایل های جاوا اسکریپتی نهایی ما، ابتدا فایل های تایپ اسکریپت را به جاوا اسکریپت تبدیل کند و سپس فایل های جاوا اسکریپت را bundle کند. بدین صورت یک محیط توسعه کاملا خودکار خواهیم داشت.

پکیج بعدی webpack-cli است که برای اجرای دستورات webpack به آن نیاز داریم. پکیج دیگری به نام webpack-dev-server نیز وجود دارد که یک سرور مجازی برای webpack است تا آن را اجرا کند. بدین صورت فایل های ما تحت نظر webpack قرار می گیرد و زمانی که یکی از فایل ها تغییر کند، همه چیز دوباره کامپایل می شود و در نهایت در مرورگر به ما تقدیم خواهد شد. دو پکیج دیگر به نام ts-loader و typescript نیز داریم. ما قبلا پکیج typescript را نصب کرده ایم (جلسه اول) به همین خاطر است که در طول این دوره می توانیم از دستوراتی مثل tsc استفاده کنیم اما بهتر است یک نسخه از typescript را برای هر پروژه جداگانه نصب کنید (مثل همین کاری که الان کردیم) تا اگر بعدا تنظیمات خاصی را روی پکیج سراسری تایپ اسکریپت اعمال کردید، پروژه هایتان تغییر نکرده و خراب نشوند. پکیج ts-loader نیز با Webpack همکاری خواهد کرد و به webpack می گوید چطور تایپ اسکریپت را به جاوا اسکریپت کامپایل کند. بدین صورت webpack هم کدهای ما را کامپایل می کند و هم فایل های نهایی جاوا اسکریپتی را در یک bundle قرار می دهد (بدین شکل محیط توسعه ما خودکار می شود و نیازی به اجرای چندین دستور مختلف برای دیدن نتیجه نیست).

برای شروع باید به نکاتی توجه کنیم. ابتدا به فایل tsconfig.json بروید و مطمئن شوید که target روی es5 یا es6 است (بسته به انتخاب و سلیقه خودتان). سپس module باید روی es2015 باشد. حتما outDir را مشخص کنید اما rootDir را کامنت کنید چرا که دیگر نیازی به آن نداریم. حالا باید در کنار فایل tsconfig.json یک فایل دیگر به نام webpack.config.js ایجاد کنیم (نام آن دقیقا باید به همین شکل باشد). این فایل از قابلیت های nodejs استفاده می کند بنابراین باید از دستور export درون nodejs استفاده کنیم تا شیء خاصی را export نماییم. این شیء حاوی تنظیمات Webpack خواهد بود.

در وهله اول باید به webpack بگویید که فایل اصلی پروژه شما چه فایلی است. دلیل مشخص کردن این فایل این است که webpack بداند از کجا شروع کند و دستورات import و غیره را بررسی کند. در پروژه ما app.ts فایل اصلی است اما قبل از آنکه آن را مشخص کنیم باید به فایل های پروژه مان برگردیم و پسوند js را از دستورات import حذف کنیم. یعنی کد زیر را:

import { ProjectInput } from './components/project-input.js';

تبدیل به کد زیر کنید:

import { ProjectInput } from './components/project-input';

این کار را برای تک تک دستورات import انجام دهید چرا که هنگام کار با خود مرورگر ها باید پسوند را داشته باشیم اما webpack نیازی به آن ندارد بلکه خودش پسوند را اضافه می کند. اگر پسوند را باقی بگذارید webpack به دنبال فایل هایی با پسوند js.js می گردد که برنامه را خراب می کند. حالا به webpack.config.js برمی گردیم و می گوییم:

module.exports = {
  entry: './src/app.ts'
};

entry یعنی نقطه شروع یا فایل اصلی پروژه ما که همان app.ts است. در مرحله بعد باید output را مشخص کنیم، یعنی محلی که فایل نهایی جاوا اسکریپت ما به صورت bundle شده در اختیارمان قرار می گیرد:

const path = require('path');

module.exports = {
  entry: './src/app.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

از آنجایی که webpack مسیر مطلق (absolute path) می خواهد، نمی توانیم مانند قبل مستقیما مسیر dist را مشخص کنیم. به همین خاطر در ابتدای فایل نیاز به ماژول path داریم که جزئی از nodejs است و نیاز به نصب جداگانه ندارد. از آنجایی که ما قبلا nodejs را نصب کرده ایم (در غیر این صورت نمی توانستیم از دستورات npm استفاده کنیم) می توانیم به صورت بالا آن را require کنیم. این ها همگی نحوه نوشتن دستورات nodejs هستند بنابراین اگر آن ها را نمی فهمید جای نگرانی نیست، تصور کنید در این جلسه با آن ها آشنا شده اید! حالا متد resolve از ماژول path به ما اجازه می دهد که از یک پوشه خاص، یک absolute path یا مسیر مطلق بسازیم. dirname نیز یک ثابت سراسری در nodejs است. در نهایت این کد یک مسیر مطلق را به پوشه dist ما خواهد ساخت.

توجه داشته باشید که webpack فقط یک bundler است بنابراین نمی داند چطور فایل های typescript ما را به جاوا اسکریپت تبدیل کند. در قسمت بعد این مورد را برای Webpack کدنویسی می کنیم.

ماژول و namespace: آشنایی با Webpack

Module and Namespace: Webpack