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


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

  • یک سرور توسعه دهنده که ویژگی های غنی را نسبت به ماژول های بومی ES ارائه می دهد ، به عنوان مثال جایگزینی بسیار سریع ماژول داغ (HMR) .
  • یک دستور ساخت که کد شما را با Rollup ، از پیش پیکربندی شده برای خروجی دارایی های استاتیک بسیار بهینه شده برای تولید، دسته بندی می کند.

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

در بخش چرا ویت می توانید در مورد منطق پشت پروژه بیشتر بدانید .

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

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

استفاده از 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

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

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

با NPM:

npm create vite@latest

با Yarn:

yarn create vite

با PNPM:

pnpm create vite

سپس دستورات را دنبال کنید!

همچنین می توانید مستقیماً نام پروژه و قالبی را که می خواهید استفاده کنید از طریق گزینه های اضافی خط فرمان مشخص کنید. به عنوان مثال، برای راه اندازی پروژه 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

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

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نقطه ورود به برنامه شما است.

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

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

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

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

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

رابط خط فرمان

در پروژه‌ای که Vite نصب شده است، می‌توانید از 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 را از کیبورد بفشارید تا برنامه در مرورگر شما بازشود.