Laravel Mix ile varlık derlemeyi basitleştirmek

Webpack öğrenmeye çalışanların çoğu aynı noktada takılır: yapılandırma dosyası. Loader’lar, plugin’ler, resolve kuralları… Her şey ayarlanabilir ama bu esnekliğin bedeli, her yeni proje için saatler harcanan bir webpack.config.js olabiliyor. Laravel Mix bu karmaşıklığı görünmez kılmak için var.

Laravel Mix, Webpack üzerine kurulu, fluent bir API sağlayan bir araç. Jeffrey Way tarafından Laravel ekosistemi için geliştirildi ama Laravel bağımlılığı yok; isteyen her Node.js projesinde kullanabilir. 2016’da Laravel 5.4 ile birlikte varsayılan varlık derleme aracı oldu.

Kurulum

Laravel 5.4 ile gelen package.json dosyasında Mix zaten mevcut. Gerekli paketleri yüklemek için:

npm install

Bu kadar. Webpack bağımlılıkları dahil her şey geliyor.

webpack.mix.js

Yapılandırma webpack.mix.js dosyasında yapılıyor. En basit hali:

const mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

Bu iki satır şunları yapıyor: app.js dosyasını Webpack ile derleyip public/js/app.js olarak çıkarıyor, app.scss dosyasını Sass (SCSS) derleyicisiyle işleyip public/css/app.css olarak üretiyor. Ayrıca CSS ve JavaScript için otomatik olarak vendor prefix ekleniyor.

Geliştirme ve üretim modu

package.json içinde hazır komutlar geliyor:

npm run dev      # Geliştirme için derle (kaynak haritaları dahil)
npm run watch    # Dosya değişikliklerini izle ve otomatik derle
npm run production  # Küçültülmüş, üretim için derle

npm run production ile çıktı dosyaları minify ediliyor ve bir hash ekleniyor. Cache busting’i Mix kendi hallediyor; derlenen dosyanın adına otomatik sürüm eki ekliyor.

npm run watch geliştirme döngüsünde çok kullanışlı. Bir SCSS dosyasını kaydettiğinizde Mix hemen yeniden derliyor. Webpack’i her değişiklikte elle tetikleme zahmetinden kurtarıyor.

Versiyon ekleme

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .version();

Blade şablonunda da mix() yardımcısıyla doğru URL’i almak yeterli:

<script src="{{ mix('js/app.js') }}"></script>
<link rel="stylesheet" href="{{ mix('css/app.css') }}">

Böylece tarayıcı her dağıtımda güncel dosyayı çekiyor; eski önbellek sorunu ortadan kalkıyor.

mix() yardımcısı arka planda public/mix-manifest.json dosyasına bakıyor. Bu dosya her derlemede güncelleniyor ve hangi dosyanın hangi hash’li sürümüne karşılık geldiğini tutuyor. Yani Blade şablonunda her zaman mix('js/app.js') yazıyorsunuz, gerçek URL’i Mix hallediyor.

Vue tek dosya bileşenleri

.vue uzantılı Vue bileşenlerini derlemek için ek yapılandırma gerekmez; Mix bunu kutudan çıktığı gibi destekliyor:

mix.js('resources/assets/js/app.js', 'public/js');
// app.js içinde .vue bileşenleri import edilebilir

Vue loader kurulumu, Babel transpiling, kaynak haritaları — hepsi arka planda halloluyor.

Bu Mix’in gerçekten parladığı yer. Webpack ile .vue dosyası derlemek için vue-loader, vue-template-compiler ve Babel yapılandırması gerekirdi. Mix tüm bunları tek satıra indirdi. Yeni bir projede Vue kullanmaya karar verdiğimde ekstra yapılandırma yapmak zorunda kalmadım.

Birden fazla çıktı dosyası

Mix tek bir giriş dosyasıyla sınırlı değil. Farklı sayfalar için farklı JavaScript paketleri oluşturabilirsiniz:

mix.js('resources/assets/js/app.js', 'public/js')
   .js('resources/assets/js/admin.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css')
   .sass('resources/assets/sass/admin.scss', 'public/css');

Admin paneli ve genel kullanıcı arayüzünün JavaScript’ini ayırmak, kullanıcıların ihtiyaç duymadıkları admin kodunu indirmemesini sağlıyor. Bu bölme kararını Mix kolay kılıyor; ayrı Webpack konfigürasyonları yazmak gerekmedi.

Browsersync

Geliştirme sırasında tarayıcıyı otomatik yenilemek için:

mix.browserSync('myapp.test');

Bu, dosya değişikliğinde tarayıcıyı otomatik yeniliyor. Laravel Homestead ile birlikte kullanınca geliştirme döngüsü gerçekten hızlanıyor.

Webpack ile doğrudan karşılaştırma

Mix her şeyi soyutladığı için nadiren webpack.config.js açmak gerekiyor. Ama ihtiyaç duyulan durumlarda mix.webpackConfig({}) ile Webpack yapılandırmasına müdahale etmek mümkün. Tam kontrol istendiğinde bu kapı açık.

Bir projede “sadece SCSS derle ve JS’i bundle et” ihtiyacının ötesine geçmedim. Mix bu senaryo için fazlasıyla yeterli. Zamanımın Webpack belgelerini okumak yerine asıl işe harcandığı her projeye değer katıyor.