{"id":13975,"date":"2025-03-02T07:32:27","date_gmt":"2025-03-02T04:32:27","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/vite-eklentileri-tam-rehberi\/"},"modified":"2025-03-02T07:32:27","modified_gmt":"2025-03-02T04:32:27","slug":"vite-eklentileri-tam-rehberi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vite-eklentileri-tam-rehberi\/","title":{"rendered":"Vite Eklentileri Tam Rehberi"},"content":{"rendered":"

<\/p>\n

Vite Eklentileri Tam Rehberi<\/p>\n

Merhaba! Fatih Soysal olarak, bug\u00fcn sizlere Vite eklentileri hakk\u0131nda kapsaml\u0131 bir rehber sunaca\u011f\u0131m. Vite, modern web geli\u015ftirme i\u00e7in olduk\u00e7a h\u0131zl\u0131 ve kullan\u0131\u015fl\u0131 bir ara\u00e7t\u0131r. Ancak, Vite’\u0131n ger\u00e7ek g\u00fcc\u00fc, onu \u00f6zelle\u015ftirmenize ve geli\u015ftirmenize olanak tan\u0131yan eklentileriyle ortaya \u00e7\u0131kar. Bu rehberde, \u00e7e\u015fitli Vite eklentilerini, nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 ve projelerinize nas\u0131l entegre edece\u011finizi detayl\u0131 bir \u015fekilde ele alaca\u011f\u0131z.<\/p>\n

Vite Eklentileri Nedir ve Neden Kullanmal\u0131y\u0131z?<\/h2>\n

Vite eklentileri, Vite’\u0131n temel i\u015flevselli\u011fini geni\u015fletmenize olanak sa\u011flayan k\u00fc\u00e7\u00fck, ba\u011f\u0131ms\u0131z yaz\u0131l\u0131m par\u00e7alar\u0131d\u0131r. \u00d6rne\u011fin, CSS \u00f6n i\u015flemcilerini (Sass, Less, Stylus), TypeScript deste\u011fini, resim optimizasyonunu veya \u00f6zel kod d\u00f6n\u00fc\u015f\u00fcmlerini eklemek i\u00e7in eklentiler kullanabilirsiniz. K\u0131sacas\u0131, Vite eklentileri geli\u015ftirme s\u00fcrecini h\u0131zland\u0131r\u0131r, kod kalitesini iyile\u015ftirir ve projelerinize \u00f6zel \u00f6zellikler eklemenizi sa\u011flar. Bu sayede, daha verimli ve keyifli bir geli\u015ftirme deneyimi elde edersiniz. Ayr\u0131ca, topluma a\u00e7\u0131k kaynak kodlu projeler sayesinde s\u00fcrekli geli\u015fen bir ekosistemden faydalan\u0131rs\u0131n\u0131z.<\/p>\n

Vite Eklenti T\u00fcrleri<\/h2>\n

Vite eklentileri genellikle iki ana kategoriye ayr\u0131l\u0131r: Transform Eklentileri<\/strong> ve Plugin Eklentileri<\/strong>. Transform eklentileri, kodunuzun derleme a\u015famas\u0131nda de\u011fi\u015ftirilmesini sa\u011flar. \u00d6rne\u011fin, Sass kodunu CSS’ye d\u00f6n\u00fc\u015ft\u00fcrmek i\u00e7in bir transform eklentisi kullanabilirsiniz. Plugin eklentileri ise, Vite’\u0131n ya\u015fam d\u00f6ng\u00fcs\u00fcne \u00f6zel fonksiyonlar ekleyerek daha geni\u015f kapsaml\u0131 de\u011fi\u015fiklikler yapman\u0131z\u0131 sa\u011flar. Bu, geli\u015fmi\u015f \u00f6zellikler eklemek veya mevcut i\u015flevleri de\u011fi\u015ftirmek i\u00e7in idealdir.<\/p>\n

Vite Eklenti Kurulumu ve Kullan\u0131m\u0131<\/h2>\n

Bir Vite eklentisi kurmak genellikle npm veya yarn paket y\u00f6neticilerini kullanarak yap\u0131l\u0131r. \u00d6ncelikle, projenizin k\u00f6k dizininde a\u015fa\u011f\u0131daki komutu \u00e7al\u0131\u015ft\u0131r\u0131rs\u0131n\u0131z:<\/p>\n

npm install -D <eklenti_ad\u0131><\/code><\/pre>\n
Ard\u0131ndan,  vite.config.js dosyan\u0131za eklentiyi eklemeniz gerekir.  Bu, genellikle  plugins<\/code> dizisi arac\u0131l\u0131\u011f\u0131yla yap\u0131l\u0131r:<\/p>\n
\/\/ vite.config.js\nimport { defineConfig } from 'vite';\nimport myPlugin from 'my-vite-plugin'; \/\/ Kurdu\u011funuz eklentinin ad\u0131\n\nexport default defineConfig({\n  plugins: [myPlugin()],\n});\n<\/code><\/pre>\n
Bu ad\u0131mlar,  \u00e7o\u011fu Vite eklentisi i\u00e7in ge\u00e7erlidir.  Ancak,  baz\u0131 eklentilerin \u00f6zel kurulum ad\u0131mlar\u0131 veya konfig\u00fcrasyon se\u00e7enekleri olabilir. Bu nedenle,  kullanaca\u011f\u0131n\u0131z eklentinin dok\u00fcmantasyonunu dikkatlice incelemeniz \u00f6nemlidir.<\/p>\n
Pop\u00fcler Vite Eklentileri<\/h2>\n
Pek \u00e7ok faydal\u0131 Vite eklentisi mevcuttur.  \u0130\u015fte birka\u00e7 \u00f6rnek:<\/p>\n