Parcel ile sancısız bundler yönetimi

Modern web programlamanın gelişimi bize hız, ölçekleme ve güvenlik sağlarken aynı zamanda web uygulaması yapmanın karmaşıklığını artırdı.

Bu yazıda gittikçe popülerlik kazanan bir Module Bundler olan Parcel’ın özelliklerini ve kullanımı inceleyeceğiz.
Parcel’e geçmeden önce Module Bundler’ın ne olduğundan kısaca bahsedelim.

Module nedir?

Modüller(Modules) tekrar kullanılabilir, belirgin işlevselliği ile kendi kendine yeten, sistemi bütün olarak bozmayan programlardır.

Module Bundling nedir?

Module Bundling birden fazla modülü ve bağımlılıklarını (dependencies) bir dosyada(veya bir grup dosyada) doğru sırada bir araya getiren işlemdir.

Bu modüllerden oluşan birden fazla dosyayı ana html dosyasının içerisinde <script> tag’leriyle çağırmak sayfa yükleme süresini uzatacaktır. İşte bu durumu iyileştirmek için dosyalar bazı işlemlerden geçirilip (sıkıştırma vb.) paketlenir.

Javascript önceden sadece web sayfalarına etkileşim katan betiklerden oluşuyordu. Bundan dolayı Javascript tarihi itibariyle modüler bir yapıya sahip değildi. Son yıllarda Javascript programlarını farklı modüllere ayırmak ve ihtiyaç halinde bunları kullanmak için mekanizmalar oluşturuldu. İşte Webpack ve Parcel gibi kütüphaneler bizim bu ihtiyacımızı karşılıyor.
Günümüzdeki modern module bundler’a uzanan süreci bu yazıdan detaylı okuyabilirsiniz.

Webpack şu anda oldukça güçlü ve popüler ama bildiğiniz gibi Webpack veya diğer paketleyicileri (browserify, gulp vb.) yapılandırmak o kadar kolay değil. Parcel işte burda devreye giriyor ve çok az bir çabayla projenizin bundler ihtiyaçlarını karşılama imkanını size sunuyor.

Parcel ile:

  • Geniş bir yapılandırmaya ihtiyaç duymayacaksınız
  • Webpack, browserify veya rollup’a nazaran daha hızlı bir bundler’a kavuşacaksınız
  • Js, Css veya asset’leriniz için bir loader yapılandırmanıza gerek kalmayacak.
  • Code Splitting özelliği ile bundle boyutunu azaltabilirsiniz.

Aşağıdaki komut ile Parcel’i kuralım.

Babel yapılandırmasını otomatik olarak tanıyan Parcel için aşağıdaki örneği oluşturdum.

Örnek package.json:

ve Örnek index.js şu şekilde:

Gördüğünüz gibi index.js içerisinde React ve react-dom kütüphanelerini kullanmamıza rağmen package.json’a bu paketleri eklemedim çünkü Parcel import edilen kütüphaneleri otomatik olarak yükleyebiliyor.
Aşağıdaki komutla projeyi ayağa kaldırdığınızda Parcel’in react ve react-dom kütüphanelerini kurduğunu ve package.json buna göre değiştiğini göreceksiniz.

Parcel ile Import Yönetimi

Parcel varsayılan olarak src dizinini görüyor bu sayede “~” ifadesi ile importlarınızı kolayca yönetebilirsiniz.

Ayrıca Parcel’de .env dosyası ile ortam değişkenlerini yapılandırabilirsiniz.

Parcel ile Tarayıcı Uyumluluğu

Parcel tarayıcı uyumluluğu için varsayılan olarak browserslist kullanıyor. Hedef tarayıcılarını package.json’a şu şekilde tanımlayabilirsiniz:

Parcel’in Eklentileri

Parcel şimdiden onlarca eklentiye sahip.
Fazladan eklediğim parcel-plugin-bundle-visualiser eklentisi ile bundler boyutunu detaylı bir çıktıyla inceleyebilirsiniz. “npm run build” komutunu çalıştırdıktan sonra dist klasöründeki etkileşimli report.html dosyasına bakabilirsiniz.

Not: Malesef Parcel ile Storybook kütüphanesi şuan çalışmıyor. Storybook’un webpack gerektirmeyen standalone bir çalışması şuan yürütülüyor.

Uygulamanın kaynak kodlarına https://github.com/akursat/parcel-example adresinden erişebilirsiniz.

Kaynaklar:
https://webpack.js.org/
https://parceljs.org/getting_started.html
https://www.netlify.com/blog/2017/11/15/what-build-tools-can-do-for-you/
https://www.preethikasireddy.com/post/javascript-modules-part-2-module-bundling
https://lihautan.com/javascript-modules/

Frontend developer and designer, science fiction enthusiast, practicing minimalism, and stoic in search of flow. Writing about design and code.

Love podcasts or audiobooks? Learn on the go with our new app.