شروع

مرور کلی

Vite (یک کلمه فرانسوی به معنای "سریع"، که /vit/ تلفظ می‌شود، مانند "ویت") یک ابزار بیلد است که هدف آن ارائه تجربه توسعه سریع‌تر و سبک‌تر برای پروژه‌های وب مدرن است. این ابزار از دو بخش اصلی تشکیل شده است:

یک سرور توسعه که ویژگی‌های پیشرفته‌تری را برای ماژول‌های ES بومی فراهم می‌کند. از جمله این ویژگی‌ها، جایگزینی سریع ماژول (HMR) با عملکردی بسیار بهینه است.

• یک کامَند بیلد که کد شما را با Rollup باندل می‌کند، که آماده شده تا فایل‌های استاتیک بسیار بهینه‌شده برای پروداکشن بسازد.

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

Vite همچنین از طریق API پلاگین و API جاوااسکریپت با پشتیبانی کامل از تایپ‌ها، به شدت قابل توسعه است.

می‌توانید برای آشنایی بیشتر با دلایل پشت پروژه به بخش چرا Vite مراجعه کنید.

پشتیبانی مرورگر

در طول توسعه، Vite مقدار esnext را به target تنظیم می‌کند، زیرا ما فرض می‌کنیم که از یک مرورگر مدرن استفاده می‌شود که تمام ویژگی‌های جدید جاوااسکریپت و CSS را پشتیبانی می‌کند. این از کاهش سطح سینتکس جلوگیری می‌کند و به Vite اجازه می‌دهد ماژول‌ها را تا حد امکان نزدیک به سورس کد اصلی سِرو کند.

در فرآیند بیلد برای پروداکشن، Vite به‌طور پیش‌فرض مرورگرهایی را هدف قرار می‌دهد که از ویژگی‌های مدرن جاوااسکریپت پشتیبانی می‌کنند. این ویژگی‌ها شامل ماژول‌های ES بومی ، ایمپورت داینامیک ESM ، import.meta ، Nullish Coalescing و BigInt هستند. در صورت نیاز به پشتیبانی از مرورگرهای قدیمی، می‌توان از پلاگین رسمی ‎@vitejs/plugin-legacy استفاده کرد. برای اطلاعات بیشتر، به بخش بیلد برای پروداکشن مراجعه کنید.

امتحان Vite به صورت آنلاین

می‌توانید Vite را به صورت آنلاین در StackBlitz امتحان کنید. این ابزار، تنظیمات بیلد مبتنی بر Vite را مستقیماً در مرورگر شما اجرا می‌کند، بنابراین تقریباً با تنظیمات لوکال (local) مشابه است اما نیازی به نصب هیچ چیزی بر روی دستگاه شما ندارد. می‌توانید به vite.new/{template} بروید تا فریم‌ورک مورد نظر خود را انتخاب کنید.

قالب‌های پشتیبانی شده عبارتند از:

JavaScript	TypeScript
vanilla	vanilla-ts
vue	vue-ts
react	react-ts
preact	preact-ts
lit	lit-ts
svelte	svelte-ts
solid	solid-ts
qwik	qwik-ts

ساخت اولین پروژه Vite شما

نکته سازگاری

Vite به نسخه ۱۸+ یا ۲۰+ از Node.js نیاز دارد. با این حال، برخی قالب‌ها برای کار نیاز به نسخه بالاتری از Node.js دارند. لطفاً اگر پکیج منیحر شما هشدار می‌دهد، Node.js را به‌روزرسانی کنید.

npm

$ npm create vite@latest

Yarn

$ yarn create vite

pnpm

$ pnpm create vite

Bun

$ bun create vite

سپس مراحل را دنبال کنید!

همچنین می‌توانید با استفاده از آپسن‌های اضافی خط فرمان، نام پروژه و قالب مورد نظر خود را مستقیماً مشخص کنید. به عنوان مثال، برای ایجاد یک پروژه Vite با Vue این دستور را اجرا کنید:

