Transpiláció: mi ez, folyamata és a kódátalakító eszközök

Mi a transpiláció?

Transpiláció (source-to-source fordítás) — a program egyik programozási nyelvből a másikba történő fordításának folyamata, megtartva az absztrakció szintjét. A transpilátor bemeneti kódot fogad A nyelven, és egyenértékű kódot generál B nyelven, amely a célkörnyezetben végrehajtható. Tipikus példák: TypeScript JavaScriptbe, SASS CSS-be, Haxe több célnyelvre.

A transpiláció fordítástól abban különbözik, hogy a kimeneti kód magas szinten marad és ember által olvasható (bár nem erre szánták). A fordító (GCC, LLVM, javac) a kódot gépi kódba vagy bájtkódba — olvashatatlan formátumba alakítja. A transpilátor olyan kódot generál, amely tovább fordítható vagy kicsinyíthető.

Miért van szükség transpilációra. A fő ok a kompatibilitás. A fejlesztők modern nyelveket szeretnének használni (TypeScript típusokkal, Kotlin null safety-vel), de a célplatform csak JavaScriptet vagy Java-t támogat. A transpiláció lehetővé teszi a modern nyelven írást és a célkörnyezet számára érthető kód telepítését.

Népszerű transpilátorok

Transpiláció vs fordítás: kulcsfontosságú különbségek

Absztrakció szintje — a fő különbség. A transpilátor kódot fordít azonos szintű nyelvek között (magas szint → magas szint). A fordító magas szintről alacsony szintre (gépi kód, bájtkód) alakít. Az LLVM IR egy köztes reprezentáció, de még mindig alacsonyabb szintű, mint a forrás C++ vagy Rust.

Eredmény olvashatósága — a második különbség. A transpiláció eredménye (JavaScript TypeScriptből) olvasható és debuggolható a böngészőben. A fordítás eredménye (gépi kód C++-ból) nem olvasásra szánt — elemzéséhez disassembler szükséges. A source maps segít a transpilált kód hibakeresésében, összekapcsolva azt a forráskóddal.

Transpiláció CI/CD kontextusban

A CI/CD csővezetékekben a transpiláció az építési szakaszban (build stage) történik. TypeScript projekteknél a tsc vagy Babel Docker konténerben fut, JavaScriptet és source map-eket generál, amelyeket aztán kicsinyítenek és telepítenek a szerverre vagy az alkalmazásboltba. Fontos a transpilációs eredmények gyorsítótárazásának beállítása — a tsc --incremental elmenti a függőségi gráfot a futtatások között, 30–50%-kal csökkentve az építési időt.

Mobil projekteknél (React Native) a transpiláció Metro Bundleren keresztül a CI szerveren történik minden publikáláskor. A gyorsításhoz gyorsítótár könyvtárakat (tmp/metro-cache) és párhuzamos építést használnak --workers segítségével. A GitHub Actions és GitLab CI támogatja a node_modules és .cache könyvtárak gyorsítótárazását a futtatások között, ami kritikus a csővezeték idő csökkentéséhez.

Végrehajtási sebesség is különbözik. A gépi kódba fordítás maximális teljesítményt nyújt. A transpiláció megtartja az absztrakciós szint többletterhelését: a TypeScriptből származó JavaScript ugyanolyan sebességgel fut, mint a hétköznapi JavaScript. Az optimalizálások (TypeScript --strict) az elemzési szakaszban működnek, nem a végrehajtási szakaszban.

Népszerű transpilációs forgatókönyvek

Forgatókönyv 1: TypeScript → JavaScript — a legelterjedtebb forgatókönyv. A fejlesztő TypeScriptben ír típusokkal, a tsc vagy Babel fordító eltávolítja a típusannotációkat és tiszta JavaScriptet generál. Minden Angular projekt és a legtöbb React projekt (2026) TypeScript transpilációt használ. A State of JS 2025 statisztikája szerint a megkérdezett fejlesztők 79%-a használ TypeScriptet fő projektjeiben.

Forgatókönyv 2: Kotlin → JavaScript — Kotlin/JS-ben használják Full-Stack fejlesztéshez. A Kotlin kód a Kotlin Compileren keresztül IR (Intermediate Representation) segítségével JavaScriptbe fordul. A Kotlin/JS támogatja a TypeScript-tipusú deklarációkat (.d.ts) külső JS könyvtárakkal való integrációhoz. A JetBrains Kotlin/JS-t használ termékeiben webes felületekhez.

