რა არის Vite? მარტივი გზამკვლევი აპის შემქმნელებისთვის

Vite (წარმოითქმის „ვიტ“, ფრანგულად „სწრაფი“) არის build ინსტრუმენტი ვებსაიტებისა და ვებ-აპებისთვის. აგებისას ის უშვებს development სერვერს, რომელიც თქვენს ცვლილებებს ბრაუზერში თითქმის მყისიერად აჩვენებს. გასაშვებად მზადყოფნისას ის თქვენს კოდს აწყობს პატარა, ოპტიმიზებულ ფაილებად, რომლებსაც ნებისმიერი ვებ ჰოსტი მიაწვდის. ის უფასო და ღია კოდის არის და ბევრი React, Vue და Svelte პროექტის ნაგულისხმევი ინსტრუმენტია.

რატომ არის Vite მნიშვნელოვანი AI-ით აშენებისას

შეიძლება Vite ბრძანებას არასდროს აკრიფოთ, მაგრამ თუ აპი AI აპის ბილდერით არის აგებული, Vite სავარაუდოდ მას უშვებს. Mythex ახალ პროექტებს იწყებს Vite + React + TypeScript + Tailwind სტეკზე, თუ სხვა რამე არ მოითხოვეთ (როგორ შეირჩევა ტექნოლოგია).

Vite-ის გაგება გეხმარებათ:

• გაიგოთ Preview. ცოცხალი preview, რომელიც AI-ს მიერ ფაილების რედაქტირებისას ახლდება, ჩვეულებრივ Vite-ის development სერვერია.
• გაიგოთ დეპლოიმენტი. Vite აპი ხდება სტატიკური ფაილების საქაღალდედ — HTML, JavaScript, CSS და სურათები — რაც იაფი და მარტივად ჰოსტირებადია.
• წაიკითხოთ შეცდომის შეტყობინებები. როცა preview წითელ შეცდომის ფანჯარას ან ცარიელ გვერდს აჩვენებს, ხშირად Vite ამბობს, რომ ფაილი ვერ შეგროვდა.
• იცოდეთ მისი ზღვარი. Vite აშენებს frontend-ს. თუ თქვენს აპს backend სჭირდება — მონაცემთა ბაზა, საიდუმლო API გასაღებები, გადახდები — ის სხვაგან მუშაობს. იხილეთ frontend და backend.

ყოველდღიური ანალოგია

წარმოიდგინეთ რესტორნის სამზარეულო.

• მომზადების დროს (development) შეფი ყოველ კერძს გასინჯავს და არეგულირებს. შეცვალე სანელებელი, წამის შემდეგ კვლავ გასინჯე. ეს არის Vite-ის dev სერვერი: ცვლით ფაილს, გვერდი მაშინვე განახლდება, ხშირად ისე, რომ ფორმაში აკრეფილი არ დაიკარგება.
• კეითერინგის შეკვეთისთვის (production) ყველაფერი მზადდება, იწონება, იფუთება და ეტიკეტირდება, რომ კარგად გადაიტანოს და ნებისმიერ ადგილას მიირთვან. ეს არის vite build: თქვენი კოდი ერთიანდება, მცირდება და იღებს ხელახლა ამოქმედებად სახელებს, რომ ნებისმიერ ჰოსტზე მზად იყოს.

ერთი და იგივე რეცეპტები, ორი ძალიან განსხვავებული მომსახურება — და Vite ორივეს აკეთებს.

რას აკეთებს Vite სინამდვილეში

თანამედროვე ვებ-აპი შედგება მრავალი ფაილისგან: კომპონენტები, სტილები, სურათები და მესამე მხარის ბიბლიოთეკები. ბრაუზერებს ეს ყველაფერი არ შეუძლია როგორც არის. TypeScript უნდა გადაიქცეს JavaScript-ად, React-ის JSX უნდა გარდაიქმნას, ხოლო Tailwind-ის კლასები უნდა იქცეს CSS-ად.

Vite ამას ორ რეჟიმში აკეთებს:

