یه زمانی، وقتی می‌خواستیم یه سایت باحال و پر زرق و برق بسازیم، باید با کلی فایل جاوااسکریپت، CSS و HTML دست و پنجه نرم می‌کردیم. همه چی به نظر بهم ریخته و نامنظم بود. یه خط کد اینجا، یه خط کد اونجا، و دیگه حساب کار از دستمون درمی رفت. هر چی بیشتر فایل اضافه می‌کردیم، اوضاع پیچیده‌تر می‌شد و سرعت بارگذاری سایت هم افتضاح می‌شد. حالا فکر کن، بازدیدکننده‌های سایت مجبورن کلی صبر کنن تا همه چی لود بشه. معلومه که حالشون گرفته می‌شه و شاید اصلاً سایت رو ببندن و برن!

اینجا بود که همه فهمیدن نیاز به یه ابزار داریم که بیاد و این آشفتگی رو سر و سامون بده. ابزاری که بتونه همه فایل‌ها رو جمع و جور کنه، وابستگی‌ها رو مدیریت کنه و در نهایت، زمان بارگذاری سایت رو بیاره پایین. اینجاست که bundlerها به دنیا اومدن. اما خب، همه ی bundlerها شبیه هم نیستن. بعضی‌ها پیچیده ان و بعضی‌ها خیلی کاربرپسند نیستن. یکی از این باندلرها Parcel هست که در این مقاله بیشتر باهاش آشنا می‌شیم.

Bundler چیست؟

خب حالا اگه هنوز با واژه "bundler" آشنا نیستی، بیا تا به زبون ساده برات توضیح بدم. قدیما، وقتی توسعه وب بیشتر با جاوااسکریپت خام یا JQuery انجام می‌شد، توسعه دهنده‌ها نیاز به ابزارهای پیچیده نداشتن. کافی بود کدهای جاوااسکریپتت رو تو یه فایل بنویسی و اون فایل رو توی index.html بارگذاری کنی. اما با ظهور فریم ورک‌های وب، شیوه کدنویسی ما - توسعه دهنده‌های وب - تغییر کرد. حالا مرورگرها نمی‌تونن همه کدهای پیشرفته ای که می‌نویسیم رو بفهمن، واسه همین نیاز به یه تغییر و تحول داریم. اینجاست که bundler وارد می‌شه.

Parcel چیست؟

Parcel Bundler یه ابزار قدرتمنده که توسعه دهنده‌ها برای باندل کردن منابع وب ازش استفاده می‌کنن. این ابزار تجربه ای یکپارچه و راحت برای توسعه دهنده‌ها فراهم می‌کنه.

Parcel Bundler به خاطر ویژگی پیکربندی صفرش معروفه، یعنی برای باندل کردن اپلیکیشن وب، نیازی به فایل‌های تنظیمات نداری. این ابزار سریع، کارآمد و قابل اعتماده و از انواع فایل‌ها مثل HTML ،CSS و جاوااسکریپت پشتیبانی می‌کنه.

Parcel Bundler همچنان به روز می‌شه و نیازهای توسعه وب رو برآورده می‌کنه.

این ابزار برای باندل کردن استفاده می‌شه، که فرآیند دنبال کردن فایل‌های وارد شده و ادغام اونا تو یه فایل یا چند فایل هست. این فرآیند عملکرد اپلیکیشن وب رو با کاهش تعداد درخواست‌های HTTP بهبود می‌ده.

چرا Parcel؟ راحت‌تر و سریع‌تر از همیشه!

خیلی‌ها ممکنه بپرسن چرا باید از Parcel استفاده کنیم؟ مگه ابزارهای دیگه مثل Webpack و Browserify کارشون رو خوب انجام نمی‌دن؟ خب، بیایید ببینیم Parcel چه ویژگی‌های خاصی داره که بقیه ندارن و چرا استفاده ازش یه تصمیم هوشمندانه ست.

بدون دردسر پیکربندی

بیشتر bundlerها پر از تنظیمات و پلاگین‌های پیچیده ان. بعضی وقتا باید صدها خط تنظیمات بنویسی تا بالاخره پروژه ت کار کنه. این نه تنها خسته کننده ست، بلکه وقت گیر هم هست و احتمال اینکه چیزی رو اشتباه انجام بدی زیاده. Parcel این مشکل رو حل کرده. با Parcel نیازی به هیچ پیکربندی ای نداری. فقط کافیه مسیر ورودی پروژه ت رو بهش بدی و خودش همه کارها رو انجام می‌ده.

