https://virgool.io/vitejs/feed آموزشهای مربوط به ویت جی اس در این انتشارات نوشته میشود. لینک گروه آموزشی تلگرام برای ویت جی اس در بین لینکها وجود دارد. fa 2026-06-16 20:26:17 https://files.virgool.io/upload/publication/rqm2k9p0dbr3/smt5c0.jpg https://virgool.io/vitejs https://virgool.io/vitejs/%DA%86%D8%B1%D8%A7-%D9%BE%D8%B3-%D8%A7%D8%B2-%D9%86%D8%B5%D8%A8-%D9%86%D9%88%D8%AF-%D8%AC%DB%8C-%D8%A7%D8%B3-nodejs-%D8%AF%D8%B1-%D9%88%DB%8C%DA%98%D9%88%D8%A7%D9%84-%D8%A7%D8%B3%D8%AA%D9%88%D8%AF%DB%8C%D9%88-%D8%A7%D8%B1%D9%88%D8%B1-%D8%AF%D8%B1%DB%8C%D8%A7%D9%81%D8%AA-%D9%85%DB%8C%DA%A9%D9%86%D9%85-hhyfsygjy9id تصویر خطا در ویژوال استودیو - کیفیت پایین به دلیل تنظیمات ویرگول در ساماندهی عکس ها استیکی از خطاهایی که ممکن است پیش از استفاده از دستورات npm دریافت کنید ارور زیر است. من ارور زیر را پس از نوشتن دستور مشاهده نسخه نود دریافت میکنم node -v:node : The term 'node' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + node v + ~~~~ + CategoryInfo : ObjectNotFound: (node:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundExceptionو هنگامی که دستور npm create vite@latest را مینویسم خطای زیر را دریافت میکنم:npm : The term 'npm' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and try again. At line:1 char:1 + npm create vite@latest + ~~~ + CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundExceptionد رهر دو دستور بالا خطا میگوید node و npm را به عنوان دستور، تابع، فایل اسکریپتی یا عملگر برنامه نمیشناسد.اما من نود جی اس Node.js را نصب کردم و نباید این خطا و ارورها را ببینم، قضیه چیست؟مشکل در اینجاست که شما می بایست برنامه ادیتور کد مثل ویژوال استودیو را ببندید و دوباره باز کنید. به همین سادگی تا هم بتوانید شماره نسخه نود جی اس را مشاهده کنید و هم از دستورات پکیج منیجر نود استفاده کنید.پس از بستن برنامه ویژوال استودیو و باز کردن آن و نوشتن دستورات بالا، دیگر خطایی دریافت نمیکنیم. به تصویر زیر نگاه کنید: آموزش ویت جی اس Vitejs طراحی سایت | سیداحمد Wed, 17 Jan 2024 00:39:17 +0330 https://virgool.io/vitejs/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%D9%88-%D9%86%D8%B5%D8%A8-%D9%88%DB%8C%D8%AA-%D8%AC%DB%8C-%D8%A7%D8%B3-vite-js-qt0hmnt9ub3f ویت چیست؟ویت (کلمه فرانسوی برای "سریع"، تلفظ می‌شود /vit/ مانند "veet") یک ابزار ساخت است که هدف آن ارائه یک تجربه توسعه سریع‌تر و بهینه‌تر برای پروژه‌های وب مدرن است. این ابزار از دو بخش اصلی تشکیل شده است:1- یک سرور توسعه که ویژگی‌های پیشرفته‌ای را برای ماژول‌های بومی ES ارائه می‌دهد، از جمله جایگزینی بسیار سریع Hot Module (HMR). https://vite.dev/guide/features.html#hot-module-replacement2- یک دستور ساخت که کد شما را با 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, svelteTypeScript: 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به عنوان شاخه پیش فرض استفاده می کند، پسوند پروژه مخزن با#mainnpx degit user/project#main my-projectindex.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 آموزش ویت جی اس Vitejs طراحی سایت | سیداحمد Thu, 25 May 2023 16:44:40 +0330 https://virgool.io/vitejs/%D9%88%DB%8C%D8%AA-vite-%DA%86%DB%8C%D8%B3%D8%AA-%D9%88-%DA%86%D8%B1%D8%A7-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%A7%D8%B2-%D8%A2%D9%86-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%DA%A9%D9%86%DB%8C%D9%85-uuuvp2jvkby9 ویت Vite چه ویژگیهایی دارد؟آغاز به کار سریع سرور Instant Server Startجایگزینی ماژول خیلی سریع Lightning Fast HMRدسترسی به ابزارها مانند تایپ اسکریپت و jsx و css و ... Rich Featuresو ...چرا از ویت Vite استفاده کنیم؟چه مشکلی وجود داشت؟ قبل از اینکه ماژول‌های اکما اسکریپت ES در مرورگرها در دسترس باشند، توسعه‌دهندگان هیچ مکانیزم بومی برای نوشتن جاوا اسکریپت به شکل ماژولار نداشتند. به همین دلیل است که همه ما با مفهوم 'بسته بندی bundling' آشنا هستیم: استفاده از ابزارهایی که ماژول های منبع ما را واکاوی میکنند، پردازش می کنند و منابع ما را به فایل هایی متصل می کنند که می توانند در مرورگر اجرا شوند.با گذشت زمان، ابزارهایی مانند webpack، Rollup و Parcel را دیده‌ایم که تجربه توسعه را برای توسعه‌دهندگان frontend بسیار بهبود بخشیدند.با این حال، همانطور که ما برنامه های جاه طلبانه بیشتری می سازیم، مقدار جاوا اسکریپت که با آن سروکار داریم نیز به طور چشمگیری افزایش می یابد. غیر معمول نیست که پروژه‌های مقیاس بزرگ شامل هزاران ماژول باشند. ما شروع به برخورد با یک گلوگاه عملکرد برای ابزارهای مبتنی بر جاوا اسکریپت کرده‌ایم: اغلب ممکن است یک انتظار طولانی غیرمنطقی طول بکشد (گاهی اوقات تا چند دقیقه!) تا یک سرور توسعه‌دهنده به راه بیفتد، و حتی با Hot Module Replacement (HMR)، ویرایش فایل ممکن است آنچنان طول بکشد که چند ثانیه آن در مرورگر منعکس شود. حلقه بازخورد کند می تواند بر بهره وری و شادی توسعه دهندگان تأثیر بگذارد.ویت Vite قصد دارد با استفاده از پیشرفت‌های جدید در اکوسیستم به این مسائل رسیدگی کند: در دسترس بودن ماژول‌های ES بومی در مرورگرو ظهور ابزارهای جاوا اسکریپت نوشته شده در زبان‌های کامپایل به بومی compile-to-native languages.برطرف کردن مشکل کندی آغاز سرور: هنگام راه‌اندازی سرد cold-starting سرور توسعه‌دهنده، یک راه‌اندازی ساخت مبتنی بر بسته‌ bundler-based باید مشتاقانه بخزد و کل برنامه شما را قبل از اینکه بتواند ارائه شود، بسازد.ویت Vite زمان شروع سرور توسعه دهنده را با تقسیم ماژول های یک برنامه به دو دسته بهبود می بخشد: وابستگی ها و کد منبع.وابستگی ها Dependencies: وابستگی ها عمدتاً جاوا اسکریپت ساده هستند که اغلب در طول توسعه تغییر نمی کنند. برخی از وابستگی های بزرگ (مانند کتابخانه های کامپوننت با صدها ماژول) نیز برای پردازش بسیار گران هستند. وابستگی ها همچنین ممکن است در قالب های مختلف ماژول (مانند ESM یا CommonJS) ارسال شوند.وابستگیهای از پیش آماده ویت، از esbuild استفاده میکنند. esbuild با زبان Go نوشته شده است و وابستگی‌ها را 10 تا 100 برابر سریع‌تر از باندلرهای مبتنی بر جاوا اسکریپت پیش‌ آماده سازی می‌کند.کد منبع: اغلب حاوی جاوا اسکریپت دستکاری شده ای است که نیاز به تبدیل دارد (مانند اجزای JSX، CSS یا Vue/Svelte)، و بیشتر مواقع ویرایش می شود. همچنین، لازم نیست همه کد منبع به طور همزمان بارگیری شوند (مثلاً با جداسازی کد مبتنی بر مسیر : route-based code-splitting).ویت Vite کد منبع را از طریق ESM بومی ارائه می کند. این اساساً به مرورگر اجازه می‌دهد تا بخشی از کار یک باندلر را به عهده بگیرد: Vite فقط باید کد منبع را در صورت درخواست تغییر دهد و ارائه کند، همانطور که مرورگر آن را درخواست می‌کند. درون ریزی و ایمپورت پویای کد بسته به شراط فقط در صورتی پردازش می شود که واقعاً در صفحه فعلی استفاده شود.سرور توسعه مبتنی بر بسته (پیش آماده سازی)سرور توسعه مبتنی بر esm بومی آموزش ویت جی اس Vitejs طراحی سایت | سیداحمد Tue, 14 Mar 2023 15:58:05 +0330