Transpilace: co to je, proces a nástroje pro transformaci kódu

Co je transpilace?

Transpilace (source-to-source kompilace) — proces překladu programu z jednoho programovacího jazyka do druhého při zachování úrovně abstrakce. Transpilátor přijímá zdrojový kód v jazyce A a generuje ekvivalentní kód v jazyce B, který může být spuštěn v cílovém prostředí. Typické příklady: TypeScript do JavaScriptu, SASS do CSS, Haxe do několika cílových jazyků.

Transpilace se liší od kompilace tím, že výstupní kód zůstává na vysoké úrovni a může být přečten člověkem (ačkoli k tomu není určen). Kompilátor (GCC, LLVM, javac) překládá kód do strojového kódu nebo bajtkódu — nečitelného formátu. Transpilátor generuje kód, který může být dále kompilován nebo minifikován.

Proč je transpilace potřebná. Hlavním důvodem je kompatibilita. Vývojáři chtějí používat moderní jazyky (TypeScript s typy, Kotlin s null safety), ale cílová platforma podporuje pouze JavaScript nebo Javu. Transpilace umožňuje psát v moderním jazyce a nasazovat kód srozumitelný cílovému prostředí.

Populární transpilátory

Transpilace vs kompilace: klíčové rozdíly

Úroveň abstrakce — hlavní rozdíl. Transpilátor překládá kód mezi jazyky stejné úrovně (vysoká úroveň → vysoká úroveň). Kompilátor překládá z vysoké úrovně na nízkou (strojový kód, bajtkód). LLVM IR je mezilehlá reprezentace, ale stále nižší úrovně než zdrojový C++ nebo Rust.

Čitelnost výsledku — druhý rozdíl. Výsledek transpilace (JavaScript z TypeScriptu) je čitelný a lze jej ladit v prohlížeči. Výsledek kompilace (strojový kód z C++) není určen ke čtení — jeho analýza vyžaduje disassembler. Source maps pomáhají ladit transpilovaný kód propojením s zdrojovým kódem.

Transpilace v kontextu CI/CD

V CI/CD pipeline se transpilace provádí ve fázi sestavení (build stage). U TypeScript projektů se tsc nebo Babel spouští v Docker kontejneru, generují JavaScript a source maps, které se pak minifikují a nasazují na server nebo do obchodu s aplikacemi. Je důležité nastavit cacheování výsledků transpilace — tsc --incremental ukládá graf závislostí mezi spuštěními, čímž zkracuje dobu sestavení o 30–50%.

U mobilních projektů (React Native) se transpilace přes Metro Bundler provádí na CI serveru při každém publikování. Pro urychlení se používají cache adresáře (tmp/metro-cache) a paralelní sestavení přes --workers. GitHub Actions a GitLab CI podporují cacheování node_modules a .cache adresářů mezi spuštěními, což je kritické pro zkrácení doby pipeline.

Rychlost provádění se také liší. Kompilace do strojového kódu poskytuje maximální výkon. Transpilace zachovává režii úrovně abstrakce: JavaScript z TypeScriptu běží stejnou rychlostí jako běžný JavaScript. Optimalizace (TypeScript --strict) fungují ve fázi analýzy, nikoli ve fázi provádění.

Populární scénáře transpilace

Scénář 1: TypeScript → JavaScript — nejmasivnější scénář. Vývojář píše v TypeScriptu s typy, kompilátor tsc nebo Babel odstraňuje typové anotace a generuje čistý JavaScript. Všechny Angular projekty a většina React projektů (2026) používá TypeScript transpilaci. Podle statistik State of JS 2025 používá 79% dotázaných vývojářů TypeScript v hlavních projektech.

Scénář 2: Kotlin → JavaScript — používá se v Kotlin/JS pro Full-Stack vývoj. Kotlin kód se kompiluje do JavaScriptu přes Kotlin Compiler s IR (Intermediate Representation). Kotlin/JS podporuje TypeScript-typované deklarace (.d.ts) pro integraci s externími JS knihovnami. JetBrains používá Kotlin/JS ve svých produktech pro webová rozhraní.