سرعت بی نظیر

خیلی از bundlerهای قدیمی کندن. پروژه‌های بزرگ با کلی فایل و وابستگی ممکنه چند دقیقه طول بکشه تا ساخته بشن. این مخصوصاً وقتی داری کدت رو توسعه می‌دی و هی تغییرات می‌دی خیلی اعصاب خردکنه. Parcel از پردازش‌های موازی استفاده می‌کنه تا کدت رو سریع‌تر کامپایل کنه و از پردازنده‌های چند هسته ای مدرن بهره می‌بره. این یعنی سرعت ساخت اولیه خیلی بیشتره. همچنین یه کش سیستم فایل داره که نتایج کامپایل رو برای فایل‌ها ذخیره می‌کنه تا شروع‌های بعدی حتی سریع‌تر بشن.

تبدیل‌های هوشمند

بیشتر bundlerهای قدیمی از string loaders/transforms استفاده می‌کنن که چندین بار فایل رو پردازش می‌کنن. این روش ناکارآمده. Parcel به جای این کار از ASTs استفاده می‌کنه. یعنی فقط یک بار فایل رو پارس می‌کنه و چندین تبدیل روی همون پارس انجام می‌ده و در نهایت یک بار کد رو تولید می‌کنه. این روش هم سریع تره و هم کارآمدتر.

ویژگی‌های خفن مثل hot module replacement و code splitting

Parcel یه سرور توسعه داخلی داره که از hot module replacement پشتیبانی می‌کنه. این یعنی به محض اینکه تغییراتت رو ذخیره کنی، Parcel اونا رو دوباره می‌سازه و به مرورگر می‌فرسته. همچنین با ویژگی code splitting، می‌تونی باندل‌های جداگانه برای بخش‌های مختلف اپلیکیشن درست کنی تا سرعت بارگذاری بیشتر بشه. فرض کن اپلیکیشن تو سه تا صفحه داره، یکی صفحه ثبت نام و دو تای دیگه فقط وقتی قابل دسترس هستن که کاربر وارد شده باشه. به جای اینکه یه باندل غول پیکر بسازی و همه رو یه جا لود کنی، می‌تونی فقط برای کامپوننت ثبت نام یه باندل بسازی. حالا اگه کاربر وارد نشده باشه، وقتی اپلیکیشن رو باز می‌کنه، مرورگر فقط باندل ثبت نام رو لود می‌کنه که باعث می‌شه زمان بارگذاری سریع‌تر بشه و تجربه کاربری بهتری داشته باشی.

حالا که دیدی Parcel چقدر خفن و کاربردیه، وقتشه که خودت امتحانش کنی و از این ابزار قدرتمند برای پروژه‌های وب ت استفاده کنی. شک نکن که عاشق سرعت و سادگی کار باهاش می‌شی!

معایب Parcel

پارسل هم مثل هر ابزار دیگه ای علاوه بر ویژگی‌های مثبتی که داره، چالش‌ها و معایبی هم داره که در این بخش چند مورد رو بررسی می‌کنیم.

• پشتیبانی محدود از پلاگین ها: در مقایسه با ابزارهایی مثل وب پک، Parcel پشتیبانی کمتری از پلاگین‌ها داره. اگه پروژه ت به پلاگین‌های خاصی نیاز داره، ممکنه Parcel برات کافی نباشه.
• مناسب برای پروژه‌های کوچک و متوسط: Parcel بیشتر برای پروژه‌های کوچک و متوسط مناسب تره و برای پروژه‌های خیلی بزرگ ممکنه بهینه نباشه.
• مستندات کمتر: مستندات Parcel نسبت به برخی از رقباش کمتر و گاهی ناقصه که می‌تونه در یادگیری و استفاده اولیه ازش مشکلاتی ایجاد کنه.

Parcel چطور کار می‌کند؟

خب، حالا بیایید ببینیم Parcel دقیقاً چطور کار می‌کنه.

مرحله اول: دارایی‌ها (Assets)

