شروع با Vite: The Ultimate Build Tool

با استفاده از Vite، برنامه های پیچیده وب خود را در زمان کمتری با یک حلقه بازخورد سریعتر بسازید.

همانطور که برنامه های کاربردی وب از ویژگی های بیشتری برخوردار می شوند، نیاز به ابزارهای ساخت سریع و کارآمد همچنان در تقاضا افزایش می یابد.

Vite یک ابزار ساخت مدرن است که یک سرور توسعه سریع و یک فرآیند ساخت بهینه را ارائه می دهد و به کاربران امکان می دهد گردش کار خود را ساده کرده و تجربه کاربر نهایی را بهبود بخشند.

نحوه شروع با Vite را بررسی خواهید کرد که شامل مراحل نصب، ویژگی‌های ضروری و دستورات Command Line Interface (CLI) می‌شود.

یک پروژه Vite را راه اندازی کنید

قبل از اینکه بتوانید از Vite استفاده کنید، باید Node.js و Node Package Manager را روی سیستم خود نصب کنید. پس از نصب این دو بسته، می توانید با Vite اقدام به ساخت پروژه کنید.

در اینجا نحوه مقداردهی اولیه یک پروژه با Vite با استفاده از npm آمده است:

npm init vite

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

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

1. نام پروژه هنگامی که دستور را اجرا می کنید، از شما می خواهد که نامی برای پروژه جدید خود ارائه دهید. نامی که ارائه می کنید نیز در فایل package.json ظاهر می شود و به عنوان نام دایرکتوری پروژه شما عمل می کند.
2. یک چارچوب را انتخاب کنید. این اعلان از شما می خواهد که یک چارچوب برای پروژه خود انتخاب کنید. Vite در حال حاضر از فریم ورک های فرانت اند محبوب مانند React، Vue، Angular و گزینه Vanilla برای کدهای جاوا اسکریپت ساده پشتیبانی می کند.
3. یک نوع را انتخاب کنید. این از شما می‌خواهد که یک نوع برای پروژه خود انتخاب کنید که جایگزین‌هایی مانند جاوا اسکریپت و زبان زیر مجموعه آن TypeScript را پوشش می‌دهد.

پس از ارائه اطلاعات مورد نیاز، Vite یک ساختار پروژه جدید در فهرست کاری فعلی شما ایجاد می کند. این ساختار یک راه‌اندازی اولیه پروژه را نشان می‌دهد، از جمله یک فایل package.json، یک فهرست src با یک فایل index.html و main.js و یک فهرست عمومی.

پس از ایجاد ساختار پروژه، می توانید با اجرای cd به دایرکتوری پروژه بروید. پس از انجام این کار، هر وابستگی اضافی را که پروژه شما ممکن است به آن نیاز داشته باشد با استفاده از دستور npm install نصب کنید.

برای راه اندازی سرور توسعه و نظارت بر تغییرات ایجاد شده در پروژه خود، دستور npm run dev را در ترمینال پروژه خود اجرا خواهید کرد.

ویژگی های Vite

ویژگی‌های Vite بر ساده‌سازی فرآیند ساخت و افزایش تجربه ساخت وب متمرکز است.

سرور توسعه سریع

سرور توسعه Vite از ماژول‌های بومی ES و بارگیری ماژول تنبل استفاده می‌کند که سرعت فوق‌العاده‌ای را ممکن می‌سازد. این امکان را برای حلقه‌های بازخورد سریع و زمان راه‌اندازی سریع فراهم می‌کند.

فرآیند ساخت بهینه

Vite روش ساخت خود را برای تولید کدهای آماده، بهینه و کوچک شده برای تولید بهبود بخشید. علاوه بر این، یک فایل مانیفست ایجاد می‌کند که می‌تواند دارایی‌های bust و نسخه را ذخیره کند.

پشتیبانی از فریم‌ورک‌های مختلف Front-End