ძველი ინსტრუმენტები მთელ აპს აერთიანებდნენ, სანამ რამეს აჩვენებდნენ, ამიტომ დიდი პროექტის დაწყებას ან განახლებას შეიძლება დიდი დრო დასჭირვებოდა. Vite-ის ხერხი ამას development-ის დროს არ აკეთებს და ბრაუზერს ფაილებს საჭიროებისამებრ ატვირთვინებს. production-ისთვის ის კვლავ აერთიანებს — Vite 8-დან Rolldown-ის სახელის მქონე bundler-ით — რადგან ბევრი პატარა ფაილი ვიზიტორებისთვის ნელია, ვიდრე რამდენიმე ოპტიმიზებული.

სამუშაო მაგალითი: რა არის Vite პროექტის შიგნით

აი, დაახლოებით როგორ გამოიყურება პატარა Vite + React აპი:

my-app/
  index.html          ← ერთადერთი HTML გვერდი, საიდანაც აპი იწყება
  package.json        ← ბიბლიოთეკებისა და სკრიპტების სია (dev, build)
  vite.config.ts      ← Vite-ის პარამეტრები და plugin-ები
  src/
    main.tsx          ← იწყებს React-ს და ამონტაჟებს index.html-ში
    App.tsx           ← თქვენი აპის ზედა დონის კომპონენტი
    index.css         ← სტილები, მაგ. @import "tailwindcss";
  public/             ← ფაილები, რომლებიც როგორც არის კოპირდება (favicon, robots.txt)

და სკრიპტები 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 არის ფრეიმვორქი.“ ის build ინსტრუმენტია. React, Vue ან Svelte არის ფრეიმვორქი; Vite მას უშვებს და აწყობს.
• „Vite აპი მოიცავს backend-ს.“ სტანდარტული Vite აპი მხოლოდ frontend-ია. მონაცემთა ბაზები, შესვლა და საიდუმლო გასაღებები საჭიროებს სერვერს ან API-ს მის გვერდით.
• „dev სერვერის ონლაინ დადება უსაფრთხოა.“ ის რეალური ტრაფიკისთვის არ არის განკუთვნილი. ყოველთვის დეპლოიმენტს უნდა გაუკეთოთ production build-ის გამოსავალს.
• „ყველაფერი .env-ში საიდუმლოა.“ Vite აპში VITE_ ცვლადები ჩაიწერება იმ ფაილებში, რომლებსაც ყოველი ვიზიტორი ჩამოტვირთავს.
• „გვერდის განახლებისას 404 ნიშნავს, რომ აპი გატეხილია.“ single-page აპში ჰოსტმა ყველა მარშრუტი უნდა დააბრუნოს index.html-ზე. ეს ჰოსტინგის პარამეტრია — იხილეთ როგორ გავასწოროთ 404 შეცდომები დეპლოიმენტის შემდეგ.

რა სთხოვოთ თქვენს AI-ბილდერს

• „ეს აპი მხოლოდ Vite-ია (frontend), თუ backend-იც აქვს? სად მუშაობს თითოეული ნაწილი?“
• „გაუშვი production build და გამოასწორე ყველა შეცდომა და გაფრთხილება, სანამ გამოვაქვეყნებ.“
• „შეამოწმე, რომ არცერთი საიდუმლო გასაღები არ იყოს VITE_ ცვლადებში ან frontend კოდში.“
• „Preview ცარიელ გვერდს აჩვენებს — შეამოწმე Vite-ისა და ბრაუზერის კონსოლის შეცდომები და გამოასწორე მიზეზი.“ იხილეთ როგორ გავასწოროთ ცარიელი თეთრი გვერდი.
• „დარწმუნდი, რომ ნებისმიერი გვერდის URL-ის განახლება მუშაობს გამოქვეყნების შემდეგ, და არა მხოლოდ მთავარი გვერდისთვის.“

Vite Mythex-ში

ყოველი ახალი Mythex პროექტი იწყება Vite-ზე, თუ არ მოითხოვთ Next.js-ს, სტატიკურ HTML-ს ან სხვა backend-ს. თქვენს პირად sandbox-ში ცოცხალი Preview ახლდება, როცა აგენტი ფაილებს არედაქტირებს, ხოლო Publish აგებს აპს და დეპლოიმენტს უკეთებს — თავად ჰოსტინგის დაყენება საჭირო არ არის. თუ მოგვიანებით API ან მონაცემთა ბაზა დაგჭირდებათ, ჩატში სთხოვეთ, და Mythex შეძლებს backend სერვისის დამატებას Vite frontend-თან ერთად (მრავალსერვისიანი აპები).

კითხვები