تصور کن داری خونه ت رو تمیز می‌کنی و همه وسایل رو دسته بندی می‌کنی. یه دسته کتاب، یه دسته لباس، یه دسته ابزار. Parcel هم همین کار رو با فایل‌های پروژه ت می‌کنه. هر چیزی که تو پروژه ت هست - مثل فایل‌های جاوااسکریپت، CSS ،HTML، و حتی تصاویر - رو می‌گیره و دسته بندی می‌کنه. به این دسته‌ها می‌گیم "دارایی ها" (assets).

مرحله دوم: تبدیل دارایی‌ها به باندل‌ها (Bundles)

حالا وقتشه که این دارایی‌ها رو بسته بندی کنیم، درست مثل وقتی که تو اسباب کشی همه چیز رو تو جعبه می‌ذاری. Parcel این دارایی‌ها رو به باندل‌ها تبدیل می‌کنه. یه باندل در اصل یه جعبه ست که چندین فایل مختلف رو تو خودش جا داده. مثلاً یه باندل می‌تونه شامل یه فایل جاوااسکریپت، یه فایل CSS و چند تا تصویر باشه.

مرحله سوم: ساخت درخت دارایی ها

فکر کن تو یه باغچه داری که توش درخت‌های مختلفی کاشتی. هر درخت یه سری شاخه داره و هر شاخه یه سری برگ. Parcel هم یه درخت از دارایی‌ها می‌سازه که هر دارایی شاخه‌های خودش رو داره. این درخت کمک می‌کنه که Parcel بفهمه هر فایل به چه فایل‌های دیگه ای وابسته ست و چطور باید اونا رو با هم ترکیب کنه.

مرحله چهارم: ساخت درخت باندل ها

حالا که درخت دارایی‌ها ساخته شد، Parcel این درخت رو به یه درخت باندل تبدیل می‌کنه. هر باندل یه جعبه ست که شاخه‌ها و برگ‌های مربوط به خودش رو داره. مثلاً اگه یه فایل جاوااسکریپت یه فایل CSS رو ایمپورت کنه، این فایل CSS به عنوان یه باندل هم سطح با فایل جاوااسکریپت قرار می‌گیره.

مرحله پنجم: بسته بندی نهایی

در نهایت، Parcel همه این باندل‌ها رو بسته بندی می‌کنه و آماده می‌کنه که تو مرورگر بارگذاری بشن. هر باندل توسط یه پکیجر خاص به نوع فایل نوشته می‌شه. پکیجرها می‌دونن چطور کد هر دارایی رو با هم ترکیب کنن و به فایل نهایی تبدیل کنن که توسط مرورگر بارگذاری می‌شه.

نصب و راه اندازی Parcel

خب حالا که فهمیدیم Parcel چیه و چطوری کار می‌کنه، بریم سراغ نصب و راه اندازیش. قراره قدم به قدم جلو بریم و یه پروژه کوچیک رو با استفاده از Parcel بسازیم.

مرحله 1: نصب Parcel Bundler

اول از همه، باید Parcel رو نصب کنیم. این آموزش از یه پوشه به اسم your_project به عنوان دایرکتوری کاری استفاده می‌کنه، ولی می‌تونی هر اسمی که دوست داری رو بذاری. تکست ادیتور مورد علاقت رو باز کن و یه ترمینال یا کامند پرامپت رو اجرا کن و مطمئن شو توی دایرکتوری اصلی پروژه ت هستی.

حالا دستور زیر رو برای شروع پروژه با npm اجرا کن:

npm init

این دستور یه سری سوال در مورد پروژه ت ازت می‌پرسه. می‌تونی با زدن کلید Enter از همه سوال‌ها رد بشی یا هر چیزی که دوست داری رو تنظیم کنی. بعد از اتمام، یه فایل package.json خواهی داشت که شبیه اینه:

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

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

npm install --save-dev parcel

فلگ --save-dev بسته نصبی رو به عنوان یه وابستگی توسعه ذخیره می‌کنه. این یعنی پروژه ت در طول فرآیند توسعه به Parcel وابسته خواهد بود.

بعد از نصب، یه فایل package-lock.json و یه پوشه node_modules به پروژه ت اضافه می‌شه. فایل package-lock.json تمام وابستگی‌های پروژه رو توضیح می‌ده. پوشه node_modules هم شامل همه بسته هایی که پروژه ت بهشون نیاز داره می‌شه.

حالا فایل package.json باید شبیه این باشه:

{
  "name": "your_project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "parcel": "^2.7.0"
  }
}

حالا که Parcel به عنوان یه وابستگی محلی نصب شده، آماده ایم تا پروژه مون رو شروع کنیم.

مرحله 2: ساخت فایل‌های اپلیکیشن

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

Parcel می‌تونه هر فایلی رو به عنوان نقطه ورود اپلیکیشن قبول کنه. ما از یه فایل HTML به اسم index.html به عنوان نقطه ورود استفاده می‌کنیم.

با استفاده از تکست ادیتور، یه پوشه به اسم src توی دایرکتوری پروژه ت بساز تا کدها رو سازماندهی کنی. اگه از Visual Studio Code استفاده می‌کنی، راست کلیک کن داخل دایرکتوری پروژه ت و یه پوشه جدید بساز و اسمش رو بذار src.

داخل پوشه src، یه فایل index.html بساز. محتوای این فایل رو به صورت زیر وارد کن:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Your Parcel Project</title>
  </head>
  <body>
    <h1>Welcome to Parcel!</h1>
    <div class="sammy-wrapper">
      <div class="img-wrapper sammy-1">
        <img src="https://assets.digitalocean.com/articles/docker_node_image/sammy.png" alt="Sammy the Shark">
      </div>
    </div>
    <button>Change the Background Color</button>
    <script type="module" src="js/app.js"></script>
  </body>
</html>

این فایل HTML صفحه اصلی اپلیکیشنته که لینک هایی به فایل CSS و جاوااسکریپت داره.

داخل پوشه src، یه پوشه به اسم css بساز و داخل اون یه فایل CSS به اسم style.css ایجاد کن:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
}
body {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: sans-serif;
  color: white;
  background: var(--bg, rgb(26, 80, 190));
  font-size: 16px;
}
h1 {
  font-size: 3rem;
  padding: 2rem;
}
.img-wrapper {
  max-width: 600px;
  padding: 0 1rem;
  margin: 2rem;
  cursor: pointer;
}
.img-wrapper img {
  width: 100%;
}
button {
  font-size: inherit;
  font-size: 1rem;
  padding: .5rem;
  margin: 8rem 0;
}

حالا داخل پوشه src، یه پوشه دیگه به اسم js بساز و داخل اون یه فایل جاوااسکریپت به اسم app.js ایجاد کن با کد زیر:

const btn = document.querySelector('button');
const body = document.querySelector('body');
let availableColors = ['darkslateblue', 'midnightblue', 'teal', 'tomato', 'seagreen', 'royalblue', 'saddlebrown', 'indigo', 'olivedrab', 'rosybrown'];
btn.addEventListener('click', function() {
  const randomizeColor = Math.floor(Math.random() * availableColors.length);
  body.style.setProperty('--bg', availableColors[randomizeColor]);
});

این کد جاوااسکریپت یه رنگ تصادفی از آرایه availableColors انتخاب می‌کنه و پس زمینه صفحه رو به اون رنگ تغییر می‌ده.

ساختار فعلی پروژه ت باید به این شکل باشه:

your_project/
|── node_modules
|── src/
|   |── css/
|   |   |── style.css
|   |── js/
|   |   |── app.js
|   |── index.html
|── package.json
|── package-lock.json

مرحله 3: اجرای اپلیکیشن روی سرور توسعه

برای دیدن اپلیکیشن می‌تونی فایل HTML رو توی مرورگر باز کنی، اما اگه هر تغییری بدی، باید دستی مرورگر رو رفرش کنی. Parcel یه سرور توسعه داره که وقتی کدتو تغییر می‌دی، به صورت خودکار اپلیکیشن رو توی مرورگر آپدیت می‌کنه. به این می‌گن Hot Reloading.

برای اجرای سرور توسعه Parcel، توی ترمینال به دایرکتوری پروژه ت برو و دستور زیر رو اجرا کن:

npx parcel src/index.html

خروجی باید چیزی شبیه این باشه:

Server running at http://localhost:1234
✨ Built in 5ms

حالا می‌تونی اپلیکیشنت رو توی مرورگر با آدرس http://localhost:1234 ببینی. هر تغییری که توی کدت بدی، بلافاصله توی مرورگر نمایش داده می‌شه بدون اینکه نیاز باشه سرور رو رفرش کنی.

