Babel & Watch Kullanımı: ES6+ ES5 Çevirici

Bir süredir yoğunluktan dolayı bir şeyler yazamıyordum. Bugün biraz da vakit bulmuşken ve aklıma da gelmişken Babel / Watch ile alakalı birkaç detay yazmak istedim.

Babel nedir?

Babel özellikle de EcmaScript6+ (bir başka deyimle ES 2015 ve daha güncel spesifikasyonlar) kurallarıyla ile yazılmış kodlarınızı EcmaScript5'e çevirebilen bir pakettir.

Minik not: Bu projede Babel’ın yanı sıra, Watch paketini de kuracağım. Babel’ın ve Webpack’in kendi watch özellikleri olmasının yanı sıra, benim Watch paketini de özel sebeplerle kurmam gerekiyordu, yazının devamında buna da değineceğim.

Neden Babel’e İhtiyaç Duyarız? Neden ES5'e Kodlarımızı Çevirmeliyiz?

Eğer ki kullanıcılarınızın hala Internet Explorer kullandığını biliyorsanız, bu konuda biraz da mecbursunuz. Neden mi? Çünkü developerların nefret ettiği Internet Explorer kendini inatla güncellemeyerek, ES5'ten sonraki spesifikasyonları kendisine entegre etmedi. Bu nedenle de kodlarımızı hala ES5'e çevirmek zorunda kalıyoruz. Güzel bir haber vermek gerekirse de, çok yakında Internet Explorer’un fişi Microsoft tarafından çekilecek. Muhtemelen bu birçok developer için muhteşem bir haber.

Yazının Çıkış Noktası: İşlerimin bir kısmını hala Internet Explorer Kullanıcıları Kullanıyor!

Bu durumda da kodları ES5'e çevirmem ya da ES5 ile kod yazmam gerekiyordu. Ancak, bu durumdan pek de memnun olmadığım için ve de eski projelerde de ES6+nimetlerinden faydalanabilmek için böyle bir adım atmam gerekti. Aslında webpack ile de bu ihtiyaca çözüm bulabilirdim ancak çalıştığım projelerde webpack kullanımı sorunlara sebep oldu. Ben de sadece Babel paketini projeye kurarak, daha güzel günlere yelken açabildim.

Güncel Frameworkler’de Zaten Bu İhtiyaç Yok!

Başlıktaki ifade aklınıza geldiyse, evet kesinlike haklısınız. Vue.js’ten emin olmakla birlikte Angular ve React gibi frameworklerin de kendiliğinden webpack, Babel gibi paketlerini kurduğunu biliyoruz. Bu nedenle de güncel işlerde genellikle Babel gibi kod çevirici paketlere ihtiyaç duymuyoruz.

Haydi Ellerimizi Biraz Kirletelim: Kod Yazmaya Başlayalım!

Gelelim bu güzel nimetten faydalanmaya. Öncelikle bir klasör oluşturuyoruz ve terminalde şu ulvi komutu yazıyoruz:

npm init

Böylelikle projemizde package.json dosyasını oluşturmaya başlıyoruz.

Ardından da bolca enter’a basarak ilerliyoruz. (Her soruya enter ile cevap verebilirsiniz.)

Evet, artık package.json dosyamız oluştu ve projemize Babel’ı kurmaya başlayabiliriz.

npm i babel-cli babel-preset-env watch — save-dev

Bu komutla beraber 3 tane paketi de projemize eklemiş oluyoruz. Projenin canlısında bu paketlere ihtiyaç duymayacağımız için, sadece development sürecinde bu paketler kullanılsın diye de — save-dev komutunu en sona ekledik.

Şimdi Babel’i kurduğumuza göre, Babel için gerekli ayarlamaları yapmaya başlayalım.

Öncelikle .babelrc isminde projemizin ana dizininde bir dosya oluşturarak içerisine de şunları yazıyoruz.

{
“presets”: [“env”]
}

Ve burada babel-preset-env paketini kullanmış oluyoruz.

development-environment Klasörü

