Vite ni nini? Mwongozo Rahisi kwa Wajenzi wa Programu

Vite (hutamkwa "veet", maana yake "haraka" kwa Kifaransa) ni zana ya kujenga tovuti na programu za wavuti. Unapokuwa unajenga, inaendesha seva ya maendeleo inayoonyesha mabadiliko yako kwenye kivinjari karibu papo hapo. Unapokuwa tayari kuzindua, inafunga msimbo wako kuwa faili ndogo na zilizoboreshwa ambazo mwenyeji yeyote wa wavuti anaweza kuzitoa. Ni bure, ni ya chanzo huria, na ndiyo zana ya msingi nyuma ya miradi mingi ya React, Vue na Svelte.

Kwa nini Vite ni muhimu unapojenga kwa AI

Huenda usiandike amri yoyote ya Vite kamwe, lakini ikiwa programu yako ilijengwa kwa zana ya kujenga programu ya AI, Vite huenda ndiyo inayoiendesha. Mythex huanzisha miradi mipya kwenye Vite + React + TypeScript + Tailwind isipokuwa uombe kitu kingine (jinsi teknolojia inavyochaguliwa).

Kujua kazi ya Vite kunakusaidia:

• Kuelewa Preview. Onyesho la moja kwa moja linalosasishwa AI inapohariri faili kwa kawaida ni seva ya maendeleo ya Vite.
• Kuelewa uchapishaji. Programu ya Vite inakuwa folda ya faili tuli: HTML, JavaScript, CSS na picha, ambazo ni rahisi na nafuu kuzihifadhi mtandaoni.
• Kusoma ujumbe wa hitilafu. Preview ikionyesha kisanduku chekundu cha hitilafu au ukurasa mtupu, mara nyingi ni Vite inayoripoti kwamba faili moja imeshindwa kujengwa.
• Kujua mipaka yake. Vite inajenga sehemu ya mbele (frontend). Ikiwa programu yako inahitaji backend (hifadhidata, funguo za siri za API, malipo), hiyo inaendeshwa mahali pengine. Tazama sehemu ya mbele dhidi ya nyuma.

Mfano wa kila siku

Fikiria jikoni la mgahawa.

• Wakati wa maandalizi ya huduma (maendeleo), mpishi anaonja na kurekebisha kila chakula kadiri anavyoendelea. Badilisha viungo, onja tena sekunde moja baadaye. Hiyo ndiyo seva ya maendeleo ya Vite: unabadilisha faili, ukurasa unasasishwa mara moja, mara nyingi bila hata kupoteza ulichoandika kwenye fomu.
• Kwa oda ya karamu (uzalishaji), kila kitu kinapikwa, kugawanywa, kufungwa na kuwekewa lebo ili kisafiri vizuri na kuhudumiwa popote. Hiyo ndiyo vite build: msimbo wako unaunganishwa, kupunguzwa na kupewa alama tayari kwa mwenyeji yeyote.

Mapishi yale yale, njia mbili tofauti za kuyashughulikia, na Vite inafanya zote mbili.

Vite inafanya nini hasa

Programu ya kisasa ya wavuti inaundwa na faili nyingi: vipengele, mitindo, picha na maktaba za watu wengine. Vivinjari haviwezi kutumia yote hayo kama yalivyoandikwa. TypeScript inapaswa kugeuzwa kuwa JavaScript, JSX ya React inapaswa kubadilishwa, na madarasa ya Tailwind yanapaswa kugeuzwa kuwa CSS.

Vite inashughulikia haya katika njia mbili:

Zana za zamani zilifunga programu nzima kabla ya kuonyesha chochote, kwa hiyo kuanzisha na kusasisha mradi mkubwa kuliweza kuchukua muda mrefu. Mbinu ya Vite ni kuruka hatua hiyo wakati wa maendeleo na kuacha kivinjari kupakia faili inapozihitaji. Kwa uzalishaji bado inaunganisha, kuanzia Vite 8, kwa kutumia kifungashio kiitwacho Rolldown, kwa sababu faili nyingi ndogo ni polepole kwa wageni kuliko chache zilizoboreshwa.

Mfano wa kazi: kilichomo ndani ya mradi wa Vite

Hii ndiyo muundo wa takriban wa programu ndogo ya Vite + React:

