Selamlar. Bu yazıda Github üzerinde rastlaştığım Parcel hakkında bilgiler vermek istiyorum. Kendisi bir JavaScript bundler. Bildiğiniz gibi bu işi yapan browserify ve webpack gibi aşmış bundlerlar da bulunmakta. Son yazı yine collapse div hakkındaydı.
JavaScript Bundler Nedir?
Bu konuya yeni arkadaşlar için açıklama getireyim. JavaScript’in artık modüler çalışmaya müsait halde olduğunu biliyorsunuz diye düşünüyorum. Tarayıcıların native desteği de yavaştan gelecek. Ancak bu destek geliyor olsa bile minify gibi birçok işlem konusunda iş yine son kullanıcıya yani geliştiriciye düşüyor. Basitçe: “JavaScript Bundler modüler olarak çalışılan sistemlerdeki dosyaları paketleyip production ortamına sunmaya yardım eden kütüphanedir”. Birden fazla olduğu için X sadece bu iş için vardır demek pek doğru olmuyor.
Neden Parcel?
Benim gibi tonlarca ayarlama ile uğraşmaktan pek hoşlanmıyorsanız tercih sebebidir. Sanırım startı ağustos ayında verilmiş. Bu bağlamda benzerlerine göre eksikleri olabilir ama herhangi bir ayarlamaya gerek duymamakta. Gereksinimleriniz sadece NodeJS olduğu için şanslı bile sayılabilirsiniz.
Parcel Nasıl Kurulur?
Pekala ne nedir, neden seçilmelidir kısmını geçtikten sonra nasıl kurulura gelelim. Parcel şu anda npm ya da yarn üzerinden kurulabiliyor. Ben kurulumu yarn üzerinden gerçekleştirdim. Aşağıdaki komut kurma işleminde size yardımcı olacaktır:
yarn global add parcel-bundler
Unutmadan söyleyeyim. NodeJS 8+ olmazsa parcel çalışmaz.
Parcel ile Projeyi Başlatma
İşin en güzel yanı şu herhangi bir ayar yapmanız gerekmiyor. Elinizde bir adet index.html dosyasının olması yeterli. Projeyi şöyle çalışır hale getirelim:
parcel index.html
Parcel tarafında oluşturma işleminden sonra iki adet JavaScript dosyası oluşturalım:
main.js Dosyası
export default() => {
return 2 + 3;
}
index.js Dosyası
import main from "./main.js"; console.log(main())
Şimdi index.js dosyasını index.html’e ekleyelim:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Parcel Documentation</title>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
Kabaca böyle oldu diyebiliriz. Parcel arkada çalışırken bu eklediğimiz düzenlemeler için kaynaklar otomatik olarak yenileneceği için tekrar tekrar gidip de yenileyeyim derdiniz kalmıyor.
Production İçin Build Etme
Evet canlıda çalışabilmesi adına nasıl build edeceğimize geldik. Elimizde bulunan entry point hangi dosya ise onu adres göstererek aşağıdaki komutu verelim. Örneğin bende index.js:
parcel build index.js -d build/output
Bu işlemi yaparken minify işlemini istemiyorum diyorsanız –no-minify ve cache istemiyorum diyorsanız da –no-cache parametrelerini girebilirsiniz.
Diğer bilgilere ParcelJS resmi sitesinden de ulaşabilirsiniz.