Projemizin ana dizininde bu isimde bir klasör oluşturuyoruz. Bunun benim tercihim olduğunu belirtmem gerekiyor, çünkü ben sadece bazı dosyaların Babel ile çevirilmesini ve diğer sabit dosyaların da aklımızı karıştırmamasını istiyorum. Genellikle kullanım şekli src klasöründe geliştirmeler yapılıyor, Babel çıktıları ise dist klasöründe toplanıyor. Ben ise development-environment klasöründe geliştirmeleri yapacağım, ardından çıktıların src klasörüne gitmesini isteyeceğim. Src klasöründe de değişiklik oldukça (Babel çıktıları bu klasöre geleceği için sürekli olarak bu klasörü de izleyip burada yeni oluşan ya da güncellenen dosyaları başka bir klasöre taşıyacağım) bir başka klasöre bu dosyaların gönderilmesini sağlayacağım. Bunun sebebi ise, projede sadece 1 tane JS ve 1 tane de HTML dosyası üzerinde geliştirmeleri yapıyoruz. Diğerleri ise neredeyse hiç değiştirilmeyen hazır paket dosyalarından oluşuyor. Evet, farkındayım biraz kafanızı karıştırmış olabilirim :)

Watch Paketinin Kullanım Amacı

Yazının en başında söylediğim watch paketi konusuna ise burada kısaca değinebilirim. Şu anda birçok projemizde github projelerinde geliştirmeler yapıyoruz ve geliştirme yaptığımız projelerde değişiklik oldukça başka bir klasöre bu dosyaları gönderiyoruz. Yani dosyaları 2 kez taşımak gerekiyor. Aslında best practise olmayabilir bu durum ancak kullandığım proje yapıları için en verimli olanın bu olduğunu düşündüm ve böyle bir yapı ile yola devam etmek istedim.

Package.json Dosyamızı Değiştirelim

Sıra geldi package.json dosyamızı güncellemeye. Tek yapacağımız bir script ekleyerek, projeyi ayağa kaldırmak ve tüm değişikliklerimizi anlık olarak istediğimiz klasöre aktarmak.

Package.json dosyamızdaki scripts property’si içerisine watch komutunu şu şekilde ekliyoruz:

“watch”: “watch ‘babel development-environment -d src’ development-environment/ & watch ‘cp -R src/ \”$(<.final.path)\”’ src/”

Burada ne yaptık?

Öncelikle watch ‘babel development-environment -d src’ development-environment/ burada development-environment/ klasörünü izliyoruz, eğer bir değişiklik varsa babel’ın babel development-environment -d src’ komutunu çağırıyoruz ve çıktılarımızı da src klasörüne gönderiyoruz.

Ardından da Babel’ın ürettiği yeni dosyalarımızı da .final.path dosyamızda belirteceğimiz yoldaki yeni klasöre gönderiyoruz. Burada sadece dosyaları taşıma olayı gerçekleşiyor. Ekstra bir Babel ve yeni dosya çıktısı olayı söz konusu değil. Bu nedenle de sadece Babel kullanmak istiyorsanız, bu aşama sizin için ekstradır, kullanmasanız da olacaktır.

.final.path Dosyamız

İçerisine bu proje için ben sadece dist yazdım. Ancak gerçek kullanımımda farklı bir klasöre dosyaları götüreceğim için

/Users/mustafacagri/Documents/MyNewProject/Hello-Its-Me/dist

gibi bir şey idi.

Toparlama vakti geldi…

Repoya https://github.com/mustafacagri/babel-watch-vanilla-js-boilerplate adresinden ulaşabilirsiniz. Klasör yapısını gördüğünüzde aslında yapıyı biraz daha iyi anlama şansınız olacaktır diye düşünüyorum. Watch ile bir başka klasöre neden taşıma yaptığımızı da anlayabilirsiniz. Çünkü .final.path içerisinde yer alan klasörümüz, projeyi çalıştıran her kişide farklı bir path’te yer alıyor. Bu nedenle de kolay bir şekilde projeye adapte olabilmeyi amaçlıyoruz. Sadece .final.path dosyasında path’i değiştirip ardından da npm run watch komutu çalıştırıldığında proje ayağa kalkmış oluyor ve de geliştirmelere hızlıca başlanabiliyor. Ancak, reponun şu anki haliyle hiçbir şeyi değiştirmenize gerek yok, sadece npm run watch komutunu terminalde çalıştırmanız yeterli olacaktır.

Umarım çok fazla karışıklığa sebep olmadan, Babel ve Watch paketinin ortak olarak nasıl kullanılabileceğine yönelik bir fikir verebilmişimdir.

Eğer ki aklınıza bir soru takılırsa, lütfen sormaktan çekinmeyin. Ayrıca, bu bu konuda farklı kullanımlarınız varsa da lütfen yorum olarak paylaşın. Çünkü bilgi paylaştıkça çoğalıyor :)