Web Application / JS Module Bundler Nedir?

Node.js ve paket yöneticiler ile başlayan süreçte (npm ve yarn), derleyici ve yorumlayıcılardan da bahsetmiş, Gulp ve Grunt gibi task runner’ları kısaca örneklendirmiş ve son olarak Yeoman ile nasıl bir projenin taslağını oluşturabileceğimize bakmıştık. Bu yazıda yeni bir kavramdan bahsederek uygulama geliştirme sürecini bir sonraki adıma geçirmek istiyorum. Konumuz bundler’lar. Öncelikle bu kavramın web teknolojileri bağlamında nasıl bir karşılığı olduğuna bakalım.

Bundler

Webpack, Parcel ve Rollup gibi araçları kullanmasanız veya detaylı bir şekilde araştırmamışsanızda duyduğunuzdan neredeyse eminim. Hemen özetleyeyim. Adı geçen ve büyük ihtimalle önümüzdeki zamanlarda da yeni gelişmeler çerçevesinde farklı isimlerin de dahil olacağı bu uygulamalar birer bundler yani paketleyici. Paket yöneticiler yazısında paketlerden, modül ve bağımlılıklardan (dependency) bahsetmiştim. Bir uygulamanın ayağa kaldırılabilmesi için kullanılan bağımlılıkları lokal ve/veya global olarak (linklendirerek) kurmuştuk. Dependency (bağımlılık) kullanımında node_modules içeriğindeki modül / paket pek çok uygulama tarafından (özellikle global kurulumda) kullanılabilmekteydi. Diğer yandan sürüm yönetimi (node version manager) diye başka bir konuya daha kısaca değinmiştik. Çünkü Node.js ve bağımlılıklar sürümler arasında farklılıklar taşıyabilmekteydi. Haliyle, ortak kullanılan bağımlılıkların güncellenmesi bazı uygulamalarda sorunlar yaşanmasına neden olabilmekteydi. Bundler kullanımında oluşturulan paket kullandığı tüm paketleri / modülleri kendi içinde barındırır. Bunu da tıpkı Grunt ve Gulp gibi task runner’ların yaptığı gibi dosyaları derleyerek, sıkıştırarak, birleştirerek yapar. Elbette işlemler sadece bunlarla da sınırlı değil. Detaylara bundler’larla ilgili yazılarda değineceğim. Şimdilik detayları bundler bağlamında tutacağım.

Web Application Bundler (WAB) adı üzerinde, web uygulamalarının geliştirilmesinde kullandığımız ve bir uygulamanın ihtiyaç duyduğu tüm kaynakları bir arada bulundurulmasını sağlayan bundler’ları tanımlar. JavaScript Module Bundler olarak da karşınıza çıkabilecek bu araçlar (Node.js tabalı olmaları sebebiyle) en temelde JavaScript dosyalarını referans alarak işlemler gerçekleştirirler. Bir bundler “meta-tool” olarak da ifade edilebilir, böylelikle bir geliştiricinin ihtiyaç duyduğu tüm araçlar (eklentiler, alt araçlar vb.) bir arada, uyumlu bir şekilde işler.

Üst düzey diller (higher-level languages) HTML, CSS ve JavaScript’e derlenir,
Değişiklikler anlık olarak yansıtılır (ad-hoc HTTP server / live-reloading)
Proje yayına hazır şekilde düzenlenir, hatalardan arındırılır, sıkıştırılır, derlenir (minify, concatenate, uglify vb.).

En bilinen bundler Webpack olsa da son dönemde Parcel ve Rollup da sıklıkla adından söz ettirmektedir. Elbette, Webpack’in öğrenme eşiğine sahip olmasının rakiplerin ortaya çıkmasına neden olduğunu söyleyebiliriz. Temel olarak modern JavaScript Module Bundler’ın özelliklerini şu şekilde sıralayabiliriz:

Modern bundler’lar JavaScript kodlarını öncelikli, CSS ve diğer kaynakları ardıl olarak değerlendirirler.
Genellikle JavaScript işlemleri merkezinde hareket ederler (Webpack gibi uygulamalar eklentilerle bu işlemleri çeşitlendirilebilmektedir).
Öğrenme eşiğine sahiptirler (Parcel gibi alternatif araçlar süreçleri farklı şekillerde ele alabilmekteler).
Her durum için konfigürasyon gerekliliği vardır (Parcel ve Rollup gibi yeni alternatifler basitliği ön planda tutmaktalar).

Yukarıdaki maddeler az önce de bahsettiğim gibi kısmen Webpack’i referans almaktadır. Örneğin, Parcel.js hızlı ve konfigürasyonsuz web uygulama paketleyicisi olma iddiasındadır ve plugin gerektirmez. Webpack temel özelliklerinin yanı sıra eklentiler ile farklı işlemler de gerçekleştirebilir ve odaklandığı işlem JavaScript uygulamaları için statik modül paketleyici olmaktır.

JavaScript Module Bundlers

Bundler ifadesini genel olarak web uygulamalarını referans alarak kullanacağım. Bu sebeple, temelde JavaScript’in olduğunun tekrar altını çizmek isterim. Modern JavaScript Module Bundler’lar CommonJS, AMD (Asynchronous Module Definition) ve RequireJS gibi kendine özgü kurallar barındıran (idiosyncratic) çözümler yerine JavaScript ES6 gibi yeni standart formattaki modülleri kullanmaktalar. Elbette bu süreç tarayıcı destekleriyle beraber de şekillenmekte. Total.js framework¹ gibi çözümler de dahili olarak bundler desteği sunmaktalar².

Öne Çıkan JavaScript Module Bundler’lar

Yayınlanacak diğer yazılarda ve örneklerde sıklıkla bahsi geçecek JavaScript module bundler’lardan kısaca bahsetmek gerekirse³;

İlerleyen zaman içerisinde yeni alternatifler ortaya çıktıkça, yaygınlaştıkça (örneğin browserify ve microbundle, brunch, fusebox gibi) listeye dahil etmeye çalışacağım. İlgili bundler’larla ilgili ayrıca yazılar yayınlayacağım için açıklamalar eklemedim. Zaman içerisinde örnek kullanımlara da yer vereceğim. Aşağıda ayrıca önerdiğim diğer yazıları da görebilirsiniz. Ayrıca, What are the best frontend JavaScript module bundlers? başlıklı yazıda farklı JavaScript module bundler’ların karşılaştırmasını, olumlu ve olumsuz yönlerini görebilirsiniz.