Scénář 3: SASS/SCSS → CSS — transpilace CSS preprocesorů. Dart Sass (doporučená implementace) transpiluje .scss do .css, rozšiřuje mixiny, proměnné, vnořená pravidla a funkce. Toto není kompilace (CSS zůstává CSS), ale transpilace se syntaktickým rozšířením.

Srovnání: Transpilace vs Kompilace vs Interpretace

Babel: transpilace moderního JavaScriptu

Babel — nejrozšířenější JavaScript transpilátor, převádějící ES6+/ESNext kód do ES5-kompatibilního JavaScriptu. Babel pracuje přes systém pluginů a presetů: každý plugin je zodpovědný za jednu transformaci (arrow functions, async/await, optional chaining). @babel/preset-env automaticky určuje potřebné pluginy na základě cílových prohlížečů (browserslist).

Architektura Babelu se skládá ze tří fází: parsování (parsing) → transformace (transformation) → generování (generation). Parser (Babylon/@babel/parser) převádí zdrojový kód do AST (Abstract Syntax Tree). Transformery (pluginy) modifikují AST. Generátor (@babel/generator) vytváří výstupní kód z modifikovaného AST.

Příklad: transpilace přes Babel

// Zdrojový 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;

// Po Babelu (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 převedl: šipkovou funkci na function expression, výchozí parametr (name = „World“) na kontrolu void 0, template string na konkatenaci, třídu na funkci konstruktor a optional chaining (?.) na řetězec ternárních operátorů. const bylo nahrazeno var pro kompatibilitu s ES5 prostředími.

TypeScript: transpilace s typovým systémem

TypeScript — silně typovaný jazyk, transpilovaný do JavaScriptu. Kompilátor tsc (TypeScript Compiler) plní dva úkoly: kontrolu typů (type checking) a transpilaci (emit). Je důležité pochopit: kontrola typů a transpilace jsou nezávislé fáze. Lze provést transpilaci bez kontroly typů (--noEmitOnError false) nebo kontrolu bez generování kódu (--noEmit true).

Transpilace TypeScriptu odstraňuje všechny typové anotace, rozhraní, typové aliasy a generické parametry — v JavaScriptu neexistují. Enumy se převádějí na objekty, dekorátory na volání funkcí, async/await na generátory (pokud je target pod ES2017). tsconfig.json spravuje target (verzi JavaScriptu), module (systém modulů), strict (míru kontroly typů) a outDir (výstupní složku).

Konfigurace TypeScriptu pro transpilaci

{
  "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“ instruuje tsc generovat JavaScript se syntaxí ES6 (šipkové funkce, třídy, let/const). module: „esnext“ zachovává ES moduly (import/export) pro pozdější Tree Shaking v Webpacku. strict: true zapíná všechny kontroly typů (strictNullChecks, noImplicitAny, strictFunctionTypes). declaration: true generuje .d.ts soubory pro TypeScript konzumenty knihovny.

Transpilace v mobilním vývoji

React Native používá Babel a Metro pro transpilaci JavaScriptu/TypeScriptu do kódu spouštěného JavaScriptCore (iOS) nebo Hermes (Android). Babel pluginy přidávají JSX transformaci, Flow/TypeScript anotace a optimalizace specifické pro React Native. Metro Bundler navíc spojuje moduly a provádí Hot Module Replacement pro vývoj.

Flutter používá Dart transpilaci. Pro Flutter Web dart2js transpiluje Dart do optimalizovaného JavaScriptu. Pro Flutter Mobile dart2native kompiluje Dart do nativního ARM kódu. Flutter také podporuje Dart DevCompiler (dartdevc) pro vývoj — transpiluje Dart do JavaScriptu rychleji, ale s menší optimalizací.

Příklad: Konfigurace Babelu pro React Native

// babel.config.js — transpilace React Native
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 obsahuje všechny potřebné pluginy pro React Native: JSX, Flow/TypeScript, systém modulů Metro, async/await, class properties a dekorátory. Plugin module-resolver přidává aliasy pro krátké importy (@/components/Button místo ../../components/Button). V produkčním režimu transform-remove-console odstraňuje všechny console.log z kódu.