Vite Nedir?

Sunday. March 21, 2021 - 2 mins

Vite Nedir?

Herkese merhaba, bu yazımda Vue topluluğu tarafından geliştirilen bir inşa aracı (build tool) olan Vite projesinden bahsedeceğim.

Vite kısaca; (projelerimin çoğunda kullandığım) webpack, rollup ve parcel gibi, kod geliştirirken yapılan her değişiklikte projenin ihtiyaç duyduğu paket/paketleri oluşturan ve derleyen bir araçtır. Peki halihazırda kullandığımız birçok araç varken neden yeni bir araç daha geliştiriliyor diye soracak olursanız, geliştirici ekibin ana motivasyonunun özellikle büyük ölçekli projelerde ortaya çıkan performans sorunlarına çözüm üretmek olduğunu söyleyebilirim. kaynak: https://vitejs.dev/guide/why.html

Ek olarak Vite vue ile sınırlı kalmayıp, React, Vanilla JS ile de çalıştığını hatırlatmak isterim. (Bu yazıda sadece vue kısmını ele alacağım.)

Vite aracını yeni bir sa resmi sayfaya https://vitejs.dev/guide/#browser-support göz atabilirsiniz.

Vue projemize Vite aracını eklemek

İlk olarak CLI yardımıyla vue için oluşturulan Vite eklentisini devDependency’lerine ekliyoruz:

npm install vite @vitejs/plugin-vue --save-dev

Eğer projenizde vue 2 kullanıyorsanız underfin‘in geliştirmiş olduğu eklentiyi kullanabilirsiniz. Ayrıca vue2 için destek sürecini daha detaylı incelemek isterseniz ilgili issue‘ya da bakabilirsiniz.
```
  npm install vite-plugin-vue2 --save-dev
```
Yazının devamında vue3 örneği ile devam edeceğim.

İşlem tamamlandığında projenizin ana dizinine “vite.config.js” (ya da .ts) adında dosya oluşturuyoruz ve içerisinde projemizin vue projesi olduğunu belirten konfigürasyonu ekliyoruz.

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

Sonrasında, projeyi host edebilmek için bir index sayfasına ihtiyacımız var. Aslında, projenizin root dizinin bir web geliştirme sunucusunun root dizini gibi kullanacağız, bu nedenle projeye bir index.html koymak gerekiyor:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

Burada dikkat etmemiz gereken kısım; script tag’i içerisinde src özelliği vue projenizin başlangıcını yani vue’yu mount ettiğiniz alanı göstermelidir.

Geliştirici ortamını ayağa kaldırmamız için son olarak package.json dosyasına vite komutlarını ekliyoruz.

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },

Şimdi test edebiliriz, önce yeni bir terminal sayfası açıp dev komutunu çalıştırıyoruz.

npm run dev

vite v2.1.2 dev server running at:

  > Local:    http://localhost:3000/
  > Network:  http://192.168.1.148:3000/
  > Network:  http://192.168.1.60:3000/

  ready in 98ms.

Geliştirme ortamımız hazır.

Okuduğunuz için teşekkürler. Hızlı bir başlangıç için umarım yardımcı olmuştur. 🙂

Uğur Özalp

A man traveling the world (not now because I'm staying at home), photographing and encoding

Vite Nedir?

Vite Nedir?

Vue projemize Vite aracını eklemek

Related Posts

Uğur Özalp