Почетак рада са Вите-ом: Ултимате Буилд Тоол

Како веб апликације постају богатије функцијама, потреба за брзим и ефикасним алатима за прављење наставља да расте у потражњи.

Вите је модеран алат за прављење који обезбеђује муњевит развојни сервер и оптимизован процес изградње, омогућавајући корисницима да поједноставе свој радни ток и побољшају искуство крајњег корисника.

Истражићете како да почнете са Вите-ом, покривајући његов процес инсталације, основне карактеристике и команде интерфејса командне линије (ЦЛИ).

Покрените Вите пројекат

Пре него што можете да користите Вите, морате инсталирати Ноде.јс и Ноде Пацкаге Манагер на вашем систему. Након инсталирања ова два пакета, можете наставити са креирањем пројекта помоћу Вите-а.

Ево како да иницијализујете пројекат са Вите-ом користећи нпм:

нпм инит вите

Када покренете ову команду, она креира нови Вите пројекат у вашем тренутном радном директоријуму. Команда од вас тражи да направите основне изборе конфигурације да бисте подесили свој нови Вите пројекат.

Ево рашчлањивања опција које вам команда тражи да изаберете:

1. Назив пројекта. Када покренете команду, она ће од вас затражити да наведете име за свој нови пројекат. Име које наведете ће се такође појавити у пацкаге.јсон датотеку и служи као име директоријума вашег пројекта.
2. Изаберите оквир. Овај упит ће од вас тражити да одаберете оквир за свој пројекат. Вите тренутно подржава популарне фронт-енд оквире као што су Реацт, Вуе, Ангулар и Ванилла опцију за обичан ЈаваСцрипт код.
3. Изаберите варијанту. Ово вас подстиче да изаберете варијанту за свој пројекат, која покрива алтернативе као што су ЈаваСцрипт и његов језик подскупа ТипеСцрипт.

Након што дате потребне информације, Вите ће генерисати нову структуру пројекта у вашем тренутном радном директоријуму. Структура ће представљати основну поставку пројекта, укључујући а пацкаге.јсон фајл, а срц именик са ан индек.хтмл и маин.јс фајл, и а јавности именик.

Након креирања структуре пројекта, можете да се крећете до директоријума пројекта покретањем цд . Када то учините, инсталирајте све додатне зависности које ће можда захтевати ваш пројекат користећи нпм инсталл команда.

Да бисте покренули развојни сервер и надгледали све промене направљене на вашем пројекту, покренућете нпм рун дев команду унутар вашег пројектног терминала.

Карактеристике Вите

Функције Вите-а се фокусирају на поједностављење процеса израде и побољшање искуства израде веба.

Рапид Девелопмент Сервер

Вите-ов развојни сервер користи изворне ЕС модуле и лењо учитавање модула, омогућавајући невероватну брзину. Ово омогућава брзе петље повратних информација и муњевито време покретања.

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

Вите је побољшао своју процедуру прављења како би произвео производ спреман, оптимизован и минимизиран код. Поред тога, креира датотеку манифеста која може да кешира средства за испад и верзију.

Подршка за различите фронт-енд оквире

Вите подржава различите фронт-енд оквире, укључујући Вуе и слични оквири попут Реацт Јс и Ангулар Јс. Ово омогућава програмерима да изаберу свој преферирани оквир и искористе моћне могућности Вите-а.

Замена врућег модула (ХМР)

Вите-ова функција Хот Модуле Реплацемент (ХМР) омогућава брзо и беспрекорно ажурирање апликације без потребе за потпуно освежавањем странице. Ово чини процес развоја бржим и ефикаснијим.

ЦСС препроцесирање и постЦСС интеграција

Вите подржава ЦСС препроцесу, укључујући Сасс, Лесс и Стилус. Такође се интегрише са ПостЦСС-ом, омогућавајући додатне трансформације и оптимизације ЦСС-а.

Вите долази са многим другим функцијама, укључујући подршку за ТипеСцрипт, ЈСКС и ВебАссембли. Са издавањем Вите в4.0.4, Вите-ова заједница програмера је порасла и активно одржава софтвер, додајући редовне нове функције.

Вите-ов интерфејс командне линије (ЦЛИ)

Вите-ов интерфејс командне линије (ЦЛИ) је згодан алат за прилагођавање Вите-овог понашања. Пружа низ основних команди које такође помажу да се поједностави процес развоја. Ево неких од кључних ЦЛИ команди:

вите буилд

Ова команда ће изградити апликацију за производно окружење, оптимизујући и умањујући код како би била спремна за примену. Користећи ову команду, можете осигурати да ваша апликација буде што бржа и ефикаснија и спремна за дистрибуцију вашим корисницима.

вите превиев

Ова команда вам омогућава да прегледате генерисани код пре него што га примените у производњу. Ако желите да будете сигурни да све изгледа и ради како се очекује и да нема очигледних проблема или проблема који захтевају пажњу, ово је корисна команда за покретање.

вите оптимизе

вите оптимизе је доступан у Вите 2.6 и новијим верзијама које анализирају код пројекта и генеришу оптимизоване производне верзије извођењем стабла протресање, операције раздвајања кода и уграђивање малих средстава директно у коначну верзију како би се смањили захтеви потребни за учитавање апликација.

вите оптимизе аутоматски се извршава током вите буилд команду, која генерише оптимизоване производне верзије. Такође можете да га покренете одвојено да бисте проверили величину и перформансе верзије

Вите-ова конфигурациона датотека

У Вите-у, конфигурациони фајл дефинише различите опције за процес прављења. Вите конфигурациони фајл користи ЈаваСцрипт и синтаксу ЕС6 модула.

Подразумевано, требало би да именујете своју конфигурациону датотеку вите.цонфиг.јс и поставите га у основни директоријум пројекта.

Ево неких од најчешће коришћених опција у Вите конфигурационој датотеци:

• корен. Одређује основни директоријум пројекта.
• сервер. Конфигурише развојни сервер. Укључује опције за конфигурисање захтева за хост, порт и прокси серверу АПИ бацкенд-у.
• додаци. Омогућава додавање додатака у процес изградње Вите-а. Додатак је функција која на неки начин модификује процес изградње, као што је додавање подршке за нови формат датотеке или трансформисање изворног кода.
• решити. Ово конфигурише начин на који Вите решава увозе у пројекту. Укључује опције за одређивање алиаса, екстензија и директоријума модула.

Ево примера Вите конфигурационе датотеке:

увоз { дефинеЦонфиг } из'вите';
увоз пут из'пут';
извозУобичајено дефинеЦонфиг({
 сервер: {
 Лука: 3000,
 отвори: истина,
 },
 реши: {
 алиас: {
'@': патх.ресолве (__дирнаме, './срц'),
 },
 },
 додаци: [],
});

Ова конфигурациона датотека поставља основни Вите пројекат са:

• локални развојни сервер који ради на порту 3000
• алиас за срц именик
• нема додатака

Вите има јаку заједницу

Неколико онлајн ресурса објашњава веома детаљно како да користите Вите са популарним оквирима као што су Реацт, Вуе и Ангулар.

Поред тога, постоји мноштво информација о ефикасном коришћењу Вите-а у његовој званичној документацији. Са овим доступним ресурсима, интеграција Вите-а у ваш следећи пројекат је могућа.