Vite از فریم ورک های فرانت اند مختلف، از جمله Vue، و فریمورک های مشابه مانند React Js و Angular Js پشتیبانی می کند. این به توسعه دهندگان اجازه می دهد تا چارچوب مورد نظر خود را انتخاب کنند و از قابلیت های قدرتمند Vite استفاده کنند.

تعویض ماژول داغ (HMR)

ویژگی Hot Module Replacement (HMR) Vite امکان به‌روزرسانی سریع و بدون درز برنامه را بدون نیاز به بازخوانی کامل صفحه فراهم می‌کند. این باعث می شود روند توسعه سریعتر و کارآمدتر شود.

پیش پردازش CSS و یکپارچه سازی PostCSS

Vite از پیش پردازش CSS از جمله Sass، Less و Stylus پشتیبانی می کند. همچنین با PostCSS ادغام می شود و امکان تغییر و بهینه سازی اضافی را در CSS فراهم می کند.

Vite با بسیاری از ویژگی های دیگر از جمله پشتیبانی از TypeScript، JSX و WebAssembly ارائه می شود. با انتشار Vite v4.0.4، جامعه توسعه دهندگان Vite رشد کرده است و به طور فعال نرم افزار را حفظ می کند و ویژگی های جدید را به طور منظم اضافه می کند.

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

رابط خط فرمان Vite (CLI) یک ابزار مفید برای سفارشی کردن رفتار Vite است. طیف وسیعی از دستورات ضروری را ارائه می دهد که به ساده سازی فرآیند توسعه نیز کمک می کند. در اینجا برخی از دستورات مهم CLI آورده شده است:

ویته ساخت

این دستور برنامه را برای یک محیط تولید می‌سازد و کد را بهینه و کوچک می‌کند تا آماده استقرار باشد. با استفاده از این دستور می توانید اطمینان حاصل کنید که برنامه شما تا حد امکان سریع و موثر است و برای توزیع در بین کاربران آماده است.

پیش نمایش vite

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

vite بهینه سازی

vite optimize در Vite 2.6 و نسخه‌های بعدی موجود است که کد پروژه را تجزیه و تحلیل می‌کند و با انجام تکان دادن درخت، عملیات تقسیم کد، و جاسازی دارایی‌های کوچک مستقیماً در ساخت نهایی برای کاهش درخواست‌های مورد نیاز برای بارگذاری برنامه، ساخت‌های تولید بهینه‌سازی شده را تجزیه و تحلیل می‌کند.

vite optimize به طور خودکار در طول دستور vite build اجرا می شود که ساخت های تولیدی بهینه سازی شده را تولید می کند. همچنین می توانید آن را به طور جداگانه اجرا کنید تا اندازه ساخت و عملکرد را بررسی کنید

فایل پیکربندی Vite

در Vite، فایل پیکربندی گزینه های مختلفی را برای فرآیند ساخت تعریف می کند. فایل پیکربندی Vite از جاوا اسکریپت و سینتکس ماژول های ES6 استفاده می کند.

به طور پیش فرض، باید نام فایل پیکربندی خود را vite.config.js گذاشته و آن را در دایرکتوری اصلی پروژه قرار دهید.

در اینجا برخی از رایج ترین گزینه های مورد استفاده در فایل پیکربندی Vite آورده شده است:

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

در اینجا نمونه ای از فایل پیکربندی Vite آورده شده است:

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  server: {
    port: 3000,
    open: true,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  plugins: [],
});

این فایل پیکربندی یک پروژه اولیه Vite را با موارد زیر راه اندازی می کند:

• یک سرور توسعه محلی که روی پورت 3000 اجرا می شود
• نام مستعار دایرکتوری src
• بدون پلاگین

Vite یک جامعه قوی دارد

چندین منبع آنلاین با جزئیات کامل نحوه استفاده از Vite با فریمورک های محبوبی مانند React، Vue و Angular را توضیح می دهند.

علاوه بر این، اطلاعات زیادی در مورد استفاده موثر از Vite در اسناد رسمی آن وجود دارد. با این منابع موجود، ادغام Vite در پروژه بعدی شما امکان پذیر است.

منبع مقاله