Ի՞նչ է Vite-ը. պարզ ուղեցույց հավելվածների կառուցողների համար

Vite-ը (արտասանվում է «վիթ», ֆրանսերեն՝ «արագ») կայքերի և վեբ հավելվածների build գործիք է։ Դուք կառուցելիս այն գործարկում է զարգացման սերվեր, որը ձեր փոփոխությունները ցույց է տալիս բրաուզերում գրեթե ակնթարթորեն։ Երբ պատրաստ եք գործարկմանը, այն ձեր կոդը փաթեթավորում է փոքր, օպտիմիզացված ֆայլերի, որոնք ցանկացած վեբ հոստինգ կարող է սպասարկել։ Այն անվճար է, բաց կոդով և շատ React, Vue և Svelte նախագծերի լռելյայն գործիքն է։

Ինչու է Vite-ը կարևոր AI-ով կառուցելիս

Հնարավոր է երբեք չգրեք Vite հրաման, բայց եթե ձեր հավելվածը կառուցվել է AI հավելվածների կառուցողով, Vite-ը, ամենայն հավանականությամբ, այն գործարկում է։ Mythex-ը նոր նախագծերը սկսում է Vite + React + TypeScript + Tailwind կառուցվածքով, եթե այլ բան չխնդրեք (ինչպես է ընտրվում տեխնոլոգիան)։

Վիթի ինչ անելը իմանալը օգնում է ձեզ՝

• Հասկանալ Preview-ը։ Կենդանի preview-ը, որը թարմանում է, երբ AI-ն խմբագրում է ֆայլերը, սովորաբար Vite-ի զարգացման սերվեր է։
• Հասկանալ տեղակայումը։ Vite հավելվածը դառնում է ստատիկ ֆայլերի թղթապանակ՝ HTML, JavaScript, CSS և պատկերներ, ինչը էժան և պարզ է հոստելու համար։
• Կարդալ սխալի հաղորդագրությունները։ Երբ preview-ն ցույց է տալիս կարմիր սխալի շերտ կամ դատարկ էջ, հաճախ դա Vite-ն է, որ հայտնում է, թե որևէ ֆայլ չի կազմվել։
• Իմանալ դրա սահմանները։ Vite-ը կառուցում է frontend-ը։ Եթե ձեր հավելվածին անհրաժեշտ է backend՝ տվյալների բազա, գաղտնի API բանալիներ, վճարումներ, այն աշխատում է այլ տեղ։ Տե՛ս frontend և backend։

Առօրյա անալոգիա

Պատկերացրեք ռեստորանի խոհանոց։

• Սպասարկումից առաջ պատրաստություն (մշակում) շեֆ-խոհարարը համտեսում և կարգավորում է յուրաքանչյուր ճաշատեսակը աշխատանքի ընթացքում։ Փոխում է համեմունքը, մի վայրկյան անց նորից համտեսում։ Սա Vite-ի զարգացման սերվերն է. փոխում եք ֆայլ, և էջը անմիջապես թարմանում է, հաճախ առանց ձևում մուտքագրածը կորցնելու։
• Կատերինգի պատվերի համար (արտադրություն) ամեն ինչ եփվում է, բաժանվում, փաթեթավորվում և պիտակավորվում, որպեսզի լավ տեղափոխվի և կարողանա մատուցվել ցանկացած տեղ։ Դա vite build-ն է. ձեր կոդը միավորվում, փոքրացվում և պատրաստվում է ցանկացած հոստինգի համար։

Նույն բաղադրատոմսերը, երկու բոլորովին տարբեր ձևով մշակված, և Vite-ն անում է երկուսը։

Ինչ է իրականում անում Vite-ը

Ժամանակակից վեբ հավելվածը բազմաթիվ ֆայլերից է կազմված՝ կոմպոնենտներ, ոճեր, պատկերներ և երրորդ կողմի գրադարաններ։ Բրաուզերները չեն կարող ամբողջը օգտագործել այնպես, ինչպես գրված է։ TypeScript-ը պետք է վերածվի JavaScript-ի, React-ի JSX-ը պետք է փոխակերպվի, իսկ Tailwind-ի դասերը պետք է վերածվեն CSS-ի։

Vite-ը դա կատարում է երկու ռեժիմով։

Հին գործիքները ցանկացած բան ցուցադրելուց առաջ միավորում էին ամբողջ հավելվածը, ուստի մեծ նախագծի գործարկումը և թարմացումը կարող էր երկար տևել։ Vite-ի հնարքն այն է, որ մշակման ընթացքում դա բաց է թողնում և թույլ է տալիս բրաուզերին ֆայլեր բեռնել ըստ կարիքի։ Արտադրության համար այն դեռ միավորում է. Vite 8-ից սկսած՝ Rolldown անունով bundler-ով, քանի որ շատ փոքր ֆայլերը այցելուների համար դանդաղ են, քան մի քանի օպտիմիզացված ֆայլերը։

Աշխատած օրինակ։ ինչ կա Vite նախագծի ներսում

Նման է, թե ինչպիսին է փոքր Vite + React հավելվածը մոտավորապես։