Forgatókönyv 3: SASS/SCSS → CSS — CSS előfeldolgozók transpilációja. A Dart Sass (ajánlott implementáció) .scss-t .css-be transpilál, kiterjesztve a mixineket, változókat, beágyazott szabályokat és függvényeket. Ez nem fordítás (a CSS CSS marad), hanem transpiláció szintaktikai kiterjesztéssel.

Összehasonlítás: Transpiláció vs Fordítás vs Értelmezés

Babel: modern JavaScript transpilációja

Babel — a legelterjedtebb JavaScript transpilátor, amely ES6+/ESNext kódot ES5-kompatibilis JavaScriptbe alakít. A Babel bővítmények és presetek rendszerén keresztül működik: minden bővítmény egy transzformációért felelős (arrow functions, async/await, optional chaining). A @babel/preset-env automatikusan meghatározza a szükséges bővítményeket a célböngészők (browserslist) alapján.

A Babel architektúrája három szakaszból áll: elemzés (parsing) → transzformáció (transformation) → generálás (generation). Az elemző (Babylon/@babel/parser) a forráskódot AST-vé (Abstract Syntax Tree) alakítja. A transzformátorok (bővítmények) módosítják az AST-t. A generátor (@babel/generator) a módosított AST-ből hozza létre a kimeneti kódot.

Példa: transpiláció Babel segítségével

// Forrás ES6+ kód
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 után (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 átalakította: a nyílfüggvényt function expression-né, az alapértelmezett paramétert (name = „World“) void 0 ellenőrzéssé, a template stringet konkatenációvá, az osztályt konstruktor függvénnyé és az optional chaining-et (?.) ternáris operátorok láncává. A const var-ra cserélődött az ES5 környezetekkel való kompatibilitásért.

TypeScript: transpiláció típusrendszerrel

TypeScript — szigorúan típusos nyelv, amely JavaScriptbe transpilálódik. A tsc fordító (TypeScript Compiler) két feladatot lát el: típusellenőrzés (type checking) és transpiláció (emit). Fontos megérteni: a típusellenőrzés és a transpiláció független szakaszok. Lehet transpilációt végezni típusellenőrzés nélkül (--noEmitOnError false) vagy ellenőrzést kódgenerálás nélkül (--noEmit true).

TypeScript transpiláció eltávolítja az összes típusannotációt, interfészt, típusaliast és generikus paramétert — a JavaScriptben ezek nem léteznek. Az enum-ok objektumokká, a dekorátorok függvényhívásokká, az async/await generátorokká alakulnak (ha a target ES2017 alatt van). A tsconfig.json kezeli a target-et (JavaScript verzió), module-t (modulrendszer), strict-et (típusellenőrzés mértéke) és outDir-t (kimeneti mappa).

TypeScript konfiguráció transpilációhoz

{
  "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“ utasítja a tsc-t, hogy JavaScriptet generáljon ES6 szintaxissal (nyílfüggvények, osztályok, let/const). module: „esnext“ megtartja az ES modulokat (import/export) a későbbi Tree Shaking-hez a Webpackben. strict: true bekapcsolja az összes típusellenőrzést (strictNullChecks, noImplicitAny, strictFunctionTypes). declaration: true .d.ts fájlokat generál a könyvtár TypeScript fogyasztói számára.

Transpiláció a mobilfejlesztésben

React Native Babel-t és Metro-t használ a JavaScript/TypeScript transpilálásához olyan kódba, amelyet a JavaScriptCore (iOS) vagy Hermes (Android) hajt végre. A Babel bővítmények JSX transzformációt, Flow/TypeScript annotációkat és React Native-specifikus optimalizálásokat adnak hozzá. A Metro Bundler emellett egyesíti a modulokat és Hot Module Replacement-et hajt végre fejlesztéshez.

Flutter Dart transpilációt használ. Flutter Web esetén a dart2js Dart-t optimalizált JavaScriptbe transpilál. Flutter Mobile esetén a dart2native Dart-t natív ARM kódba fordítja. A Flutter emellett támogatja a Dart DevCompiler-t (dartdevc) fejlesztéshez — gyorsabban transpilál Dart-t JavaScriptbe, de kevesebb optimalizálással.

Példa: Babel konfiguráció React Native-hoz

// babel.config.js — React Native transpiláció
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 tartalmazza az összes szükséges bővítményt React Native-hoz: JSX, Flow/TypeScript, Metro modulrendszer, async/await, class properties és dekorátorok. A module-resolver bővítmény aliasokat ad a rövid importokhoz (@/components/Button a ../../components/Button helyett). Termelési módban a transform-remove-console eltávolítja az összes console.log-ot a kódból.