آموزش جامع Webpack (بخش دوم: آشنایی مقدماتی) — از صفر تا صد

۱۲۲ بازدید
آخرین به‌روزرسانی: ۰۵ مهر ۱۴۰۲
زمان مطالعه: ۳ دقیقه
آموزش جامع Webpack (بخش دوم: آشنایی مقدماتی) — از صفر تا صد

در این بخش از طریق مقالات آموزش جامع Webpack با برخی مبانی این ابزار مهم جاوا اسکریپت آشنا می‌شویم. در بخش قبلی در مورد تاریخچه وب‌پک توضیح دادیم:

در این مقاله از یک دایرکتوری خالی شروع می‌کنیم و اپلیکیشنی با وابستگی‌ها می‌سازیم. در ادامه با استفاده از صرفاً چند خط کد راه‌اندازی، یک بسته ساده با استفاده از Webpack می‌سازیم.

آغاز یک پروژه

ترمینال را باز کنید، دایرکتوری پروژه خود را ایجاد کنید یا یک ریپازیتوری خالی را کلون کنید و پکیج‌های جدیدی ایجاد نمایید:

yarn init –y

توجه کنید که ما در این سری مقالات از yarn استفاده می‌کنیم، اما شما در صورت ترجیح می‌توانید از npm نیز استفاده کنید.

بدین ترتیب محیط npm ایجاد می‌شود. سپس یک فایل ساده با برخی کدهای جاوا اسکریپت به نام src/index.js می‌سازیم:

1const hello = subject => console.log(`Hello ${subject}!`);
2hello("OLX Dev!");

نصب وابستگی‌ها

برای نصب محیط زمان اجرای Webpack و کلاینت باید دستور زیر را اجرا کنیم:

1yarn add webpack webpack-cli –dev

اجرای build

اینک آماده حرکت هستیم. دستور زیر را اجرا کنید:

1yarn webpack

اگر از npm نسخه 5 به بالا استفاده می‌کنید می‌توانید از دستور زیر نیز بهره بگیرید:

npm webpack

نتیجه کار چیزی مانند زیر خواهد بود:

توجه کنید که webpack در مورد ارائه mode هشدار می‌دهد و دلیل این مسئله آن است که حالت production تصور شده است. در ادامه در مورد معنای این هشدار بیشتر توضیح خواهیم داد.

اکنون می‌توانیم خروجی را در dist/main.js مشاهده کنیم و این یک بسته (bundle) است.

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

با پیروی از ابزارهای بسته‌بندی قدیمی مانند Parcel، وب‌پک نسخه 4 نیز اکنون به همان ترتیب طراحی شده است.

همچنان که دیدید می‌توانیم بدون وجود هیچ گونه فایل پیکربندی آن را اجرا کنیم و احتمالاً متوجه شده‌اید که دو چیز تصور شده است:

  • فایل مدخل به صورت src/index.js است.
  • خروجی به صورت dist/main.js است.

علاوه بر این وقتی هشدار زیر را مشاهده می‌کنید:

The ‘mode’ option has not been set

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

اجرا با حالت‌های مختلف

در این بخش به بررسی وقایعی که در زمان اجرا با حالت‌های مختلف رخ می‌دهند خواهیم پرداخت. فایل dist/main.js را در زمانی که وب‌پک در حالت پروداکشن است باز کرده و دستور زیر را اجرا کنید:

yarn webpack --mode development

یک بار دیگر dist/main.js را بررسی کنید. این بار می‌بینید که نسخه non-uglified unoptimized بسته ایجاد شده است.

در آغاز کد زمان اجرای وب‌پک را خواهید دید که مسئول تفکیک ماژول (ایمپورت/اکسپورت) است و سپس کد پوششی را می‌بینید:

تفکیک ماژول در عمل

اکنون تابع ()hello را به فایل دیگری به نام hello.js می‌بریم:

1export const hello = subject => console.log(`Hello ${subject}!`);

و آن را در اندیس ایمپورت می‌کنیم:

1import { hello } from "./hello";
2hello("OLX Dev!");

اینک build جدید را بار دیگر اجرا کرده و نتیجه را روی بسته dist/main.js مورد بررسی قرار می‌دهیم.

راه‌اندازی اسکریپت‌های NPM

برای این که کارها ساده‌تر شوند، این دستورهای بیلد را روی فایل package.json می‌بریم و قطعه کد زیر را به آن اضافه می‌کنیم:

1"scripts": {
2  "build": "webpack --mode production",
3  "build:dev": "webpack --mode development"
4}

اکنون می‌توانیم build را صرفاً با دستور زیر اجرا کنیم:

yarn build

یا

yarn build:dev

اگر از NPM استفاده می‌کنید، باید از دستور npm run و سپس نام اسکریپت استفاده کنید.

احتمالاً وقتی بسته خود را بررسی کردید، متوجه شدید که همه کدهای ES6 همچنان در آن حضور دارند و این کار transpiling نبوده است.

باید اشاره کنیم چنان که در بخش قبلی گفتیم، وب‌پک صرفاً یک بسته‌بندی کننده است و اقدام به transpile کردن کد نمی‌کند. در واقع وظیفه وب‌پک صرفاً تفکیک ماژول و ارسال این ماژول‌ها از طریق بارگذارها به مصرف‌کنندگان است.

چیزی که مسئول transpile کردن از ES6/ES7 به ES5 است، babelJs نام دارد.

سخن پایانی

در این بخش از یک دایرکتوری خالی آغاز و پروژه‌ای با وابستگی‌های NPM ایجاد کردیم و در چند گام معدود با استفاده از اسکریپت‌ها اقدام به ساخت بسته‌های وب‌پک نمودیم. با این حال این وضعیت همچنان یک راه‌اندازی خام محسوب می‌شود و ما باید مرورگرهایی بیشتر از آنچه از +ES2015 پشتیبانی می‌کنند را در نظر بگیریم. در بخش بعدی با روش انجام صحیح این کار آشنا خواهیم شد. برای مطالعه بخش بعدی این سری مقالات روی لینک زیر کلیک کنید:

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

بر اساس رای ۰ نفر
آیا این مطلب برای شما مفید بود؟
اگر بازخوردی درباره این مطلب دارید یا پرسشی دارید که بدون پاسخ مانده است، آن را از طریق بخش نظرات مطرح کنید.
منابع:
tech.olx
نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *