Parcel ile sancısız bundler yönetimi

3 min readMar 22, 2020

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 modül ve bağımlılıklarını paketleyen bir araçtır.

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.

npm i -g parcel-bundler

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

Örnek package.json:

package.json

ve Örnek index.js şu şekilde:

react ve react-domkütüphanesini import eden ve scss barındıran index.js

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.

npm run dev

localhost:1234 adresine giderek uygulamaya erişebilirsiniz.

Parcel ile Import Yönetimi

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

import validator from "../../utils/validator"  // yerineimport validator from "~utils/validator // kullanabilirsiniz

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:

...
  "browserslist": [
    "last 5 firefox versions",
    "last 5 Chrome versions",
    "last 2 edge versions",
    "not dead"
  ]

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.

parcel-plugin-bundle-visualiser adlı eklentinin oluşturduğu rapordan bir görsel.

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/