آموزش استفاده و نصب ویت جی اس Vite js

ویت چیست؟

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

1- یک سرور توسعه که ویژگی‌های پیشرفته‌ای را برای ماژول‌های بومی ES ارائه می‌دهد، از جمله جایگزینی بسیار سریع Hot Module (HMR).
https://vite.dev/guide/features.html#hot-module-replacement

2- یک دستور ساخت که کد شما را با Rollup بسته‌بندی می‌کند و برای تولید دارایی‌های استاتیک بهینه شده است. https://rollupjs.org/

Vite یک ابزار با رویکرد پیش‌فرض هوشمندانه است که با تنظیمات معقول ارائه می‌شود. همچنین از طریق API افزونه و JavaScript API با پشتیبانی کامل از تایپ، بسیار قابل تنظیم و توسعه است.

برای اطلاع از دلایل و منطق پشت این پروژه می‌توانید بخش "چرا Vite" را مطالعه کنید:
https://vite.dev/guide/why.html

اگر در نصب و راه اندازی ری اکت مشکلی دارید، ویت انتخاب شماست در زیر میتوانید روش راه اندازی ری اکت با ویت را یاد بگیرید:

راه اندازی اولین پروژه ویت Vite شما

یادداشت سازگاری
Vite به Node.js نسخه 18+، 20+ نیاز دارد. با این حال، برخی از الگوها برای کار کردن به نسخه بالاتر Node.js نیاز دارند، لطفاً اگر مدیر بسته package manager شما در مورد آن هشدار داد، آن را ارتقا دهید.

نصب ویت با NPM:

npm create vite@latest

نصب ویت با Yarn:

yarn create vite

نصب ویت با PNPM:

pnpm create vite
پس از اجرای یکی از دستورات بالا یک سری سوال از شما پرسیده میشود، و تایید شما را میخواهد. مثلا از شما میخواهد تایید کنید که نسخه در حال نصب را تایید کنید. همچنین برای نصب ری اکت با زبان جاوااسکریپت، کلمه React را انتخاب کنید. اگر میخواهید ری اکت با زبان تایپ اسکریپت را انتخاب کنید.



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

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
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

برای جزئیات بیشتر در مورد هر الگوی پشتیبانی شده به 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




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

تنظیمات پیش‌فرض ویت مرورگرهایی را هدف قرار می‌دهد که از ماژول‌های بومی ES، واردات پویای ESM بومی و import.meta پشتیبانی می‌کنند. مرورگرهای قدیمی‌تر نیز می‌توانند از طریق افزونه رسمی vitejs/plugin-legacy پشتیبانی شوند - برای جزئیات بیشتر به بخش "ساخت برای تولید" مراجعه کنید.



استفاده از Vite به صورت آنلاین

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

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

vanilla, vue, react, preact, lit, svelte

TypeScript: vanilla-ts, vue-ts, react-ts, preact-ts, lit-ts, svelte-ts



الگوهای انجمن

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

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

npm install
npm run dev

اگر پروژه mainبه عنوان شاخه پیش فرض استفاده می کند، پسوند پروژه مخزن با#main

npx degit user/project#main my-project


index.htmlو Project Root

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

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

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

ویت همچنین از برنامه‌های چند صفحه‌ای (multi-page apps) با چندین نقطه ورود `.html` پشتیبانی می‌کند.

تعیین ریشه جایگزین

در حال اجرا ویت، سرور توسعه دهنده را با استفاده از دایرکتوری فعلی به عنوان روت شروع می کند. شما می توانید یک ریشه جایگزین را با vite serve some/sub/dir.



رابط خط فرمان

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

{
  &quotscripts&quot: {
    &quotdev&quot: &quotvite&quot, // start dev server, aliases: `vite dev`, `vite serve`
    &quotbuild&quot: &quotvite build&quot, // build for production
    &quotpreview&quot: &quotvite preview&quot // locally preview production build
  }
}

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

درباره رابط خط فرمان بیشتر بدانید


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

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

git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link --global # use your preferred package manager for this step

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



انجمن

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

اگر این صفحه نیاز به ویرایش و تصحیح کلمات دارد در نظرات اعلام بفرمایید.

خلاصه آموزش سریع نصب ویت جی اس ViteJs برای ری اکت

با دستور زیر در خط فرمان پوشه ای که میخواهید برنامه در آن جا نصب شود شروع کنید:

npm create vite@latest

دستور بالا با استفاده از npm شروع به نصب آخرین نسخه ویت جی اس میکند. سپس به شما دستوراتی میدهد که با استفاده از آنها ابتدا وارد پوشه برنامه میشوید:cd vite-project. سپس از شما میخواهد npm install را اجرا کنید. سپس برای اجرای برنامه در مرورگر میخواهد که دستور زیر را اجرا کنید: npm run dev . نتیجه نهایی را در خط فرمان در تصویر زیر ببینید:

با کپی کردن آنچه در جلوی Local نوشته شده است به صفحه اجرای برنامه میروید: http://127.0.0.1:5173/

دکمه اُ O را از کیبورد بفشارید تا برنامه در مرورگر شما بازشود.


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

$ npm create vite@latest