campaign-edianeh-98

آموزش کار با Parcel - جایگزین ساده‌تر برای Webpack



visibility  
mode_comment   ۲

در این مطلب Parcel که یک module bundler برای اپلیکیشن‌های تحت وب هست رو بهتون آموزش میدم و کار با اون رو بصورت مقدماتی بهتون توضیح میدم.

ابزار Parcel از لحاظ کاربرد و کارایی در دسته ابزار قدرتمند Webpack قرار میگیره که نسبت به اون معایب و مزایایی داره. یکی از شعارهای اصلی Parcel اینه که بدون قرار دادن تنظیمات خاصی، خیلی از کارها رو بصورت اتوماتیک برای شما انجام میده. همچنین این ابزار از نظر سرعت خیلی سریع هست.

از ویژگی‌های Parcel میشه به موارد زیر اشاره کرد:

  • Bundle کردن فایلهای Javascript و css و HTML و تصاویر
  • برای ویژگی code splitting نیاز به تنظیمات ندارد
  • کدهای مدرن شما رو بصورت اتوماتیک با استفاده از Babel و PostCSS و PostHTML به کدهای قدیمی‌تر که در مرورگرها پشتیبانی بشن، تبدیل میکنه.
  • استفاده از ویژگی hot module replacement
  • استفاده از cache و پردازش موازی برای ساختن و build کردن سریعتر

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

نحوه نصب Parcel

شما میتونین این ابزار رو توسط yarn یا npm نصب کنید. برای اینکار بصورت زیر عمل میکنیم:

شروع کار با Parcel

شما میتونین Parcel رو بصورت زیر مورد استفاده قرار بدین:

با اینکار parcel این فایل html و همه فایلهای Javascript و CSS و ... که در این فایل مورد استفاده قرار گرفته رو مورد بررسی قرار میده و اونا رو تحت نظر میگیره و فایلهای خروجی مورد نظر رو در اختیارتون قرار میده.

شما همچنین میتونین Parcel رو فقط برای یک فایل Javascript اجرا کنید. بصورت زیر:

کار در محیط Development

Bundle کردن فایلها بصورت پیش‌فرض و از پیش تعریف‌شده برای محیط Development در Parcel در نظر گرفته شده است و شما نیاز به انجام کار خاصی ندارید. شما به راحتی میتونین دستور زیر رو اجرا کنید و کارهای مورد نظر برای سرور Development انجام خواهد شد:

Bundle یا بسته آماده شده برای محیط Production

زمانی که کار توسعه Application در محیط Development به پایان رسید و قصد داشتید که اون رو به محیط Production انتقال بدین، به راحتی دستور زیر رو اجرا کنید:

وقتی که به این صورت از parcel استفاده میکنید، از hot module replacement استفاده نمیشه و تغییرات مربوط به فایلها نیز مانیتور نمیشه. در این حالت از minifier برای فشرده کردن کدهاتون استفاده میشه و همچنین Source map و بقیه چیزهایی که در محیط Development انجام میشد، اجرا نمیشه.

همچنین با استفاده از این دستور در پس زمینه متغیر NODE_ENV برابر با production قرار داده میشه تا ابزارهایی که در پروژه مورد استفاده قرار میدین در حالت production کدهاشون رو تولید کنند. (ابزارهایی مانند React و Vue از متغیر NODE_ENV استفاده میکنند.)

Asset و فایلهای مختلف

Javascript

ابزار Parcel هم از ماژول ECMAScript مثل import و export و ... و هم CommonJS مثل require و ... پشتیبانی میکنه.

این ابزار بصورت اتوماتیک Code splitting رو با استفاده از import های داینامیک و پویا انجام میده.

dynamic import یا import داینامیک یک Promise رو برگشت میده و بجای اینکه همه پیش‌نیازها رو با شروع Application لود بکنه، ما میتونیم از مرورگر بخوایم که اونا رو لود بکنه و تنها زمانی بخشهای خاصی از App اجرا بشه که همه اونا لود شده باشند و بتونیم از اونا استفاده کنیم.

همچنین میتونیم از مرورگر بخوایم که فقط زمانی اونا رو لود کن که بهشون احتیاج داری. برای مثال زمانی که کاربر بر روی لینک خاصی کلیک کرد، میتونین چیزی رو لود کرده و اجرا کنید.

برای مطالعه بیشتر در مورد Code splitting میتونین این لینک رو مطالعه کنید.

CSS

Parcel از CSS ساده، Sass، Less و Stylus پشتیبانی میکنه. همچنین شما میتونین کدهای CSS خودتون رو با استفاده از CSS-Module بنویسید.

Transforms یا تبدیل‌ها

زمانی که Parcel یکی از فایلهای زیر رو ببینه:

  • Babel (فایل .babelrc)
  • PostCSS (فایل .postcssrc)
  • PostHTML (فایل .posthtmlrc)

بصورت اتوماتیک تنظیماتی که در نظر گرفتید رو اجرا میکنه و اگر این فایلها وجود نداشته باشه، تنظیمات پیش‌فرض رو مورد استفاده قرار میده.

ویژگی Hot module replacement

Hot module replacement یا HMR یک ویژگی بسیار کاربردی برای زمانی که Application رو توسعه میدید، محسوب میشه. زمانی که بخش خاصی از فایلهای CSS یا Javascript رو تغییر میدین، HMR طوری عمل میکنه که کل Application بروزرسانی نشه و کل صفحه Refresh نشه و فقط اون بخش از سایت که تغییر داره، به روز بشه تا بتونیم تغییرات رو ببینیم.

Parcel در مقایسه با Webpack

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

Webpack به ما این امکان رو میده که هر کاری که بخوایم انجام بدیم و به همین دلیل باید خودمون تنظیمات رو به نحوی انجام بدیم تا Webpack همون چیزی که مورد نظر ما هست رو انجام بده و بیشتر کارها مثل Parcel بصورت اتوماتیک انجام نمیشن.

بعضی اوقات کدهایی که در فایل webpack.config.js قرار میگیره به صدها خط میرسه و وقتی میخوایم یک پروژه جدید رو شروع کنیم همه اونا رو کپی کرده و در پروژه جدید مورد استفاده قرار میدیم و حالا اگر بخوایم امکانی رو تغییر بدیم، کمی دردسر داره.

Parcel بیشتر کارهایی که Webpack انجام میده رو بدون انجام هیچگونه تنظیماتی انجام میده.

info نکته :

Webpack 4 برای رقابت با Parcel یک حالت zero configuration قرار داده شده که نیاز به هیچ تنظیماتی نداره.

Webpack یا Parcel؟

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

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back
comment دیدگاه کاربران
امیر replyپاسخ

سلام میشه توضیح بدید npm چیه؟

محمد اسفندیاری

سلام
npm یک چیزی هست که همه افراد و شرکتها ابزارهای ساخته شده برای node js رو در اون قرار میدن و افراد دیگه میتونن از اونا استفاده کنند. در واقع npm یک ابزار مدیریت بسته های node js هست که با استفاده از اون میتونیم پیش نیازهای پروژه رو مدیریت کنیم.
برای اطلاعات بیشتر این لینک رو ببینید:
https://www.w3schools.com/whatis/whatis_npm.asp

add_circle ارسال دیدگاه

خوشحال میشیم دیدگاه و یا تجربیات خودتون رو با ما در میون بذارید :