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

JavaScript Application Setup

22 شهریور 1399
درسنامه درس 1 از سری آموزش Webpack
02-Webpack-4-The-Complete-Tutorial-For-Beginners-lesson1

در معرفی سری آموزش webpack، با مفهوم webpack و مزایای آن آشنا شدیم (البته هنوز مزایایی مانند بهینه سازی وجود دارد که از آن ها صحبت نکرده ایم). حالا نوبت آن است که یک پروژه بسیار بسیار ساده با دو فایل جاوا اسکریپت را طراحی کنیم تا بتوانیم از مزایای webpack روی آن استفاده کنیم. ابتدا یک پوشه به نام webpack4 یا هر نام دیگری که می خواهید، بسازید. درون این پوشه یک فایل HTML به نام index.html می سازیم که محتویات زیر را داشته باشد:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>

<body>

    <script src="./src/index.js"></script>
    <script src="./src/hello-world.js"></script>

</body>

</html>

همانطور که می بینید دو فایل جاوا اسکریپتی ما درون پوشه ای به نام src خواهند بود، بنابراین این پوشه را به همراه دو فایلی که در کد بالا می بینید ایجاد کنید. فایل hello-world.js بسیار ساده است و فقط یک دستور log را در خود دارد:

function helloWorld () {
    console.log('Hello World');
}

حالا در فایل index.js می خواهیم این تابع را صدا بزنیمُ بنابراین می گوییم:

helloWorld();

دقت کنید که از ES Module ها استفاده نکرده ام تا ترتیب بارگذاری فایل ها در index.html مهم باشد. در حال حاضر اگر به مرورگر بروید با خطا روبرو خواهید شد. چرا؟ به دلیل اینکه در فایل index.html ابتدا فایل index.js را بارگذاری کرده ایم و سپس فایل hello-world.js را صدا زده ایم به همین خاطر خطایی به ما نمایش داده می شود که چنین تابعی تعریف نشده است. اگر فایل index.html را به صورت زیر ویرایش کنیم چطور؟

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>

<body>

    <script src="./src/hello-world.js"></script>
    <script src="./src/index.js"></script>

</body>

</html>

حالا خطا از بین رفته و عبارت Hello World در قسمت کنسول مرورگر نمایش داده می شود. این یک مثال ساده از مشکلات چند فایلی بودن پروژه های ما است. تصور کنید در پروژه های بزرگتر که شاید 10 یا 20 فایل جداگانه داشته باشند، مدیریت و نگهداری از چنین صفحاتی غیر قابل تحمل می شود. چنین اعدادی که به شما می گویم، مبالغه نیستند. اگر به سورس کد اولیه پروژه های واقعی نگاهی بیندازید (بسته به سلیقه برنامه نویس) ممکن است چیزی حدود 40 ماژول داخلی جاوا اسکریپت و 20 یا 30 وابستگی خارجی پیدا کنید!

بنابراین بهتر است شروع به نصب webpack کنیم. برای نصب webpack در ترمینال vscode کد زیر را اجرا می کنم:

npm init -y

با این کار پوشه شما تحت نظر npm قرار می گیرد و فایلی به نام package.json برایتان ساخته می شود. با این کار تمام وابستگی های پروژه به صورت خودکار توسط npm مدیریت خواهد شد و نیازی به بررسی توسط ما نیست. پس از اجرای این دستور فایل package.json برایتان ساخته می شود که محتویات زیر را دارد:

{
  "name": "webpack4",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

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

npm install webpack webpack-cli --save-dev

با اجرای این کد ابتدا پکیج webpack برایمان نصب می شود که قلب Webpack است و سپس پکیج webpack-cli نصب خواهد شد که به ما اجازه می دهد دستورات ترمینال Webpack را اجرا کنیم. در نهایت --save-dev به فایل package.json می گوید که Webpack را به عنوان یکی از وابستگی های پروژه ما ذخیره کند اما این وابستگی از نوع development است یعنی فقط در هنگام توسعه برنامه به آن نیاز داریم، نه در نسخه نهایی آن.

حالا که webpack نصب شده است باید آن را پیکربندی کنیم. webpack معمولا برای انجام این کار از یک فایل جاوا اسکریپتی استفاده می کند که به صورت پیش فرض webpack.config.js نام دارد بنابراین این فایل را در پوشه webpack4 می سازم:

module.exports = {
    
}

محتویات اولیه این فایل به شکل زیر است. یعنی شما باید در این فایل یک شیء را که حاوی تنظیمات Webpack است به صورت یک ماژول export کنید. البته باید از syntax استفاده شده در کد بالا برای این کار استفاده کنید که syntax مربوط به nodejs می باشد. تنظیمات زیادی می تواند درون این شیء قرار بگیرد اما فعلا فقط سه مورد را قرار می دهیم:

module.exports = {
    entry: './src/index.js'
}

entry (به معنای «ورودی») یک نقطه ورود برای webpack است. هر فایلی را که در این قسمت مشخص کنید، Webpack از همان فایل شروع می کند و وابستگی ها (مثلا دستورات import و ...) را پیدا می کند. این فایل همیشه باید فایل اصلی پروژه شما باشد.

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.js',
        path: './dist'
    },
    mode: 'none'
}

گزینه بعدی output است که مربوط به خروجی ما بوده و برایش دو گزینه را مشخص کردیم. filename نام نهایی فایل ما خواهد بود (همان فایلی که پس از ادغام تمام فایل ها به وجود می آید) که می تواند هر نامی داشته باشد. من برایش bundle.js را انتخاب کرده ام. path نیز مسیر قرارگیری bundle.js را مشخص می کند که معمولا به صورت قراردادی پوشه ای به نام dist است. از آنجایی که این پوشه در برنامه ما وجود ندارد، Webpack خودش آن را خواهد ساخت. من در این قسمت از عمد کدهای مشکل دار نوشته ام. آیا می توانید متوجه آن شوید؟ در قسمت بعد در مورد این اشتباه صحبت خواهیم کرد.

در نهایت گزینه ای به نام mode را می بینید که فعلا آن را روی none گذاشته ایم و بعدا در مورد آن توضیحاتی را ارائه می دهم. حالا برای اینکه بتوانیم Webpack را به راحتی اجرا کنیم بهتر است یک اسکریپت خاص را برای آن در فایل package.json تعریف کنیم:

{
  "name": "webpack4",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  }
}

حالا هر زمان که npm run build را اجرا کنیم، Webpack برای ما اجرا می شود. در قسمت بعد شروع به استفاده از Webpack می کنیم.

تمام فصل‌های سری ترتیبی که روکسو برای مطالعه‌ی دروس سری آموزش Webpack توصیه می‌کند:
نویسنده شوید
دیدگاه‌های شما

در این قسمت، به پرسش‌های تخصصی شما درباره‌ی محتوای مقاله پاسخ داده نمی‌شود. سوالات خود را اینجا بپرسید.