Създайте вашите сложни уеб приложения за по-малко време, с по-бърза обратна връзка, като използвате Vite.

Тъй като уеб приложенията стават все по-богати на функции, търсенето на бързи и ефективни инструменти за изграждане продължава да нараства.

Vite е модерен инструмент за изграждане, който предоставя светкавично бърз сървър за разработка и оптимизиран процес на изграждане, което позволява на потребителите да рационализират своя работен процес и да подобрят изживяването на крайния потребител.

Ще проучите как да започнете с Vite, покривайки процеса на инсталиране, основните функции и командите на интерфейса на командния ред (CLI).

Инициализирайте проект Vite

Преди да можете да използвате Вите, трябва да инсталирате Node.js и Node Package Manager във вашата система. След като инсталирате тези два пакета, можете да продължите да създавате проект с Vite.

Ето как да инициализирате проект с Vite с помощта на npm:

npm init vite

Когато изпълните тази команда, тя създава нов Vite проект в текущата ви работна директория. Командата ви подканва да направите основни избори на конфигурация, за да настроите новия си проект Vite.

instagram viewer

Ето разбивка на опциите, които командата ви подканва да изберете:

  1. Име на проекта. Когато изпълните командата, тя ви подканва да предоставите име за вашия нов проект. Името, което предоставите, също ще се появи в package.json файл и служи като име на директорията на вашия проект.
  2. Изберете рамка. Тази подкана ще ви помоли да изберете рамка за вашия проект. В момента Vite поддържа популярни предни рамки като React, Vue, Angular и опция Vanilla за обикновен JavaScript код.
  3. Изберете вариант. Това ви подканва да изберете вариант за вашия проект, обхващащ алтернативи като JavaScript и неговият подмножество език TypeScript.

След като предоставите необходимата информация, Vite ще генерира нова структура на проекта във вашата текуща работна директория. Структурата ще представлява основна настройка на проекта, включително a package.json файл, a src указател с ан index.html и main.js файл и a публичен указател.

След като създадете структурата на проекта, можете да отидете до директорията на проекта, като стартирате cd . След като го направите, инсталирайте всички допълнителни зависимости, които вашият проект може да изисква, като използвате npm инсталирайте команда.

За да стартирате сървър за разработка и да наблюдавате всички промени, направени във вашия проект, ще стартирате npm стартиране dev команда във вашия терминал на проекта.

Характеристики на Vite

Функциите на Vite се фокусират върху рационализиране на процеса на изграждане и подобряване на изживяването при изграждане на мрежата.

Сървър за бърза разработка

Сървърът за разработка на Vite използва собствени ES модули и зареждане на мързеливи модули, което позволява невероятна скорост. Това позволява бързи вериги за обратна връзка и светкавично бързо стартиране.

Оптимизиран процес на изграждане

Vite подобри своята процедура за изграждане, за да произведе готов за производство, оптимизиран и минимизиран код. Освен това той създава манифестен файл, който може да кешира активи за спиране и версия.

Поддръжка за различни предни рамки

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 се разрасна и активно поддържа софтуера, като редовно добавя нови функции.

Интерфейс на командния ред (CLI) на Vite

Интерфейсът на командния ред (CLI) на Vite е удобен инструмент за персонализиране на поведението на Vite. Той предоставя набор от основни команди, които също помагат за рационализиране на процеса на разработка. Ето някои от най-важните CLI команди:

vite build

Тази команда ще изгради приложението за производствена среда, като оптимизира и минимизира кода, така че да е готово за внедряване. Използвайки тази команда, можете да гарантирате, че вашето приложение е възможно най-бързо и ефективно и готово за разпространение до вашите потребители.

vite визуализация

Тази команда ви позволява да визуализирате генерирания код, преди да го внедрите в производствена среда. Ако искате да сте сигурни, че всичко изглежда и работи според очакванията и няма очевидни проблеми или проблеми, които изискват внимание, това е полезна команда за изпълнение.

vite optimize

vite optimize се предлага във Vite 2.6 и по-нови версии, които анализират кода на проекта и генерират оптимизирани производствени компилации чрез извършване на дърво разклащане, операции за разделяне на код и вграждане на малки активи директно в крайната компилация за намаляване на заявките, необходими за зареждане на ап.

vite optimize се изпълнява автоматично по време на vite build команда, която генерира оптимизирани производствени компилации. Можете също да го стартирате отделно, за да проверите размера на компилацията и производителността

Конфигурационният файл на Vite

Във Vite конфигурационният файл дефинира различни опции за процеса на изграждане. Конфигурационният файл на Vite използва JavaScript и синтаксиса на модулите ES6.

По подразбиране трябва да наименувате конфигурационния файл vite.config.js и го поставете в главната директория на проекта.

Ето някои от най-често използваните опции в конфигурационния файл на Vite:

  • корен. Указва основната директория на проекта.
  • сървър. Конфигурира сървъра за разработка. Той включва опции за конфигуриране на хост, порт и заявки за прокси към бекенда на API.
  • добавки. Позволява добавяне на добавки към процеса на изграждане на Vite. Плъгинът е функция, която модифицира процеса на изграждане по някакъв начин, като например добавяне на поддръжка за нов файлов формат или трансформиране на изходния код.
  • разрешавам. Това конфигурира как Vite разрешава импортиранията в проекта. Той включва опции за указване на псевдоними, разширения и директории на модули.

Ето пример за конфигурационен файл на Vite:

импортиране {defineConfig} от"кани";
импортиране път от"път";
износпо подразбиране defineConfig({
 сървър: {
 порт: 3000,
 отворено: вярно,
 },
 разреши: {
 псевдоним: {
'@': path.resolve (__dirname, './src'),
 },
 },
 добавки: [],
});

Този конфигурационен файл настройва основен проект на Vite с:

  • локален сървър за разработка, работещ на порт 3000
  • псевдоним за src указател
  • няма плъгини

Vite има силна общност

Няколко онлайн ресурса обясняват много подробно как да използвате Vite с популярни рамки като React, Vue и Angular.

Освен това има богата информация за ефективното използване на Vite в неговата официална документация. С тези налични ресурси интегрирането на Vite в следващия ви проект е възможно.