مرحله 4: ساخت اسکریپت‌های npm برای شروع و ساخت اپلیکیشن

به جای اینکه هر بار دستور npx parcel src/index.html رو توی ترمینال تایپ کنی، می‌تونی اسکریپت‌های npm رو توی فایل package.json بسازی تا این کارهای تکراری رو خودکار کنی.

فایل package.json رو باز کن و خطوط زیر رو اضافه کن:

{
  "name": "your_project",
  "version": "1.0.0",
  "description": "",
  "source": "src/index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build --dist-dir public"
  },
  "author": "",
  "license": "ISC"
}

حالا به جای تایپ کردن دستور npx parcel src/index.html، می‌تونی دستور npm start رو توی ترمینال اجرا کنی:

npm start

خروجی باید چیزی شبیه این باشه:

Server running at http://localhost:1234
✨ Built in 5ms

مرحله 5: ساخت اپلیکیشن برای تولید

یکی از ویژگی‌های اصلی یه bundler، ادغام فایل هاست. وقتی دستور build رو اجرا کنی Parcel این کار رو برات انجام می‌ده. مثلاً اگه چندین فایل CSS داشته باشی که به هم وابسته ان، Parcel اونا رو توی یه فایل واحد ترکیب می‌کنه. همین کار رو برای فایل‌های جاوااسکریپت هم انجام می‌ده. می‌تونی برای اطلاعات بیشتر در مورد این فرآیند به مستندات Parcel مراجعه کنی.

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

اول، مطمئن شو که توی دایرکتوری اصلی پروژه ت هستی، سپس دستور زیر رو توی ترمینال یا کامند پرامپت وارد کن:

npm run build

خروجی باید چیزی شبیه این باشه:

> your_project@1.0.0 build
> parcel build
✨ Built in 767ms
public/index.html            781 B    239ms
public/index.9daf4050.css    582 B     21ms
public/index.a9c94235.js     532 B    179ms

همونطور که دیدی، خروجی پیش فرض Parcel برای فایل‌ها توی پوشه dist قرار می‌گیره. چون توی اسکریپت build مشخص کردی که فایل‌ها توی دایرکتوری public ذخیره بشن، Parcel این پوشه رو می‌سازه و فایل‌های تولیدی رو توش قرار می‌ده. فایل‌های توی این پوشه با فایل هایی که در طول توسعه استفاده می‌کردی فرق دارن چون این‌ها ترکیب، کمینه سازی و بهینه سازی شدن.

مثلاً اگه فایل public/index.html رو باز کنی، کد باید به صورت کمینه شده باشه:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="/index.9daf4050.css"><title>Your Parcel Project</title></head><body><h1>Welcome to Parcel!</h1> <div class="sammy-wrapper"><div class="img-wrapper sammy-1"><img src="https://assets.digitalocean.com/articles/docker_node_image/sammy.png" alt="Sammy the Shark"></div></div> <button>Change the Background Color</button> <script type="module" src="/index.a9c94235.js"></script></body></html>

مثل پوشه dist، توی دایرکتوری public هم نباید مستقیم کاری انجام بدی. اگه نیاز به تغییر کدی داری، این تغییرات رو مستقیم توی فایل‌های داخل پوشه src انجام بده.

همونطور که با دستور npm start می‌تونی سرور توسعه رو راه اندازی کنی، با دستور npm run build هم می‌تونی فایل‌های تولید رو دوباره بسازی. پوشه public و فایل‌های داخلش برای زمانی که آماده برای دیپلوی کردن اپلیکیشن روی یه وب سرور هستی استفاده می‌شن.

حالا که اپلیکیشن رو با استفاده از Parcel ساختی و باندل کردی، آماده ای که اونو دیپلوی کنی و از سرعت و عملکرد بهینه ش لذت ببری.

مقایسه Parcel با Webpack و Gulp

در این بخش می‌خوایم پارسل رو با وب پک و گالپ مقایسه کنیم.

Parcel و Webpack

Webpack یکی از مشهورترین bundlerهاست که مدت هاست در بازار حضور داره. هر دو ابزار ویژگی‌های منحصربه فردی دارن:

