وب پک چیست و چرا باید از آن استفاده کنیم؟ (قسمت اول)

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

خب بریم سر اصل مطلب؛ همیشه سرکلاس وقتی میخوام یه چیز جدید به بچه ها بگم سوال اولی که میپرسن اینه که این چیه و به چه درد میخوره و چرا باید ازش استفاده کنیم:) منم برای اینکه به این سوال بچه ها پاسخ بدم اول براشون یه نیاز ایجاد میکنم و بعدا توضیح میدم.

یه نکته بگم اگه با نود جی اس آشنایی ندارید این مقاله بدردتون نمیخوره، اگه دوست دارین با استفاده از نود یه پروژه کوچیک با همدیگه بنویسیم همینجا تو نظرات اعلام کنید که تو مقالات بعدی بریم سراغش.

خب حتما براتون پیش اومده که وقتی دارین توی فرانت کد میزنین کلی کتابخونه رو خودتون ایمپورت کرده باشین و خب بدلیل تحریم ها و یا پرفورمنس یا هرعلت دیگه ای مجبور میشین اون کتابخونه ها رو دانلود کنید و از لوکال خودتون وارد کنید.

تا حالا براتون پیش اومده که یه اسکریپتی رو اضافه کنین که توش از یه کتابخونه مثل جی کوئری استفاده کردین ولی چون اسکریپتتون رو بالا از ایمپورت جی کوئری ایمپورت کرده بودید کدتون اجرا نشده و خطا گرفتین؟ یا مرورگر کد جاوا اسکریپتی که نوشتین رو کش کرده و تغییراتی که رو کدتون اعمال کردین رو لود نمیکنه؟

تاحالا شده از یه قابلیت پیشرفته در جاوا اسکریپت بخواین استفاده کنید ولی نگران این باشید که آیا همه مرورگرها این قابلیت رو ساپورت میکنن یا نه؟

در واقع هرچقدر پروژه بزرگتر میشه مدیریت این مسائل سختر میشه شاید برای تک تک این مسائل راه حل های خوبی وجود داشته باشه ولی چقدر خوب میشد که یه راه حل جامع وجود داشت که این مشکلات اصلا بوجود نمیامد. خب خبر خوب اینکه این راه حل وجود داره و اسمش وب پک (webpack) هست.

کار و‌ب‌پک باندل کردن هست و تمامی فایل های شما از قبیل استایل‌ها ، عکس‌ها ، فونت‌ها و مهمتر از همه فایل‌های جاوااسکریپت شما رو مدیریت میکنه. یه خوبی دیگه‌ای هم که وب‌پک داره اینه که از پلاگین‌ها پشتیبانی میکنه و کارهای مثل مینیفای کردن یا تبدیل فایل‌های sass به css رو میتونه براتون به راحتی انجام بده.

خب اگه از حرف زدن خسته شدین بهتر بریم سراغ کد و کمی دست به کد بشیم

خب مراحل زیر رو با همدیگه انجام میدیم

mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli --save-dev

خط اول یه پوشه با اسم webpack-demo میسازه اگه ویندوزی هستید نترسید چیزخاصی نیست یه راست کلیک کنید و یه پوشه (folder) با این اسم هرجایی که دوست داشتید بسازید:) تو خط دوم میریم داخل پوشه و خط فرمان از این به بعد مقصد دستوراتش این پوشه اس. خط بعدی یه پروژه نود رو استارت میکنیم -y میگه ازم سوال نکن و همه سوالات رو خودت پاسخ پیشفرض بده برای وقتی که حال ندارید خوبه:)) خط آخر هم webpack و webpack-cli رو به عنوان کتابخونه های مورد نیاز برای توسعه برای پروژه نصب میکنه. خب حالا توی پوشمون یه فایل package.json داریم و یه پوشه node_module که کتابخونه های نود توش نصب شده.

