Babel

Q: Babel ile TypeScript derleyicisi arasındaki fark nedir?

İkisi de TypeScript'i JavaScript'e dönüştürebilir. tsc tipleri de kontrol eder; Babel ise onları yalnızca siler, bunu da hızlıca ve her seferinde tek bir dosyada yapar. Pek çok proje kodu hızlı bir araca derletir ve tsc --noEmit komutunu yalnızca kontrol için çalıştırır.

Okunuşu: beybıl

Güncellendi 6 Ekim 20262 dk okuma

Kısaca

Babel, modern JavaScript, JSX ve TypeScript sözdizimini eski tarayıcıların ve ortamların çalıştırabileceği koda çeviren bir JavaScript derleyicisidir.

Babel nedir?

Babel bir transpiler'dır: kaynak kodu aynı düzeydeki başka bir kaynak koda dönüştüren bir araç. JavaScript kodunuzu okur, bir sözdizimi ağacına ayrıştırır, eklentilerin bu ağacı dönüştürmesine izin verir ve yeni kod üretir. 2014'te 6to5 adıyla, geliştiricilerin o zaman yeni olan ES6 sözdizimini yazıp eski tarayıcılarda da çalıştırmasını sağlayan bir araç olarak başladı ve 2015'te Babel adını aldı.

Her dönüşüm bir eklentidir (plugin), preset'ler de pek çoğunu bir araya getirir. @babel/preset-env, > 0.5%, not dead gibi bir Browserslist sorgusuna bakarak yalnızca hedef tarayıcılarınızda eksik olan sözdizimini derler; @babel/preset-react JSX'i fonksiyon çağrılarına dönüştürür; @babel/preset-typescript ise tip tanımlarını siler. Eklentiler hata ayıklama kodunu kaldırmak ya da test kapsamı sayaçları eklemek gibi özel işler de yapabilir; memoization'ı otomatik ekleyen React Compiler da bir Babel eklentisi olarak dağıtılır.

Haziran 2026'da, Babel 7'den sekiz yıl sonra yayımlanan Babel 8 yalnızca ES modülleri olarak dağıtılır, Node.js 22 ya da sonrasını gerektirir ve varsayılan olarak her şeyi ES5'e kadar derlemek yerine Browserslist'in defaults sorgusunu hedefler. Aynı yıllarda Babel'in günlük işlerinin büyük kısmı esbuild, SWC ve Oxc gibi Go ve Rust ile yazılmış daha hızlı araçlara geçti; Next.js ve Vite varsayılan olarak bunları kullanır. Babel ise eklentilerine ihtiyaç duyulan yerlerde yaygın olmaya devam ediyor.

Babel sık sık bir bundler ve bir polyfill ile karıştırılır. webpack gibi bir bundler pek çok dosyayı birkaç dosyada birleştirir ve babel-loader aracılığıyla her dosyada Babel'i çalıştırabilir; Babel'in kendisi ise her seferinde tek bir dosyayı dönüştürür. Babel optional chaining ya da class'lar gibi sözdizimini yeniden yazar, ama Array.prototype.at gibi eksik yerleşik fonksiyonları ekleyemez; bunlar core-js gibi polyfill'lerden gelir ve ayrı bir Babel eklentisi onları gereken yerlere ekleyebilir. Ayrıca TypeScript tiplerini kontrol etmeden siler; bu yüzden projeler tip hatalarını yakalamak için yine de tsc çalıştırır.

Önemli noktalar

Babel, yeni sözdizimini eski sözdizimine çeviren bir JavaScript transpiler'ıdır.
Her dönüşümü bir eklenti yapar; @babel/preset-env gibi preset'ler onları bir araya getirir.
JSX'i de derler ve TypeScript tiplerini, tip kontrolü yapmadan siler.
Babel 8 (2026) yalnızca ESM olarak gelir ve varsayılan olarak modern tarayıcıları hedefler.
Artık pek çok build'i SWC ve esbuild gibi daha hızlı araçlar üstleniyor; Babel, eklentilerine ihtiyaç duyulan yerlerde kalıyor.

Örnek

React ve TypeScript projesi için bir babel.config.jsonjson

{
  "presets": [
    ["@babel/preset-env", { "targets": "> 0.5%, not dead" }],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  "plugins": ["babel-plugin-react-compiler"]
}

Sık sorulan sorular

Babel'e hâlâ ihtiyaç var mı?

Eskisinden daha az. Modern tarayıcılar güncel sözdiziminin neredeyse tamamını destekliyor; yeni projelerin çoğunda TypeScript ve JSX'i SWC, esbuild ve Oxc gibi daha hızlı araçlar işliyor. Babel, React Compiler gibi belirli bir eklentinin gerektiği yerlerde ve eski build kurulumlarında hâlâ kullanılıyor.

Babel ile TypeScript derleyicisi arasındaki fark nedir?

İkisi de TypeScript'i JavaScript'e dönüştürebilir. tsc tipleri de kontrol eder; Babel ise onları yalnızca siler, bunu da hızlıca ve her seferinde tek bir dosyada yapar. Pek çok proje kodu hızlı bir araca derletir ve tsc --noEmit komutunu yalnızca kontrol için çalıştırır.

@babel/preset-env ne işe yarar?

Hedeflediğiniz tarayıcılara ya da Node.js sürümlerine bakar ve yalnızca onların ihtiyaç duyduğu dönüşümleri uygular; böylece modern tarayıcılar için üretilen kod yazdığınıza yakın kalır.

İlgili sayfalar

Kaynaklar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin