Vite.js یک ابزار توسعه سریع برای پروژه‌های وب مدرن است که با بهبود تجربه توسعه، روی سرعت و عملکرد تمرکز دارد. همچنین از importهای ES مرورگر native برای فعال کردن پشتیبانی از مرورگرهای مدرن بدون فرآیند ساخت استفاده می‌کند.
Vite از دو بخش عمده تشکیل شده است:
زمانی که ماژول‌های ES در ES2015 معرفی شدند، بسیاری از مرورگرها پشتیبانی ضعیفی از ماژول‌های ES6 داشتند. برای رفع این مشکل، اکنون مرورگرهای مدرن از ماژول های native ES پشتیبانی می‌کنند. این موضوع به توسعه‌دهندگان کمک می‌کند تا بتوانند به راحتی از importو exportبه صورت native استفاده کنند.
در ES native، ایمپورت(import) باید یک URL نسبی یا مطلق داشته باشد، زیرا از import ماژول خالی پشتیبانی نمی‌کند. به عنوان مثال:
import { someMethod } from 'my-dep'
کد بالا باعث ایجاد خطا در مرورگر می‌شود زیرا بسیاری از مرورگرها از ماژول های ES6 پشتیبانی نمی‌کنند. اکنون سوالی که مطرح می‌شود این است که Vite چگونه این موضوع را مدیریت می‌کند؟
Vite به صورت خودکار import ماژول خالی از سورس فایل‌های ما را شناسایی می‌کند و دو عمل زیر را روی آن‌ها انجام می‌دهد:
/node_modules/.vite/my-dep.js?v=f3sf2ebb
اکنون که می‌دانیم Vite چیست و چگونه کار می‌کند، ممکن است سوال ایجاد شود که چرا باید از Vite استفاده کنیم؟ دلایل زیادی برای این کار وجود دارد که در ادامه برخی از آن‌ها را باهم بررسی می‌کنیم.
Pre-bundling با Vite’s ESbuild آن را ۱۰ تا ۱۰۰ برابر سریع‌تر از استفاده از هر bundler دیگری در جاوااسکریپت می‌کند. این موضوع به این دلیل است که به بهبود سرعت صفحه و تبدیل ماژول‌های CommonJS / UMD به ESM کمک می‌کند.
با توجه به مستندات Vite، مرحله Pre-bundling با esbuild انجام می‌شود و زمان cold start مربوط به Vite را به طور قابل توجهی سریع‌تر از هر bundler مبتنی بر جاوااسکریپت می‌کند.
Vite از عملکردهای HMR برای پیگیری تغییرات در برنامه ما بدون بارگذاری مجدد کامل صفحه استفاده می‌کند. با HMR API، مرورگر فقط بخش اصلاح شده صفحه را بارگذاری می‌کند و همچنان state برنامه را حفظ می‌نماید.
توجه به این نکته لازم است که نیازی به پیکربندی دستی API HMR در برنامه نیست و در حین نصب برنامه به طور خودکار به پروژه ما اضافه می‌شود.
با عملکرد HMR، می‌توانیم برنامه‌های سبک‌تر و سریع‌تری را بدون توجه به تعداد ماژول‌ها یا اسکیل برنامه طراحی کنیم.
Vite به ما اجازه می‌دهد تا با گسترش پیکربندی پیش‌فرض با vite.config.jsیا vite.config.ts، کنترل بیشتری بر روی پیکربندی پروژه خود داشته باشیم. همه این‌ها در دایرکتوری root اصلی پروژه قرار دارند.
همچنین می‌توانیم فایل‌های پیکربندی مختلفی را با گزینه --configمانند زیر مشخص کنیم:
vite --config my-config.js
قبل از اینکه بتوانیم یک پروژه Vite ایجاد کنیم، باید نرم‌افزارهای زیر را بر روی سیستم خود نصب کنیم:
node -vرا در ترمینال اجرا کنیم)هنگامی که این موارد را نصب کردیم، اکنون می‌توانیم یک پروژه Vite ایجاد کنیم.
برای ایجاد یک برنامه Vite، ابتدا ترمینال خود را باز کرده و به پوشه‌ای که می‌خواهیم برنامه Vite را در آن ذخیره کنیم می‌رویم. سپس دستور زیر را اجرا می‌کنیم:
npm create @vitejs/app my-vite-app
my_vite_appنام برنامه Viteای است که می‌خواهیم ایجاد کنیم. شما می‌توانید آن را به هر نامی که دوست دارید تغییر دهید.
پس از اجرای دستور بالا، از ما خواسته می‌شود تا یک فریم‌ورک و قالب (variant) انتخاب کنیم. در این مقاله ما از React استفاده می‌کنیم، اما شما می‌توانید هر فریم‌ورک و قالبی را که با آن آشنا هستید انتخاب کنید.
سپس دستورات زیر را اجرا می‌کنیم تا نصب تمام شود:
cd vite_application npm install
فرآیند نصب ممکن است چند دقیقه طول بکشد، بنابراین باید صبر کنیم تا مراحل کامل شود.
برای اجرای برنامه Vite در ترمینال، به پوشه برنامه (vite_application) می‌رویم و سپس دستور dev زیر را اجرا می‌کنیم تا سرور توسعه راه‌اندازی شود:
npm run dev
با اجرای دستور بالا سرور توسعه راه‌اندازی می‌شود. سپس آدرس http://localhost:3000را در مرورگر باز می‌کنیم.
در ادامه نگاهی به نحوه سازماندهی پوشه‌های برنامه Vite می‌اندازیم. همچنین تعدادی از پوشه‌ها و فایل‌ها را با جزئیات بررسی خواهیم کرد.
باید به این نکته توجه داشته باشید که اگر از فریم‌ورک و قالب دیگری استفاده می‌کنید، نام فایل‌ها یکسان نخواهد بود.
OPEN EDITORS
|__index.html
VIRE application
|__node_modules
|__src
|_APP.css
|_APP.jsx
|_favicon.svg
|_index.css
|_logo.svg
|_main.jsx
|__.gitignore
|__index.html
|__package-Lock.json
|__package.json
|__vite.config.js
پوشه node_modules شامل تمام dependencyهای لازم برای برنامه است که در فایل package.json مشخص شده است. پس از اجرای دستور npm install، تمام dependencyهای پیکربندی شده در package.json در پوشه node_modules دانلود می‌شوند.
هنگامی که سورس کد خود را در GitHub قرار می‌دهیم، نیازی نیست پوشه node_modules را هم آپلود کنیم زیرا کاربران می‌توانند تمام dependencyهای مورد استفاده در برنامه را از طریق package.json نصب کنند.
می‌توانیم فایل package.json را در دایرکتوری root برنامه parent پیدا کنیم.
پوشه src یکی از پوشه‌هایی است که هنگام توسعه برنامه‌های Vite تعامل بیشتری با آن داریم. این پوشه شامل app.jsx، main.jsx، app.css و index.js می‌باشد.
همه محتویات برنامه ما مانند تصاویر، ویدئوها و فایل‌های دیگر باید در پوشه src ذخیره شوند زیرا Vite به طور خودکار همه URLهای داخل index.html را تغییر می‌دهد.
فایل app.jsx کامپوننت پایه‌ای است که به عنوان یک container برای تمام کامپوننت‌های دیگر استفاده شده در برنامه عمل می‌کند.
فایل main.jsx جایی است که ما شناسه root از index.html را هدف قرار می‌دهیم و تمام کامپوننت‌های مورد استفاده در برنامه را در آن رندر می‌کنیم.
این فایل‌ها شامل تمام استایل‌های CSS مورد استفاده در برنامه هستند. می‌توانیم فایل CSS خود را اضافه کرده و یا استایلی را تغییر دهیم.
ما در این مقاله سعی کردیم به این موضوع بپردازیم که Vite چیست و چگونه کار می‌کند. همچنین برخی از ویژگی‌های آن را باهم بررسی کردیم. علاوه بر این نحوه ایجاد اپلیکیشن‌های Vite را هم یاد گرفتیم.
۵۰ درصد تخفیف ویژه اردیبهشت فرانت کست تا پایان هفته
کد تخفیف: spr
دیدگاه‌ها:
arman-dezfuli
آبان 8, 1402 در 2:53 ب.ظ
به دوره کامل و جامع از وب پک و ویت میخوایم واقعا نیازه