npm

# npm 7+ , دو خط تیره اضافی مورد نیاز است:
$ npm create vite@latest my-vue-app -- --template vue

Yarn

$ yarn create vite my-vue-app --template vue

pnpm

$ pnpm create vite my-vue-app --template vue

Bun

$ bun create vite my-vue-app --template vue

برای جزئیات بیشتر درباره قالب‌های پشتیبانی شده به create-vite مراجعه کنید: vanilla ، vanilla-ts ، vue ، vue-ts ، react ، react-ts ، react-swc ، react-swc-ts ، preact ، preact-ts ، lit ، lit-ts ، svelte ، svelte-ts ، solid ، solid-ts ، qwik، qwik-ts.

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

قالب‌های ارائه شده توسط جامعه

create-vite ابزاری است برای شروع سریع یک پروژه از یک قالب پایه برای فریم‌ورک‌های محبوب. می‌توانید Awesome Vite را برای قالب‌های نگهداری شده توسط جامعه که شامل ابزارهای دیگر یا فریم‌ورک‌های مختلف هستند، بررسی کنید.

برای استفاده قالبی که در https://github.com/user/project منتشر شده، می‌توانید آن را به صورت آنلاین با استفاده از https://github.stackblitz.com/user/project امتحان کنید (با اضافه کردن ‎.stackblitz بعد از github به URL پروژه).

همچنین می‌توانید از ابزاری مانند degit برای ساخت پروژه خود با یکی از قالب‌ها استفاده کنید. با فرض اینکه پروژه در GitHub است و از main به عنوان برنچ پیش‌فرض استفاده می‌کند، می‌توان یک کپی محلی با این دستور ایجاد کرد:

npx degit user/project#main my-project
cd my-project

npm install
npm run dev

نصب دستی

در پروژه خود، می‌توانید ابزار خط فرمان vite را با استفاده از دستور زیر نصب کنید:

npm

$ npm install -D vite

Yarn

$ yarn add -D vite

pnpm

$ pnpm add -D vite

Bun

$ bun add -D vite

و یک فایل index.html به شکل زیر ایجاد کنید:

<p>Hello Vite!</p>

سپس دستور CLI مناسب را در ترمینال خود اجرا کنید:

npm

$ npx vite

Yarn

$ yarn vite

pnpm

$ pnpm vite

Bun

$ bunx vite

index.html در http://localhost:5173 سرو می‌شود.

index.html و ریشه (Root) پروژه

یک نکته‌ای که ممکن است متوجه شده باشید این است که در یک پروژه Vite، فایل index.html در مرکز توجه قرار دارد به جای اینکه در داخل public پنهان شده باشد. این عمدی است: در طول توسعه، Vite یک سرور است و index.html نقطه ورود به برنامه شما است.

Vite فایل index.html را به‌عنوان بخشی از گراف ماژول‌ها و یکی از منابع اصلی کد در نظر می‌گیرد. این ابزار تگ اسکریپت ‎<script type="module" src="...">‎ را پردازش کرده و به کد جاوااسکریپت شما اعمال می‌کند. حتی تگ‌های ‎<script type="module">‎ داخلی و فایل‌های CSS که از طریق <link href="..."> ارجاع داده شده‌اند نیز از قابلیت‌های ویژه‌ی Vite بهره‌مند می‌شوند. علاوه بر این، URLهای درون index.html به‌صورت خودکار تنظیم می‌شوند، بنابراین نیازی به استفاده از نگهدارنده‌هایی مانند %PUBLIC_URL% نخواهید داشت.