my-app/
  index.html          ← ukurasa mmoja wa HTML ambapo programu inaanzia
  package.json        ← orodha ya maktaba na amri (dev, build)
  vite.config.ts      ← mipangilio ya Vite na plugins
  src/
    main.tsx          ← inaanzisha React na kuiweka ndani ya index.html
    App.tsx           ← kipengele cha juu kabisa cha programu yako
    index.css         ← mitindo, mfano @import "tailwindcss";
  public/             ← faili zinazonakiliwa kama zilivyo (favicon, robots.txt)

Na amri katika package.json:

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

Sasa fuata badiliko moja:

1. Unamwomba AI "fanya kichwa cha habari kiwe bluu".
2. Inabadilisha darasa moja kwenye App.tsx.
3. Vite inagundua faili limebadilika, inabadilisha faili hilo tu na kumsukumia kivinjari sasisho.
4. Kichwa cha habari kinageuka bluu kwenye preview, kwa kawaida ndani ya sekunde moja.

Unapochapisha, vite build huzalisha kitu kama dist/index.html pamoja na dist/assets/index-a1b2c3.js. Sehemu inayoonekana kama jina la nasibu la faili hubadilika kila maudhui yanapobadilika, ili vivinjari na CDN viweze kuhifadhi faili kwa muda mrefu bila kutoa msimbo wa zamani.

Vigezo vya mazingira katika Vite

Vite inaonyesha kwa msimbo wa kivinjari tu vigezo vyenye majina yanayoanza na VITE_, kwa mfano VITE_PUBLIC_MAP_ID. Hiyo ni hatua ya usalama: chochote kilicho kwenye msimbo wa kivinjari kinaweza kuonwa na wageni, kwa hiyo funguo za siri lazima zisiwe na kiambishi hicho na zibaki kwenye backend. Tazama vigezo vya mazingira na siri.

Maneno muhimu

Dhana potofu za kawaida

• "Vite ni framework." Ni zana ya kujenga. React, Vue au Svelte ndiyo framework; Vite inaiendesha na kuifunga.
• "Programu ya Vite inajumuisha backend." Programu ya kawaida ya Vite ni ya sehemu ya mbele pekee. Hifadhidata, kuingia kwa watumiaji na funguo za siri zinahitaji seva au API pembeni yake.
• "Seva ya maendeleo ni salama kuiweka mtandaoni." Haikusudiwi kwa watu wengi halisi. Daima peleka matokeo ya build ya uzalishaji.
• "Chochote kilicho kwenye .env ni siri." Kwenye programu ya Vite, vigezo vya VITE_ vinaingizwa moja kwa moja kwenye faili ambazo kila mgeni anazipakua.
• "Ukurasa unaorudisha 404 unamaanisha programu imeharibika." Kwenye single-page app, mwenyeji lazima atume kila njia kurudi kwenye index.html. Hiyo ni mpangilio wa mwenyeji; tazama jinsi ya kurekebisha makosa ya 404 baada ya kuchapisha.

Cha kumwomba AI yako ya kujenga

• "Je, programu hii ni ya Vite pekee (sehemu ya mbele), au ina backend pia? Kila sehemu inaendeshwa wapi?"
• "Endesha build ya uzalishaji na urekebishe hitilafu au maonyo yote kabla sijachapisha."
• "Hakikisha hakuna funguo za siri kwenye vigezo vya VITE_ wala mahali popote kwenye msimbo wa sehemu ya mbele."
• "Preview inaonyesha ukurasa mweupe mtupu. Angalia hitilafu za Vite na console ya kivinjari kisha urekebishe chanzo." Tazama jinsi ya kurekebisha ukurasa mweupe mtupu.
• "Hakikisha kupakia upya URL yoyote ya ukurasa kunafanya kazi baada ya kuchapisha, si ukurasa wa nyumbani pekee."

Vite kwenye Mythex

Kila mradi mpya wa Mythex huanzia kwenye Vite isipokuwa uombe Next.js, HTML tuli au backend tofauti. Onyesho la moja kwa moja katika sanduku lako la faragha la majaribio husasishwa AI inapohariri faili, na Publish hujenga programu na kuipeleka mtandaoni. Hakuna mwenyeji wa kuweka mwenyewe. Ukihitaji API au hifadhidata baadaye, omba kwenye chat na Mythex inaweza kuongeza huduma ya backend pamoja na sehemu ya mbele ya Vite (programu za huduma nyingi).

Maswali