Transpilasyon: nedir, süreci ve kod dönüştürme araçları

Transpilasyon nedir?

Transpilasyon (kaynaktan-kaynağa derleme), bir programı bir programlama dilinden diğerine çevirirken aynı soyutlama seviyesini koruma sürecidir. Bir transpilatör, A dilindeki kaynak kodu alır ve hedef ortamda çalıştırılabilen B dilinde eşdeğer kod üretir. Tipik örnekler: TypeScript'ten JavaScript'e, SASS'tan CSS'ye, Haxe'den birden çok hedef dile.

Transpilasyon derlemeden farklıdır çünkü çıktı kodu yüksek seviyede kalır ve insanlar tarafından okunabilir (amaçlanmamış olsa da). Bir derleyici (GCC, LLVM, javac) kodu makine koduna veya bayt koduna çevirir — okunamaz bir biçim. Bir transpilatör, daha sonra derlenebilecek veya küçültülebilecek kod üretir.

Transpilasyon neden gereklidir. Ana neden uyumluluktur. Geliştiriciler modern dilleri (türlerle TypeScript, null safety ile Kotlin) kullanmak ister, ancak hedef platform yalnızca JavaScript veya Java'yı destekler. Transpilasyon, modern bir dilde yazarken hedef ortam için anlaşılır kod dağıtmayı sağlar.

Popüler Transpilatörler

Transpilasyon vs derleme: temel farklar

Soyutlama seviyesi ana farktır. Bir transpilatör, aynı seviyedeki diller arasında (yüksek seviye → yüksek seviye) kod çevirir. Bir derleyici, yüksek seviyeden düşük seviyeye (makine kodu, bayt kodu) çevirir. LLVM IR bir ara temsil olsa da yine de orijinal C++ veya Rust'tan daha düşük seviyededir.

Sonucun okunabilirliği ikinci farktır. Transpilasyonun sonucu (TypeScript'ten JavaScript) okunabilir ve tarayıcıda hata ayıklanabilir. Derlemenin sonucu (C++'tan makine kodu) okumak için tasarlanmamıştır — analizi bir sökücü gerektirir. Kaynak haritaları, transpile edilmiş kodu orijinal kaynağa bağlayarak hata ayıklamaya yardımcı olur.

CI/CD bağlamında transpilasyon

CI/CD boru hatlarında, transpilasyon derleme aşamasında gerçekleştirilir. TypeScript projeleri için tsc veya Babel bir Docker konteynerinde çalışır, JavaScript ve kaynak haritaları oluşturur, ardından küçültülür ve bir sunucuya veya uygulama mağazasına dağıtılır. Transpilasyon sonuçlarının önbelleğe alınmasını yapılandırmak önemlidir — tsc --incremental çalıştırmalar arasında bağımlılık grafiğini kaydederek derleme süresini %30–50 oranında azaltır.

Mobil projeler (React Native) için Metro Bundler aracılığıyla transpilasyon, her yayında CI sunucusunda çalışır. Önbellek dizinleri (tmp/metro-cache) ve --workers aracılığıyla paralel derlemeler süreci hızlandırır. GitHub Actions ve GitLab CI, çalıştırmalar arasında node_modules ve .cache dizinlerinin önbelleğe alınmasını destekler; bu, boru hattı süresini azaltmak için kritiktir.

Yürütme hızı da farklılık gösterir. Makine koduna derleme maksimum performans sağlar. Transpilasyon, soyutlama seviyesinin ek yükünü korur: TypeScript'ten JavaScript, normal JavaScript ile aynı hızda çalışır. Optimizasyonlar (TypeScript —strict) analiz aşamasında çalışır, çalışma zamanında değil.

Popüler Transpilasyon Senaryoları

Senaryo 1: TypeScript → JavaScript — en yaygın senaryo. Geliştirici türlerle TypeScript yazar, tsc derleyicisi veya Babel tür ek açıklamalarını kaldırır ve saf JavaScript oluşturur. Tüm Angular projeleri ve çoğu React projesi (2026) TypeScript transpilasyonu kullanır. State of JS 2025'e göre, ankete katılan geliştiricilerin %79'u ana projelerinde TypeScript kullanmaktadır.

Senaryo 2: Kotlin → JavaScript — full-stack geliştirme için Kotlin/JS'de kullanılır. Kotlin kodu, IR (Intermediate Representation) ile Kotlin Derleyicisi aracılığıyla JavaScript'e derlenir. Kotlin/JS, harici JS kütüphaneleriyle entegrasyon için TypeScript tür bildirimlerini (.d.ts) destekler. JetBrains, web arayüzleri için kendi ürünlerinde Kotlin/JS kullanır.