مشابه سرورهای HTTP استاتیک، Vite مفهومی با نام "دایرکتوری ریشه" را دارد که فایل‌های شما از آنجا سرو می‌شوند. شما آن را به عنوان <root> در بقیه مستندات مشاهده خواهید کرد. URLهای مطلق در سورس کد شما با استفاده از ریشه پروژه به عنوان پایه پردازش می‌شوند، بنابراین می‌توانید کدی بنویسید که انگار با یک سرور فایل استاتیک عادی کار می‌کنید (جز اینکه بسیار قدرتمندتر!). Vite همچنین قادر به مدیریت وابستگی‌هایی است که در مکان‌های خارج از سیستم فایل ریشه پردازش می‌شوند، که استفاده از آن را حتی در تنظیمات مبتنی بر مونوریپو امکان‌پذیر می‌سازد.

Vite همچنین از برنامه‌های چند صفحه‌ای با چندین نقطه ورود ‎.html پشتیبانی می‌کند.

تعیین ریشه (Root) جایگزین

vite سرور توسعه را با استفاده از دایرکتوری کاری فعلی به عنوان ریشه راه‌اندازی می‌کند. شما می‌توانید ریشه جایگزینی را با استفاده از vite serve some/sub/dir مشخص کنید. توجه داشته باشید که Vite همچنین فایل پیکربندی خود (یعنی vite.config.js) را در داخل ریشه پروژه حل و فصل می‌کند، بنابراین اگر ریشه تغییر کند باید آن را جابجا کنید.

رابط خط فرمان (CLI)

در پروژه‌ای که Vite نصب شده است، می‌توانید از باینری vite در اسکریپت‌های npm خود استفاده کنید، یا مستقیماً آن را با npx vite اجرا کنید. در اینجا اسکریپت‌های پیش‌فرض npm در یک پروژه ساخته‌شده شده با Vite آورده شده است:

package.json

{
  "scripts": {
    "dev": "vite", // `vite dev` ، `vite serve` :شروع سرور توسعه، نام‌های جایگزین
    "build": "vite build", // بیلد برای پروداکشن
    "preview": "vite preview" // پیش‌نمایش بیلد پروداکشن به صورت محلی
  }
}

می‌توانید گزینه‌های CLI اضافی مانند ‎--port یا ‎--open را مشخص کنید. برای مشاهده لیست کامل گزینه‌های CLI، دستور npx vite --help را در پروژه خود اجرا کنید.

بیشتر در مورد رابط خط فرمان (CLI) یاد بگیرید

استفاده از کامیت‌های منتشر نشده

اگر برای امتحان ویژگی‌های جدید نمی‌توانید منتظر نسخه جدید باشید، می‌توانید یک کامیت مشخص از vite را با استفاده از https://pkg.pr.new نصب کنید:

npm

$ npm install -D https://pkg.pr.new/vite@SHA

Yarn

$ yarn add -D https://pkg.pr.new/vite@SHA

pnpm

$ pnpm add -D https://pkg.pr.new/vite@SHA

Bun

$ bun add -D https://pkg.pr.new/vite@SHA

SHA را با هر یک از commit SHA های Vite جایگزین کنید. توجه داشته باشید که فقط commit‌های مربوط به ماه گذشته کار می‌کنند، زیرا نسخه‌های قدیمی‌تر پاک می‌شوند.

به طور جایگزین، می‌توانید مخزن vite را در ماشین محلی خود کلون کرده و سپس آن را خودتان بسازید و لینک کنید (pnpm مورد نیاز است):

git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link --global # از پکیج منیجر دلخواه خود برای این مرحله استفاده کنید

سپس به پروژه مبتنی بر Vite خود بروید و دستور pnpm link --global vite را اجرا کنید (یا مدیریت بسته‌ای که برای لینک کردن vite به صورت سراسری استفاده کرده‌اید). حالا سرور توسعه را مجدداً راه‌اندازی کنید تا در کنار آخرین ویژگی‌ها پیشرو باشید!

وابستگی‌ها با استفاده از Vite

برای جایگزینی نسخه Vite که به طور غیرمستقیم توسط وابستگی‌ها استفاده می‌شود، باید از npm overrides یا pnpm overrides استفاده کنید.

جامعه (Community)

اگر سوالی دارید یا به کمک نیاز دارید، با جامعه در Discord و GitHub Discussions تماس بگیرید.