اگر محیط توسعه Vite را در نظر می گیرید، این ویژگی ها را در Vite 4 دریافت خواهید کرد.
Vite v4.0.4 در 3 ژانویه 2023، تنها پنج ماه پس از Vite 3 منتشر شد. عملکردهای محیط توسعه Vite را بهبود می بخشد، با ویژگی ها و به روز رسانی های جدیدی ارائه می شود که تجربه توسعه جاوا اسکریپت را سریعتر و قوی تر از قبل می کند.
در اینجا، ما در مورد چیستی Vite، همراه با ویژگی‌ها و به‌روزرسانی‌های قابل توجه در Vite 4 صحبت خواهیم کرد.
Vite چیست؟
خود کلمه “vite” به معنای “سریع” است. این یک ابزار ساخت جلویی و سرور توسعه است که برای ارائه تجربه توسعه سریعتر، سبک‌تر و ساده‌تر طراحی شده است. این کد شما را در حین توسعه ارائه می‌کند، فایل‌های شما را برای تولید بسته‌بندی می‌کند و امکان یکپارچه‌سازی آسان با چارچوب‌ها و کتابخانه‌های جاوا اسکریپت، مانند Vue، React، Preact، و Svelte را فراهم می‌کند.
Vite در دو سال گذشته دستخوش پیشرفت های زیادی شده است و Vite 4 چندین ویژگی جدید و بهبود یافته را به ارمغان می آورد. اینها شامل میانبرهای رابط خط فرمان بیشتری هستند (h را در Vite 4 فشار دهید تا لیستی از تمام میانبرها را ببینید). این نرم‌افزار از Safari 14 برای سازگاری گسترده‌تر ES2020 پشتیبانی می‌کند، و هنگام بسته‌بندی وابستگی‌ها، به همراه پیام‌های خطای بهبودیافته در طول SSR، از پچ پکیج پشتیبانی می‌کند.
در این میان، چهار ارتقای زیر در Vite 4 از اهمیت ویژه ای برخوردار است.
1. مجموعه 3
Rollup یک بسته‌کننده ماژول جاوا اسکریپت است که به توسعه‌دهندگان اجازه می‌دهد تا ماژول‌های مختلف جاوا اسکریپت را در یک فایل واحد جمع کنند. این به نوبه خود با کاهش تعداد درخواست هایی که مرورگر برای بارگذاری کد نیاز دارد، عملکرد برنامه را بهبود می بخشد.
Vite اکنون از Rollup 3 در طول زمان ساخت استفاده می کند. نسخه 3 Vite از Rollup 2 استفاده می کرد، اما پس از انتشار Rollup 3 در اکتبر 2022، نسخه جدید Vite با ارتقاء اساسی به Rollup 3 عرضه شد.
شما باید قبل از ارتقا به جمع‌بندی 3 به راهنمای انتقال جمع‌آوری مراجعه کنید، زیرا ممکن است مشکلاتی رخ دهد، حتی اگر Rollup 3 بیشتر با Rollup 2 سازگار است.
2. پلاگین جدید React با استفاده از Speedy Web Compiler (SWC)
SWC یک کامپایلر جاوا اسکریپت فوق سریع است که به زبان Rust نوشته شده است. SWC و Babel هر دو کامپایلرهای جاوا اسکریپت هستند که کد شما را برای خواندن آن توسط مرورگرها تغییر می دهند. SWC ادعا می کند که سریعتر از Babel است.
از آنجایی که Vite v3 از Babel استفاده می کرد، نسخه 4 با معرفی SWC به عنوان جایگزین یا جایگزین، به خصوص برای پروژه های React ارائه می شود.
در حالی که Vite به پشتیبانی از Babel ادامه می دهد، Vite 4 دو پلاگین (vitejs/plugin-react و vitejs/plugin-react-swc) را با معاوضه های مختلف برای پروژه های React معرفی می کند.
پلاگین vitejs/plugin-react
این افزونه با استفاده از esbuild و Babel، تعویض سریع Hot Module را در عین استفاده از حداقل اندازه بسته ارائه می‌کند. همچنین قابلیت استفاده از خط لوله تبدیل Babel را افزایش می‌دهد، در حالی که Hot Module Replacement امکان تجدید چربی را فراهم می‌کند. این به توسعه دهندگان اجازه می دهد تا ماژول ها را در یک برنامه در حال اجرا بدون نیاز به بازخوانی کل صفحه به روز کنند. برای نصب افزونه در پروژه خود، نمایش زیر را دنبال کنید:
npm install @vitejs/plugin-react
برای وارد کردن افزونه به پروژه خود کد زیر را دنبال کنید:
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
})
پلاگین vitejs/plugin-react-swc
این یک افزونه جدید است که از esbuild در حین ساخت و از Speed Web Compiler در هنگام توسعه استفاده می کند.
هدف این افزونه با جایگزینی Babel با SWC، سرعت بخشیدن به فرآیند توسعه به‌ویژه برای پروژه‌هایی است که به پسوندهای غیر استاندارد React نیاز ندارند.
در اینجا نحوه نصب افزونه آورده شده است:
npm i @vitejs/plugin-react-swc
به صورت زیر آن را در پروژه خود وارد کنید:
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
export default defineConfig({
plugins: [react()],
});
3. وارد کردن CSS به عنوان یک رشته
این ویژگی یک راه حل برای رفتار بارگذاری دوباره Vite 3 CSS ارائه می دهد که با وارد کردن صادرات پیش فرض یک فایل CSS رخ می دهد، به عنوان مثال:
import cssString from './global.css
برای جلوگیری از این رفتار، Vite 4 استفاده از اصلاح کننده پسوند پرس و جوی ?inline را معرفی می کند. در اینجا یک نمایش از نحو است:
import cssString from './global.css?inline'
بنابراین صادرات پیش‌فرض V3 CSS منسوخ شده است.
4. متغیرهای محیطی
Vite وابستگی های خود را به dotenv و dotenv-expand به روز کرد. نسخه های جدید مورد استفاده به ترتیب dotenv 16 و dotenv-expand 9 هستند. این به‌روزرسانی از شما می‌خواهد مقادیری را که شامل کاراکترهای «#» یا «`» هستند، در گیومه قرار دهید تا از عملکرد مناسب اطمینان حاصل کنید. به عنوان مثال:
SECRET_HASH="something-with-a-#-hash"
برای سهولت فرآیند به‌روزرسانی فایل‌های ENV، Vite استفاده از رابط خط فرمان dotenv را توصیه کرده است. این یک پلاگین اختیاری است که می‌تواند به اطمینان از سازگاری فایل‌های ENV در ماشین‌ها، محیط‌ها یا اعضای تیم مختلف کمک کند. این می تواند کمک کند تا روند به روز رسانی فایل های ENV کمتر خسته کننده شود.
آیا زمان آن رسیده است که توسعه خود را به Vite 4 تغییر دهید؟
Vite 4 با پیشرفت‌های بی‌شمار و کم‌کلید، نه تنها یک نسخه غافلگیرکننده است، بلکه یک نسخه خوش‌آمد است که پتانسیل این محیط توسعه را گسترش می‌دهد.