Vite چیست؟ راهنمای ساده برای سازندگان اپ

Vite (به‌صورت «ویت» تلفظ می‌شود، به فرانسوی یعنی «سریع») یک ابزار build برای وب‌سایت‌ها و اپ‌های وب است. هنگام ساخت، یک سرور توسعه اجرا می‌کند که تغییرات شما را تقریباً فوری در مرورگر نشان می‌دهد. وقتی آماده‌ی انتشار هستید، کد شما را به فایل‌های کوچک و بهینه بسته‌بندی می‌کند که هر میزبان وبی می‌تواند ارائه دهد. این ابزار رایگان و متن‌باز است و ابزار پشت بسیاری از پروژه‌های React، Vue و Svelte به‌شمار می‌آید.

چرا وقتی با هوش مصنوعی می‌سازید Vite مهم است

ممکن است هرگز یک دستور Vite تایپ نکنید، اما اگر اپتان با یک سازنده‌ی اپ هوش مصنوعی ساخته شده، احتمالاً Vite آن را اجرا می‌کند. Mythex پروژه‌های جدید را روی Vite + React + TypeScript + Tailwind شروع می‌کند، مگر اینکه چیز دیگری بخواهید (نحوه‌ی انتخاب فناوری).

دانستن کار Vite به شما کمک می‌کند:

• Preview را بفهمید. پیش‌نمایش زنده‌ای که وقتی هوش مصنوعی فایل‌ها را ویرایش می‌کند به‌روز می‌شود، معمولاً یک سرور توسعه‌ی Vite است.
• انتشار را بفهمید. یک اپ Vite به پوشه‌ای از فایل‌های ایستا — HTML، JavaScript، CSS و تصاویر — تبدیل می‌شود که میزبانی آن ارزان و ساده است.
• پیام‌های خطا را بخوانید. وقتی پیش‌نمایش یک پوشش خطای قرمز یا یک صفحه‌ی خالی نشان می‌دهد، اغلب Vite گزارش می‌دهد که یک فایل کامپایل نشده است.
• محدودیت‌هایش را بشناسید. Vite بخش فرانت‌اند را می‌سازد. اگر اپتان به بک‌اند نیاز دارد — پایگاه داده، کلیدهای API مخفی، پرداخت — آن بخش جای دیگری اجرا می‌شود. فرانت‌اند در برابر بک‌اند را ببینید.

یک تشبیه روزمره

یک آشپزخانه‌ی رستوران را تصور کنید.

• هنگام آماده‌سازی سرویس (توسعه)، سرآشپز هر غذا را همان‌طور که پیش می‌رود می‌چشد و تنظیم می‌کند. ادویه را عوض می‌کنید و یک ثانیه بعد دوباره می‌چشید. این همان سرور توسعه‌ی Vite است: فایلی را تغییر می‌دهید، صفحه بی‌درنگ به‌روز می‌شود، و اغلب حتی متنی که در فرم وارد کرده‌اید از دست نمی‌رود.
• برای سفارش کترینگ (تولید)، همه‌چیز پخته، بسته‌بندی و برچسب‌گذاری می‌شود تا خوب جابه‌جا شود و هر جا بتوان سرو کرد. این همان vite build است: کد شما به فایل‌هایی کوچک و آماده برای هر میزبان تبدیل، فشرده و اثرانگشت‌دار می‌شود.

دستور پخت یکی است، اما دو روش کاملاً متفاوت برای آماده‌سازی‌اش وجود دارد — و Vite هر دو را انجام می‌دهد.

Vite واقعاً چه کاری انجام می‌دهد

یک اپ وب مدرن از فایل‌های زیادی ساخته شده است: کامپوننت‌ها، استایل‌ها، تصاویر و کتابخانه‌های شخص ثالث. مرورگرها نمی‌توانند همه‌ی آن‌ها را همان‌طور که نوشته شده‌اند استفاده کنند. TypeScript باید به JavaScript تبدیل شود، JSX در React باید تبدیل شود و کلاس‌های Tailwind باید به CSS تبدیل شوند.

Vite این کار را در دو حالت انجام می‌دهد:

ابزارهای قدیمی‌تر کل اپ را قبل از نشان دادن هر چیزی bundle می‌کردند، پس شروع و به‌روزرسانی یک پروژه‌ی بزرگ ممکن بود زمان زیادی ببرد. ترفند Vite این است که در توسعه از این کار رد شود و اجازه دهد مرورگر فایل‌ها را در صورت نیاز بارگذاری کند. برای تولید، همچنان bundle می‌کند — از Vite نسخه‌ی ۸ با bundler‌ای به نام Rolldown — چون تعداد زیاد فایل کوچک برای بازدیدکننده کندتر از چند فایل بهینه است.

یک مثال کامل: داخل یک پروژه‌ی Vite چه چیزی هست