Senaryo 3: SASS/SCSS → CSS — CSS ön işlemcilerinin transpilasyonu. Dart Sass (önerilen uygulama) .scss dosyasını .css'ye transpile eder, mixin'leri, değişkenleri, iç içe kuralları ve işlevleri genişletir. Bu derleme değildir (CSS yine CSS'dir), sözdizimsel genişletme ile transpilasyondur.

Karşılaştırma: Transpilasyon vs Derleme vs Yorumlama

Babel: modern JavaScript transpilasyonu

Babel en popüler JavaScript transpilatörüdür ve ES6+/ESNext kodunu ES5 uyumlu JavaScript'e dönüştürür. Babel, bir eklenti ve ön ayar sistemi aracılığıyla çalışır: her eklenti bir dönüşümden sorumludur (ok fonksiyonları, async/await, optional chaining). @babel/preset-env, hedef tarayıcılara (browserslist) göre gerekli eklentileri otomatik olarak belirler.

Babel mimarisi üç aşamadan oluşur: ayrıştırma → dönüştürme → oluşturma. Ayrıştırıcı (Babylon/@babel/parser) kaynak kodu bir AST'ye (Abstract Syntax Tree) dönüştürür. Dönüştürücüler (eklentiler) AST'yi değiştirir. Oluşturucu (@babel/generator) değiştirilmiş AST'den çıktı kodu üretir.

Örnek: Babel ile transpilasyon

// Orijinal ES6+ kodu
const greet = (name = "World") => {
  return `Hello, ${name}!`;
};

class User {
  constructor(name) {
    this.name = name;
  }
}

const data = { user: { address: { city: "Moscow" } } };
const city = data?.user?.address?.city;

// Babel'den sonra (target: > 0.25%, not dead)
"use strict";

var greet = function (name) {
  if (name === void 0) { name = "World"; }
  return "Hello, " + name + "!";
};

var User = function (name) {
  this.name = name;
};

var data = { user: { address: { city: "Moscow" } } };
var city = data != null
  ? data.user != null
    ? data.user.address != null
      ? data.user.address.city
      : void 0
    : void 0
  : void 0;

Babel şunları dönüştürdü: ok fonksiyonunu bir işlev ifadesine, varsayılan parametreyi (name = “World”) bir void 0 kontrolüne, şablon dizesini birleştirmeye, sınıfı bir kurucu işleve ve optional chaining'i (?.) bir üçlü operatörler zincirine. const, ES5 uyumluluğu için var ile değiştirildi.

TypeScript: tür sistemi ile transpilasyon

TypeScript güçlü bir şekilde türlendirilmiş bir dildir ve JavaScript'e transpile edilir. tsc derleyicisi (TypeScript Compiler) iki görevi yerine getirir: tür denetimi ve transpilasyon (yayma). Anlaşılması önemlidir: tür denetimi ve transpilasyon bağımsız aşamalardır. Tür denetimi olmadan transpilasyon (--noEmitOnError false) veya kod oluşturmadan tür denetimi (--noEmit true) çalıştırabilirsiniz.

TypeScript transpilasyonu tüm tür ek açıklamalarını, arayüzleri, tür takma adlarını ve genel parametreleri kaldırır — bunlar JavaScript'te bulunmaz. Enum'lar nesnelere, dekoratörler işlev çağrılarına, async/await oluşturuculara (target ES2017'nin altındaysa) dönüştürülür. tsconfig.json, target (JavaScript sürümü), module (modül sistemi), strict (tür denetimi titizliği) ve outDir (çıktı klasörü) öğelerini kontrol eder.

Transpilasyon için TypeScript Yapılandırması

{
  "compilerOptions": {
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2015", "dom"],
    "strict": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "esModuleInterop": true,
    "sourceMap": true,
    "declaration": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

target: “es2015”, tsc'ye ES6 sözdizimi (ok fonksiyonları, sınıflar, let/const) ile JavaScript oluşturmasını söyler. module: “esnext”, Webpack'te daha sonraki Tree Shaking için ES modüllerini (import/export) korur. strict: true tüm tür denetimlerini (strictNullChecks, noImplicitAny, strictFunctionTypes) etkinleştirir. declaration: true, kitaplığın TypeScript tüketicileri için .d.ts dosyaları oluşturur.

Mobil geliştirmede transpilasyon

React Native, JavaScript/TypeScript'i JavaScriptCore (iOS) veya Hermes (Android) tarafından yürütülebilir koda transpile etmek için Babel ve Metro'yu kullanır. Babel eklentileri JSX dönüşümü, Flow/TypeScript ek açıklamaları ve React Native'e özgü optimizasyonlar ekler. Metro Bundler ayrıca modülleri paketler ve geliştirme için Hot Module Replacement gerçekleştirir.

Flutter, Dart transpilasyonunu kullanır. Flutter Web için dart2js, Dart'ı optimize edilmiş JavaScript'e transpile eder. Flutter Mobile için dart2native, Dart'ı yerel ARM koduna derler. Flutter ayrıca geliştirme için Dart DevCompiler'ı (dartdevc) destekler — Dart'ı JavaScript'e daha hızlı transpile eder ancak daha az optimizasyonla.

Örnek: React Native için Babel Yapılandırması

// babel.config.js — React Native transpilasyonu
module.exports = {
  presets: [
    ["module:metro-react-native-babel-preset"],
  ],
  plugins: [
    ["module-resolver", {
      root: ["."],
      alias: {
        "@": "./src",
        "@components": "./src/components",
      },
    }],
    "react-native-reanimated/plugin",
  ],
  env: {
    production: {
      plugins: ["transform-remove-console"],
    },
  },
};

metro-react-native-babel-preset, React Native için gerekli tüm eklentileri içerir: JSX, Flow/TypeScript, Metro modül sistemi, async/await, sınıf özellikleri ve dekoratörler. module-resolver eklentisi, kısa içe aktarmalar için takma adlar ekler (@/components/Button yerine ../../components/Button). Üretim modunda, transform-remove-console koddaki tüm console.log'ları kaldırır.