• سرعت: Parcel به دلیل استفاده از پردازش چند رشته ای و کش کردن، معمولاً سرعت بیشتری نسبت به Webpack داره.
• پیکربندی: Webpack نیاز به پیکربندی بیشتری داره و برای پروژه‌های پیچیده مناسب تره، در حالی که Parcel با پیکربندی صفر کار می‌کنه و برای پروژه‌های سریع و ساده عالیه.
• پلاگین ها: Webpack از پلاگین‌های بیشتری پشتیبانی می‌کنه و انعطاف پذیری بیشتری داره. اگه پروژه ت به پلاگین‌های خاصی نیاز داره، Webpack گزینه بهتریه.
• جامعه کاربری: Webpack به دلیل قدیمی‌تر بودن، جامعه کاربری بزرگ‌تری داره که می‌تونه در حل مشکلات و پیدا کردن منابع آموزشی کمک کننده باشه.

Parcel و Gulp

Gulp یه ابزار دیگه برای مدیریت وظایف و باندل کردن فایل هاست. مقایسه این دو ابزار:

• سرعت: Parcel به دلیل استفاده از تکنیک‌های پیشرفته، سرعت بالاتری نسبت به Gulp داره.
• پیکربندی: Gulp نیاز به تنظیمات بیشتری داره و برای مدیریت وظایف مختلف باید کدهای بیشتری بنویسی، در حالی که Parcel تقریباً همه چیز رو خودکار انجام می‌ده.
• سهولت استفاده: Parcel به دلیل پیکربندی ساده‌تر و خودکار، برای توسعه دهنده‌های تازه کار مناسب تره. Gulp انعطاف پذیری بیشتری داره، ولی یادگیری و استفاده ازش زمان بیشتری می‌بره.

سوالات متداول

1. چرا باید از Parcel استفاده کنیم؟

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

2. آیا Parcel رایگانه؟

بله، Parcel یه ابزار منبع باز و رایگانه.

3. آیا Parcel برای پروژه‌های بزرگ مناسبه؟

Parcel بیشتر برای پروژه‌های کوچک و متوسط مناسبه، اما می‌شه از اون تو پروژه‌های بزرگ هم استفاده کرد.

4. چطور می‌تونم Parcel رو نصب کنم؟

می تونی از npm یا yarn برای نصب Parcel استفاده کنی. کافیه دستور npm install -g parcel-bundler رو توی ترمینال وارد کنی.

5. آیا Parcel از پلاگین‌ها پشتیبانی می‌کنه؟

بله، Parcel از پلاگین‌های مختلفی پشتیبانی می‌کنه که می‌تونی اونا رو نصب و استفاده کنی.

6. چطور می‌تونم Parcel رو با فریمورک‌های دیگه مثل React و Vue استفاده کنم؟

Parcel با اکثر فریمورک‌های مدرن مثل React و Vue سازگاره و به راحتی می‌تونی اونا رو با هم ترکیب کنی. فقط کافیه فایل ورودی پروژه رو به Parcel بدی و بقیه کارها رو به اون بسپاری.

7. چرا سرعت Parcel بالاست؟

Parcel از پردازش موازی و کش سیستم فایل استفاده می‌کنه که باعث می‌شه سرعت ساخت پروژه‌ها به شدت افزایش پیدا کنه.

8. آیا Parcel به صورت خودکار فایل‌ها رو بهینه سازی می‌کنه؟

بله، Parcel به صورت خودکار فایل‌های خروجی رو بهینه سازی می‌کنه تا زمان بارگذاری کاهش پیدا کنه و عملکرد بهتری داشته باشی.

جمع بندی

در این مقاله با Parcel آشنا شدیم، ابزار قدرتمندی که به توسعه دهندگان کمک می‌کنه تا فایل‌های جاوااسکریپت و CSS خودشون رو بهینه سازی و مدیریت کنن. Parcel با ویژگی‌های منحصر به فردش، سرعت بالا و پیکربندی ساده، ابزاری بسیار مناسب برای پروژه‌های کوچک و متوسط هست. اگه به دنبال یه ابزار کارآمد و سریع برای باندل کردن فایل‌های خودت هستی، Parcel یکی از بهترین انتخاب هاست. حالا وقتشه که این ابزار عالی رو امتحان کنی و تجربه ات رو با بقیه به اشتراک بذاری!