Laravel Vite Nedir?

Laravel Vite, Laravel uygulamalarında modern JavaScript ve CSS derleme süreçlerini basit ve verimli bir şekilde yönetmek için kullanılan bir araçtır. Vite, hızlı bir geliştirme deneyimi sunarak, anlık güncellemeler ve daha hızlı derleme süreleri sağlar.

Temel Özellikleri:

Hızlı Geliştirme: Vite, modül tabanlı geliştirme ile anlık güncellemeler sunar.
ESM Desteği: Modern JavaScript özelliklerini destekler.
Hafif ve Minimal: Proje yapılandırması oldukça basittir.

Ne İçin Kullanılır?

Laravel Vite, özellikle şu amaçlar için kullanılır:

Ön Yüz Geliştirme: React, Vue veya diğer JavaScript çerçeveleriyle entegrasyon sağlar.
CSS İşleme: SASS, LESS gibi ön işleyicilerle CSS derlemeyi kolaylaştırır.
Performans İyileştirmesi: Daha hızlı yükleme süreleri ve geliştirme döngüleri sunar.

Nasıl Kullanılır?

Laravel Vite yeni sürümlerde otomatik olarak kurulu bir şekilde gelmektedir ancak gelmediyse veya eski sürümleri kullanıyorsanız aşağıdaki kurulum adımlarını takip edebilirsiniz.

1. Kurulum

Laravel projenizde Vite'i kullanmak için öncelikle gerekli paketleri yüklemeniz gerekir. Aşağıdaki komutları terminalde çalıştırarak başlayabilirsiniz:

composer require laravel/vite-plugin
npm install --save-dev vite

2. Yapılandırma

vite.config.js dosyasını oluşturun ve aşağıdaki gibi yapılandırın:

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/js/app.js', 'resources/css/app.css'],
            refresh: true,
        }),
    ],
});

3. CSS ve JavaScript Dosyalarını Hazırlama

resources/js/app.js ve resources/css/app.css dosyalarını oluşturun veya mevcut dosyalarınızı bu dizine yerleştirin. Örneğin:

resources/js/app.js:
```
console.log('Hello, Laravel Vite!');
```
resources/css/app.css:
```
body {
    background-color: #f0f0f0;
}
```

4. Blade Şablonlarına Vite'i Entegre Etme

Laravel Blade şablonlarınızda Vite'i kullanmak için @vite direktifini ekleyin. Örneğin, resources/views/welcome.blade.php dosyanıza şu şekilde ekleyebilirsiniz:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel Vite</title>
    @vite('resources/css/app.css')
</head>
<body>
    <h1>Laravel Vite ile Hoş Geldiniz!</h1>
    @vite('resources/js/app.js')
</body>
</html>

5. Geliştirme Sunucusunu Başlatma

Geliştirme sunucusunu başlatmak için terminalde şu komutu çalıştırın:

npm run dev

Bu komut, Vite'in geliştirme sunucusunu başlatır ve dosyalarınızda yaptığınız değişiklikleri anlık olarak yansıtır.

6. Üretim İçin Derleme

Projenizi üretim ortamında dağıtmak için aşağıdaki komutu kullanın:

npm run build

Bu, projenizi optimize eder ve dağıtım için hazır hale getirir.

Özet

Vite, modern JavaScript ve CSS geliştirme süreçlerini kolaylaştırır.
Laravel projelerinde hızlı bir geliştirme deneyimi sağlar.
Yapılandırma ve kullanım oldukça basittir.

15 Eki 2024 Seymen Çayır 85 2 dk okuma süresi

Laravel Vite JavaScript CSS web geliştirme ön yüz geliştirme hızlı derleme