تقریباً این شکل یک اپ کوچک Vite + React است:

my-app/
  index.html          ← the one HTML page the app starts from
  package.json        ← list of libraries and scripts (dev, build)
  vite.config.ts      ← Vite settings and plugins
  src/
    main.tsx          ← starts React and mounts it into index.html
    App.tsx           ← your app's top-level component
    index.css         ← styles, e.g. @import "tailwindcss";
  public/             ← files copied as-is (favicon, robots.txt)

و اسکریپت‌های داخل package.json:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

حالا یک تغییر را دنبال کنید:

۱. از هوش مصنوعی می‌خواهید «تیتر را آبی کن». ۲. هوش مصنوعی یک کلاس را در App.tsx ویرایش می‌کند. ۳. Vite متوجه تغییر فایل می‌شود، فقط همان فایل را تبدیل می‌کند و به‌روزرسانی را به مرورگر می‌فرستد. ۴. تیتر در پیش‌نمایش آبی می‌شود، معمولاً در کمتر از یک ثانیه.

وقتی منتشر می‌کنید، vite build چیزی شبیه dist/index.html به‌همراه dist/assets/index-a1b2c3.js تولید می‌کند. بخش به‌ظاهر تصادفی نام فایل هر وقت محتوا تغییر کند عوض می‌شود، پس مرورگرها و CDNها می‌توانند فایل‌ها را مدت طولانی کش کنند بدون اینکه کد قدیمی سرو شود.

متغیرهای محیطی در Vite

Vite فقط متغیرهایی را که نامشان با VITE_ شروع می‌شود در اختیار کد مرورگر قرار می‌دهد، مثلاً VITE_PUBLIC_MAP_ID. این یک اقدام ایمنی است: هر چیزی در کد مرورگر را بازدیدکنندگان می‌توانند ببینند، پس کلیدهای مخفی هرگز نباید این پیشوند را داشته باشند و باید روی بک‌اند بمانند. متغیرهای محیطی و اسرار را ببینید.

اصطلاحات کلیدی

باورهای غلط رایج

• «Vite یک فریم‌ورک است.» یک ابزار build است. React، Vue یا Svelte فریم‌ورک است؛ Vite آن را اجرا و بسته‌بندی می‌کند.
• «یک اپ Vite شامل بک‌اند است.» یک اپ استاندارد Vite فقط فرانت‌اند است. پایگاه داده، ورود کاربران و کلیدهای مخفی به یک سرور یا API در کنارش نیاز دارند.
• «سرور توسعه برای آنلاین کردن مناسب است.» برای ترافیک واقعی ساخته نشده. همیشه خروجی build تولید را منتشر کنید.
• «هر چیزی در .env مخفی است.» در یک اپ Vite، متغیرهای VITE_ داخل فایل‌هایی قرار می‌گیرند که هر بازدیدکننده دانلود می‌کند.
• «رفرش صفحه‌ای که ۴۰۴ می‌دهد یعنی اپ خراب است.» در یک اپ تک‌صفحه‌ای، میزبان باید هر مسیر را به index.html برگرداند. این یک تنظیم میزبانی است — نحوه‌ی رفع خطاهای ۴۰۴ پس از انتشار را ببینید.

از سازنده‌ی هوش مصنوعی‌تان چه بخواهید

• «این اپ فقط Vite (فرانت‌اند) است یا بک‌اند هم دارد؟ هر بخش کجا اجرا می‌شود؟»
• «build تولید را اجرا کن و پیش از انتشار همه‌ی خطاها و هشدارها را درست کن.»
• «بررسی کن هیچ کلید مخفی در متغیرهای VITE_ یا هیچ جای کد فرانت‌اند نباشد.»
• «پیش‌نمایش صفحه‌ی خالی نشان می‌دهد — خطاهای کنسول Vite و مرورگر را بررسی کن و علت را برطرف کن.» نحوه‌ی رفع صفحه‌ی سفید خالی را ببینید.
• «بعد از انتشار مطمئن شو رفرش هر آدرس صفحه کار می‌کند، نه فقط صفحه‌ی اصلی.»

Vite در Mythex

هر پروژه‌ی جدید Mythex روی Vite شروع می‌شود، مگر اینکه Next.js، HTML ایستا یا یک بک‌اند متفاوت بخواهید. Preview زنده در سندباکس خصوصی شما با ویرایش فایل‌ها توسط عامل به‌روز می‌شود، و Publish اپ را build می‌کند و منتشر می‌کند — نیازی نیست میزبانی را خودتان راه‌اندازی کنید. اگر بعداً به API یا پایگاه داده نیاز داشتید، در چت بخواهید و Mythex می‌تواند یک سرویس بک‌اند در کنار فرانت‌اند Vite اضافه کند (اپ‌های چندسرویسی).

پرسش‌ها