خب توی همین پوشه webpack-demo یه فایل درست کنید به اسم index.html و یه پوشه جدید به اسم src و داخل این پوشه جدید یه فایل index.js بسازید ساختار پوشمون باید این شکلی شده باشه

webpack-demo
|-package.json
|-index.html
|-src
  |-index.js

حالا داخل فایل index.html کد های زیر رو اضافه میکنیم

<!DOCTYPE html>
<html>
<head>
<meta charset=&quotutf-8&quot />
<title>Getting Started</title>
</head>
<body>
<div id='root'></div>
<script
src=&quothttps://code.jquery.com/jquery-3.6.0.min.js&quot integrity=&quotsha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=&quot crossorigin=&quotanonymous&quot>
<script src=&quot./src/index.js&quot>
</body>
</html>

حالا داخل فایل index.js کد های زیر رو اضافه میکنیم

$('#root').html('hello word')

خب کل کاری که ما کردیم این بود که یه div با ایدی root ساخت و محتویاتش رو با جی کوئری تغییر دادیم تا اینجا هیچ چیز جدید وجود نداشت اما مشکل این شیوه کد زنی چیه؟

داخل کد index.js ما گفته نشده که این فایل به وجود جی کوئری وابسته اس
اگه فایل جی کوئری لود نشه و یا حتی ترتیبش اشتباه باشه و زیر اسکریپت ما ایمپورت بشه کد ما کار نمیکنه
اگه ما کتابخونه ای رو وارد کنیم ولی به هردلیلی ازش استفاده نکنیم مرورگر متوجه نمیشه و کماکان اون رو لود میکنه

خب بریم ادامه ببینیم چجوری میشه این مشکلات رو با وب پک حل کرد اول بیاید یه پوشه با نام dist توی همون پوشه webpack-demo بسازید و فایل index.html رو منتقل کنید به اونجا و داخل index.html رو اصلاح کنید:

<!DOCTYPE html>
<html>
<head>
<meta charset=&quotutf-8&quot />
<title>Getting Started</title>
</head>
<body>
<div id='root'></div>
<script src=&quotmain.js&quot>
</body>
</html>

ما الان اسکریپت جی کوئری رو پاک کردیم و اسکریپت خودمون رو هم اسمش رو عوض کردیم ولی چرا؟ چون قرار اسکریپت جدید رو وب پک برامون بسازه یکم صبر کنید:)

حالا توی همون خط فرمان قبلی بزنید

npm i jquery --save

با این کار پکیج منیجر میاد و جی کوئری رو روی سیستم نصب میکنه

حالا فایل index.js رو باز کنید و کد زیر رو به اولش اضافه کنید

import $ from 'jquery'

حالا نوبت جادوگری وب پک هست توی خط فرمان بزنید

npx webpack

این خط باعث میشه وب پک قایل نهایی رو بسازه حالا یه نگاه به پوشه dist بندازید. میبینید که یه فایل main.js به پروژه اضافه شده که اگه بازش کنید کل سورس جی کوئری به علاوه کد شما داخلش هست.

خب این یه استارت ساده بود وب پک کلی امکانات داره و کلی تنظیمات که یاد دادن همه این ها تو یه مقاله نمیگنجه فعلا برای این مقاله در همین حد کافیه تو مقاله بعدی قول میدم کمتر حرف بزنم و بیشتر کد بزنیم.

خوشحال میشم در مورد اولین نوشته من نظر بدین اگه سوالی هم داشتید همینجا ازم بپرسید.

تو قسمت بعدی یاد میگریم چجوری وب پک رو کانفیگ کنیم چجوری استایل ها رو استفاده کنیم از عکس ها چجوری استفاده کنیم و فونت ها رو هم لود کنیم

سعی میکنم فایلهای هر پروژه رو هم روی گیت بزارم و آدرسش رو آخر مقاله بزارم تا اگه مشکلی بود بتونید کد رو ببینید. دوستون دارم فعلا خدانگهدار.