my-app/
  index.html          ← the one HTML page the app starts from
  package.json        ← list of libraries and scripts (dev, build)
  vite.config.ts      ← Vite settings and plugins
  src/
    main.tsx          ← starts React and mounts it into index.html
    App.tsx           ← your app's top-level component
    index.css         ← styles, e.g. @import "tailwindcss";
  public/             ← files copied as-is (favicon, robots.txt)

Եվ scripts-ը package.json-ում՝

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

Այժմ հետևեք մի փոփոխության։

1. Դուք AI-ին խնդրում եք «դարձրու վերնագիրը կապույտ»։
2. Այն խմբագրում է դաս App.tsx-ում։
3. Vite-ը նկատում է, որ ֆայլը փոխվել է, փոխակերպում է միայն այդ ֆայլը և թարմացումը ուղարկում բրաուզերին։
4. Վերնագիրը Preview-ում դառնում է կապույտ, սովորաբար մեկ վայրկյանի ընթացքում։

Երբ հրապարակում եք, vite build-ը ստեղծում է, օրինակ, dist/index.html և dist/assets/index-a1b2c3.js։ Ֆայլի անվան պատահական թվացող մասը փոխվում է, երբ բովանդակությունը փոխվում է, ուստի բրաուզերները և CDN-ները կարող են ֆայլերը երկար ժամանակ քեշավորել՝ առանց հնացած կոդ սպասարկելու։

Միջավայրի փոփոխականներ Vite-ում

Vite-ը բրաուզերի կոդին է բացահայտում միայն այն փոփոխականները, որոնց անունները սկսվում են VITE_-ով, օրինակ՝ VITE_PUBLIC_MAP_ID։ Դա անվտանգության միջոց է։ բրաուզերի կոդում ցանկացած բան կարող է տեսնել այցելուն, ուստի գաղտնի բանալիները երբեք չպետք է ունենան այդ նախածանցը և պետք է մնան backend-ում։ Տե՛ս միջավայրի փոփոխականներ և գաղտնիքներ։

Հիմնական տերմիններ

Ընդհանուր թյուրըմբռնումներ

• «Vite-ը framework է»։ Այն build գործիք է։ Framework-ը React-ն է, Vue-ն կամ Svelte-ը, իսկ Vite-ը այն գործարկում և փաթեթավորում է։
• «Vite հավելվածը ներառում է backend»։ Ստանդարտ Vite հավելվածը միայն frontend է։ Տվյալների բազաները, մուտքերը և գաղտնի բանալիները պահանջում են սերվեր կամ API դրա կողքին։
• «Dev սերվերը նորմալ է առցանց դնել»։ Այն չի նախատեսված իրական երթևեկության համար։ Միշտ տեղակայեք արտադրական build-ի ելքը։
• «.env-ում ամեն ինչ գաղտնի է»։ Vite հավելվածում VITE_ փոփոխականները ներդրվում են այն ֆայլերում, որոնք յուրաքանչյուր այցելու ներբեռնում է։
• «404 տվող էջը թարմացնելը նշանակում է, որ հավելվածը կոտրված է»։ Single-page հավելվածում հոստը պետք է յուրաքանչյուր երթուղի ուղարկի հետ դեպի index.html։ Դա հոստինգի կարգավորում է. տե՛ս ինչպես շտկել 404 սխալները տեղակայումից հետո։

Ինչ խնդրել ձեր AI կառուցողից

• «Այս հավելվածը միայն Vite-ն է (frontend), թե՞ ունի նաև backend։ Յուրաքանչյուր մաս որտե՞ղ է աշխատում»։
• «Գործարկիր արտադրական build-ը և շտկիր բոլոր սխալները կամ զգուշացումները, նախքան հրապարակելը»։
• «Ստուգիր, որ գաղտնի բանալիներ չկան VITE_ փոփոխականներում կամ որևէ տեղ frontend կոդում»։
• «Preview-ն ցույց է տալիս դատարկ էջ. ստուգիր Vite-ի և բրաուզերի կոնսոլի սխալները և շտկիր պատճառը»։ Տե՛ս ինչպես շտկել սպիտակ դատարկ էջը։
• «Համոզվիր, որ ցանկացած էջի URL թարմացնելը աշխատում է հրապարակումից հետո, ոչ միայն գլխավոր էջում»։

Vite Mythex-ում

Ամեն նոր Mythex նախագիծ սկսվում է Vite-ով, եթե չեք խնդրում Next.js, ստատիկ HTML կամ այլ backend։ Ձեր անձնական sandbox-ում կենդանի Preview-ն թարմանում է, երբ agent-ը խմբագրում է ֆայլերը, իսկ Publish-ը build է անում հավելվածը և տեղակայում այն. ոչ մի հոստինգ ինքներդ կարգավորելու կարիք չկա։ Եթե հետագայում API կամ տվյալների բազա պետք լինի, չատում խնդրեք, և Mythex-ը կարող է ավելացնել backend ծառայություն Vite front end-ի կողքին (բազմածառայության հավելվածներ)։

Հարցեր