Babel Nasıl Çalışır?
Günlük hayatımızda kullandığımız derleyiciler nasıl çalışıyor?
Yazdığımız EcmaScript 6 standardındaki kodu nasıl ve hangi araç tarafından EcmaScript 5 standartlarına çeviriyor? Evet bunu Babel isimli bir kütüphanenin yaptığını biliyoruzdur.
Fakat Babel yazdığımız kodu alıp neye göre değiştiriyor? Bunu bu kadar hızlı bir şekilde nasıl yapıyor? Hiç merak ettiniz mi?
Babel’ın bir input alıp bunu başka bir koda transform ederken, AST kullanmakta olduğunu biliyoruz. Webpack’te benzer bir yapı ile çalışıyor.
Kullandığımız IDE ve editörlerde bulunan kod düzenleyicilerin büyük bir kısmı AST kullanarak kodu belirli bir formata çevirmekte. Derleyicilerde buna bir örnek. Örneğin hepimizin yakından bildiği ve kullandığı eslint, jsdoc gibi kütüphaneler bu yapıyı kullanıyor. Bu yazıda, Babel’ın arka tarafta nasıl çalıştığını ve bu paketi nasıl özelleştirebileceğimizi anlatıyor olacağım.
JavaScript Yazmak Neden Bu Kadar Karmaşık?
Editörün başına oturup ‘Modern JavaScript’ yazmaya karar verdiğimizde, development ortamımızda hazır bir starter pack kullanmıyorsak, biraz mesai harcamamız gerekiyor.
Peki neden JavaScript yazmak için bu kadar konfigürasyon ile uğraşıyoruz?
JavaScript’in en son büyük sürümü ES6'dır. (ES2015) Yayınlandığı zamandan beri, JavaScript’in yeni sürümlerini veya adı verilen ECMAScript’i yayınlamak için daha “yalın” bir süreç başlattılar.
Bu, standardın nasıl görünmesi gerektiğine karar veren ve sürekli olarak standardın yeni sürümlerini yayınlayan TC39 adlı bir topluluk bulunuyor.
Bu adamlar İllimunati gibi masanın başına oturup nerede savaş çıkaralım, hangi ekonomiyi batıralım gibisinden goy goy yapanlar gibi, JavaScript ile ilgili tüm kararları alıyorlar. 😅
Yeni özellikler standart olarak belirlendikçe, tarayıcılar yeni versiyonlarında bu yeni özellikleri kendilerine katmaya ve desteklemeye başlar. Tarayıcıların birbirlerinden farklı yayın döngüsü ve öncelikleri vardır. Bu nedenle, bazı büyük tarayıcıların ES6'nın yeni özelliklerini desteklediği, bazılarının desteklemediği bir durumdayız her zaman.
Örneğin, Chrome bir özelliği desteklerken, Safari desteklemez. Bunun gibi farklı JavaScript özellikleri için yüzlerce varyasyon olduğunu düşünün.
Tarayıcıların yeni sürümleri piyasaya sürüldüğünde, tüm kullanıcılar makinelerinde en son yazılımı çalıştırmayı umursamadığından dolayı tüm kullanıcılar hemen yazılımını upgrade etmez.
Tüm bunların anlamı ise, ya Babel gibi compiler ile kodumuzu tüm tarayıcıların anlayabileceği ES5'e çevireceğiz ya da ES6 ile gelen özelliklerin hiç birini kullanamayacağız...
Babel Nedir?
Babel, ECMAScript 2015+ kodunu mevcut ve eski tarayıcılarda veya ortamlarda geriye dönük olarak uyumlu bir JavaScript sürümüne dönüştürmek için kullanılan bir araçtır.
Yeni özellikler standartlaştırıldığında, tarayıcılar yavaş yavaş yeni özellikleri benimsemeye başlar. Bu yüzden Babel kullanmak bizler için bir nevi zorunluluk.
Babel için yaptığımız konfigürasyon ise, hangi JavaScript özelliklerini destekleyeceği ve hangi browser’lar için çıktı üreteceğimizden ibaret.
Babel kelimesini Türkçe’ye çevirdiğimizde karşımıza bildiğimiz Babil çıkıyor. Sinemalardan veya oyunlardan Babil Kulesini ve Antik Babil şehrini duymuş olabilirsiniz.
Babil, Mezopotamya’da adını aldığı Babil kenti etrafında MÖ 1894 yılında kurulmuş, Sümer ve Akad topraklarını kapsayan bir imparatorluktur. Babil’in merkezi bugünkü Irak’ın El Hilla kasabası üzerinde yer almaktadır.[1] Babil halkının büyük bir kısmını tarih boyunca çeşitli Sami asıllı halklar oluşturmuştur. Bölgede konuşulmuş en yaygın dil Akadca olmuş olmasına rağmen Sümerce dinsel dil olarak kullanılmıştır. Aramice ise ilerleyen yıllarda bölgenin lingua francası konumuna gelmiştir.[2]
Babel Ne Yapar?
Babel bir JavaScript derleyicisidir. Google, Facebook, Hepsiburada, Netflix ve diğer büyük yüzlerce şirkette kullanılıyor. Hatta büyük şirketleri es geçip, bütün JavaScript ile çalışan modern uygulamaların, arkasında Babel olduğunu söylersek iddialı olmaz sanırım.
Babel sadece ES6 kullanmamızı sağlamakla kalmıyor, aynı zamanda polyfill desteği ile ES7, JSX vb. başka standartlarıda kullanmamıza imkan tanıyor.
Bunlar yeterli değilse, Babel, TC39 (JavaScript’in tasarım ve geliştirmesine liderlik eden teknik komite/grup) ile yakın bir uyum içerisinde çalışmakta ve TC39 topluluğu tarafından dile dahil olup olmayacağı belirlenmemiş özellikleri, JavaScript dilinde kullanmamıza imkan sağlıyor. Harika değil mi?
JavaScript’e özellik dahil etme mi?
Örnek: Bu yazının yazıldığı sırada, decorators özelliği “Stage 2” durumunda bulunuyor. Yani çoğunlukla geliştirmeyi bitirmişler ancak yine de bir takım değişiklik yapılabilir durumda. Eğer komite tarafından onay alırsa yani bu “Stage 4" durumunda oluyor, ve “Stage 4” durumundayken bu özellik JavaScript’in kendisine dahil olacak diyebiliriz.
İlgili bağlantılardan JavaScript’e nasıl bir özellik gönderebileceğiniz hakkında bilgi alabilirsiniz.
Fakat bizim bunu beklememize gerek yok. Bir babel plugin’i ile ben bu özelliği JavaScript ile geliştirdiğim projemde kullanabilirim. (Babel paketlerini incelerken Plugins konusuna değineceğim) Bunun gibi nice başka, JavaScript için proposal(teklif) durumunda bulunan özelliği, Babel sayesinde JavaScript projeme dahil edip o özelliği kullanabilirim.
Biraz fantezi yapacak olursam başka bir dilde gördüğüm bir methodu veya özelliği geliştirip, JavaScript’e eklenmesi için komiteye teklif edebilirim. Babel aracılığı ile de bunu projemde kullanabilirim.
Babel Paketi
npm install --save-dev babel-core babel-cli babel-preset-env babel-plugin-transform-runtime babel-runtime babel-register babel-polyfillBabel kurulumu için yukarıda görmüş olduğunuz gibi bir sürü paket kurmak durumundayız. Peki bu kurduğumuz paketler tam olarak ne iş yapıyor?
İlk önce Babel Parser’ın nasıl çalıştığını ve sonraki süreçlerin nasıl çalıştığını öğreneceğiz. Bu esnada babel içerisindeki paketlerininde ne işe yaradığını öğrenmiş olacağız.
Çalışma Mantığı Nasıl?
1-) Babel, modern olarak yazılmış JavaScript kodumuzu, bir Abstract Syntax Tree (AST) ile ayrıştıran ve tarayıcı tarafından yorumlanabilecek bir versiyonuna yeniden çeviren bir plugin sistemi üzerine kurulmuştur.
Yukarıda bahsettiğim plugin sistemi ile birlikte, Babel hangi kodu hangi koda çevireceğini anlıyor. Bunu yapan kütüphane ise babel/parser (babylon) kütüphanesi.
Babel Parser’ı, Babel AST formatına göre AST üretmektedir.
Bu kütüphane eskiden Babylon olarak adlandırılıyordu. https://github.com/babel/babylon
2-) Daha sonra Babel’in traverser’ı, AST’yi alıyor, araştırıyor ve Babel config’lerinde ve pluginlerinde tanımladığımız kurallara göre AST’yi transform ediyor. Yani istediğim standartlardaki kaynak kodun, AST’sine çeviriyor.
3-) Son olarak, Babel’in generator paketi, bir önceki adımda oluşturulmuş olan AST’yi istediğimiz standartlardaki JavaScript koduna çeviriyor.
babel-core
Babel-core paketi, kodumuzu transpile etmemize yardımcı olan ana babel paketidir.
Peki Transpiler nedir?
Transpiler ifadesi TRANSlate ve comPILER kelimelerinden birleştirilerek oluşturulmuş.Bir dildeki kaynak kodları başka bir dildeki kaynak kodlara çeviren araçlar için kullanılan bir terim diyebiliriz.
Babel-core paketinde ise, JavaScript söz dizimini tarayıcının anlayabileceği eski javascript sürümlerine dönüştüren araç oluyor.
Örneğin let variable= "hepsiburada" kodu 'var variable= "hepsiburada"olarak değiştiriliyor.
Fakat Babel’ı kullanabilmek için bu paket yeterli değildir. Kurduğumuz diğer paketlerinde var olması gerekmektedir. Peki konfigre ettiğimiz paketler hangi işlevi görüyor?
babel-cli
CLI, komut satırı arayüzü anlamına gelmektedir.
Komut satırı arayüzü, terminalden babel komutlarını çalıştırabilmeniz için gereklidir. Bu paket sayesinde, terminalimizden herhangi bir JavaScript dosyasını, babel aracılığı ile transpile edebiliriz.
babel-preset-env
Kodumuzu hedeflediğimiz ortamlara göre dönüştüren bir pakettir. İnce ayarını iyi yaptığımız sürece aynı zamanda bundle boyutumuzuda küçültme ihtimali vardır.
Babel bir JavaScript özelliğini çevirirken o özelliğin plugin dosyasına ihtiyaç duyar. Örneğin arrow functions özelliği için @babel/plugin-transform-arrow-functions isimli plugin’e ihtiyaç duymaktadır.
Plugins yapısı sayesinde, Babel’a kod dönüşümlerini nasıl gerçekleştirebileceği konusunda talimat verebiliyoruz. Tabi her JavaScript özelliği için bunları tek tek tanımlamamıza gerek bulunmuyor.
https://babeljs.io/docs/en/plugins adresinden ilgili plugin’leri inceleyebilirsiniz.
@babel/preset-env paketi arka planda browserslist, compat-table, ve electron-to-chromium gibi paketleri kullanıp, hangi JavaScript pluginlerini kullanacağına karar veriyor.
Plugin ve Presets Farkı Nedir?
plugin: Tek bir JavaScript özelliğini değiştirmek
preset: Birlikte paketlenmiş birkaç plugin paketi olarak düşünebiliriz.
Örnek Preset Paketleri:
- @babel/preset-env
- @babel/preset-flow
- @babel/preset-react
- @babel/preset-typescript
- babel-preset-stage-0
- babel-preset-stage-2
Varsayılan olarak babel-preset-env, ihtiyacınız olan tüm ES6 eklentisini kurar. Ancak bu bundle dosyamızı genellikle şişirir. Bunun yerine istediğimiz tarayıcılar için bundle oluşturabiliriz. Örneğin projemizin root dizininde bulunan, .browserlistrc dosyamıza aşağıdakileri ekleyerek IE’yi desteklemediğimizi söyleyebiliriz:
not ie allveya yalnızca % 0,25 veya daha fazla pazar payına sahip browser’ları desteklediğinizi tanımlayabiliriz:
>0.25%Hatta kullanıcıya daha büyük bir JavaScript yükletmek yerine, ES6 destekleyen modern tarayıcılara direkt ES6 kodunu, eski tarayıcılara ES5'e çevrilmiş kodu yükletebiliriz.
Babel Kurulumu
Babel’ın kurulumuna geçecek olursak ise aslında çok basit ve vaktimizi almayan bir iş. En basit yöntemi ile Babel kurulumunu anlatıyor olacağım.
Babel, Yarn paket yöneticisi aracılığıyla bir paket bağımlılığı olarak kurulabilir.
Projemizin root klasörüne,babel.config.js dosyası yaratıp ilgili kodları ekliyoruz:
Ardından home.js isimli bir dosya oluşturuyorum ve içerisine bir arrow function koyuyorum.
npx babel home.js — out-file home-compiled.jskomutunu çalıştırdığımda ise bu kod çıktısının değiştiğini görmüş olacağım:
Görmüş olduğunuz üzere Babel yukarıda yazmış olduğumuz arrow function kodunu tüm tarayıcıların anlayabileceği şekilde çevirdi.
Tüm dosyalarınızı otomatik olarak çıkartması için ise Webpack benzeri bir araç ile çalışmanız gerekmekte.
Geri Bildirim 📭
Yazı ile ilgili tavsiye, öneri, eleştiri ve düzeltmeleri dikkate alıyorum. Geri bildirim ve iletişim için:
