Transpilacja: co to jest, proces i narzędzia transformacji kodu

Czym jest transpilacja?

Transpilacja (kompilacja source-to-source) — proces tłumaczenia programu z jednego języka programowania na inny, zachowujący poziom abstrakcji. Transpilator przyjmuje kod źródłowy w języku A i generuje równoważny kod w języku B, który może być wykonany w docelowym środowisku. Typowe przykłady: TypeScript na JavaScript, SASS na CSS, Haxe na kilka języków docelowych.

Transpilacja różni się od kompilacji tym, że kod wyjściowy pozostaje na wysokim poziomie i może być odczytany przez człowieka (choć nie jest do tego przeznaczony). Kompilator (GCC, LLVM, javac) tłumaczy kod na kod maszynowy lub bajtowy — format nieczytelny. Transpilator generuje kod, który może być dodatkowo skompilowany lub zminifikowany.

Po co potrzebna jest transpilacja. Głównym powodem jest zgodność. Deweloperzy chcą używać nowoczesnych języków (TypeScript z typami, Kotlin z null safety), ale docelowa platforma obsługuje tylko JavaScript lub Java. Transpilacja pozwala pisać w nowoczesnym języku, a wdrażać kod zrozumiały dla docelowego środowiska.

Popularne transpilatory

Transpilacja vs kompilacja: kluczowe różnice

Poziom abstrakcji — główna różnica. Transpilator tłumaczy kod między językami tego samego poziomu (wysokopoziomowy → wysokopoziomowy). Kompilator tłumaczy z wysokiego poziomu na niski (kod maszynowy, bajtowy). LLVM IR jest reprezentacją pośrednią, ale wciąż niższego poziomu niż źródłowy C++ czy Rust.

Czytelność wyniku — druga różnica. Wynik transpilacji (JavaScript z TypeScript) jest czytelny i może być debugowany w przeglądarce. Wynik kompilacji (kod maszynowy z C++) nie jest przeznaczony do czytania — jego analiza wymaga dezasemblera. Source maps pomagają debugować transpilowany kod, łącząc go z kodem źródłowym.

Transpilacja w kontekście CI/CD

W pipeline'ach CI/CD transpilacja wykonywana jest na etapie budowania (build stage). Dla projektów TypeScript tsc lub Babel uruchamiane są w kontenerze Docker, generują JavaScript i source maps, które następnie są minifikowane i wdrażane na serwer lub do sklepu z aplikacjami. Ważne jest skonfigurowanie cache'owania wyników transpilacji — tsc --incremental zapisuje graf zależności między uruchomieniami, skracając czas budowania o 30–50%.

Dla projektów mobilnych (React Native) transpilacja przez Metro Bundler wykonywana jest na serwerze CI przy każdej publikacji. Dla przyspieszenia używane są katalogi cache (tmp/metro-cache) i równoległe budowanie przez --workers. GitHub Actions i GitLab CI obsługują cache'owanie node_modules i katalogów .cache między uruchomieniami, co jest krytyczne dla skrócenia czasu pipeline'a.

Szybkość wykonania również się różni. Kompilacja do kodu maszynowego daje maksymalną wydajność. Transpilacja zachowuje narzut poziomu abstrakcji: JavaScript z TypeScript wykonuje się z tą samą prędkością co zwykły JavaScript. Optymalizacje (TypeScript --strict) działają na etapie analizy, a nie na etapie wykonania.

Popularne scenariusze transpilacji

Scenariusz 1: TypeScript → JavaScript — najpopularniejszy scenariusz. Deweloper pisze w TypeScript z typami, kompilator tsc lub Babel usuwa adnotacje typów i generuje czysty JavaScript. Wszystkie projekty Angular i większość projektów React (2026) używa transpilacji TypeScript. Według State of JS 2025, 79% ankietowanych deweloperów używa TypeScript w głównych projektach.

Scenariusz 2: Kotlin → JavaScript — używany w Kotlin/JS do rozwoju Full-Stack. Kod Kotlin kompiluje się do JavaScript przez Kotlin Compiler z IR (Intermediate Representation). Kotlin/JS obsługuje deklaracje typowane TypeScript (.d.ts) do integracji z zewnętrznymi bibliotekami JS. JetBrains używa Kotlin/JS w swoich produktach dla interfejsów webowych.

Scenariusz 3: SASS/SCSS → CSS — transpilacja preprocesorów CSS. Dart Sass (zalecana implementacja) transpiluje .scss na .css, rozwijając miksiny, zmienne, zagnieżdżone reguły i funkcje. To nie jest kompilacja (CSS pozostaje CSS), a transpilacja z rozszerzeniem składniowym.

Porównanie: Transpilacja vs Kompilacja vs Interpretacja

Babel: transpilacja nowoczesnego JavaScript

Babel — najpopularniejszy transpilator JavaScript, przekształcający kod ES6+/ESNext w JavaScript zgodny z ES5. Babel działa poprzez system wtyczek i presetów: każda wtyczka odpowiada za jedną transformację (arrow functions, async/await, optional chaining). @babel/preset-env automatycznie określa niezbędne wtyczki na podstawie docelowych przeglądarek (browserslist).

Architektura Babel składa się z trzech etapów: parsowanie (parsing) → transformacja (transformation) → generacja (generation). Parser (Babylon/@babel/parser) przekształca kod źródłowy w AST (Abstract Syntax Tree). Transformery (wtyczki) modyfikują AST. Generator (@babel/generator) tworzy kod wyjściowy z zmodyfikowanego AST.

Przykład: transpilacja przez Babel

// Kod źródłowy ES6+
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 Babel (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 przekształcił: funkcję strzałkową w function expression, parametr domyślny (name = „World“) w sprawdzenie void 0, template string w konkatenację, klasę w funkcję-konstruktor i optional chaining (?.) w łańcuch operatorów trójargumentowych. const został zastąpiony przez var dla zgodności ze środowiskami ES5.

TypeScript: transpilacja z systemem typów

TypeScript — silnie typowany język, transpilowany do JavaScript. Kompilator tsc (TypeScript Compiler) wykonuje dwa zadania: sprawdzanie typów (type checking) i transpilację (emit). Ważne jest zrozumienie: sprawdzanie typów i transpilacja to niezależne etapy. Można wykonać transpilację bez sprawdzania typów (--noEmitOnError false) lub sprawdzanie bez generowania kodu (--noEmit true).

Transpilacja TypeScript usuwa wszystkie adnotacje typów, interfejsy, aliasy typów i parametry generyczne — w JavaScript ich nie ma. Enum-y przekształcane są w obiekty, dekoratory — w wywołania funkcji, async/await — w generatory (jeśli target jest poniżej ES2017). tsconfig.json zarządza target (wersją JavaScript), module (systemem modułów), strict (stopniem sprawdzania typów) i outDir (folderem wyjściowym).

Konfiguracja TypeScript do transpilacji

{
  "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“ wskazuje tsc generować JavaScript ze składnią ES6 (funkcje strzałkowe, klasy, let/const). module: „esnext“ zachowuje moduły ES (import/export) do późniejszego Tree Shaking w Webpack. strict: true włącza wszystkie sprawdzania typów (strictNullChecks, noImplicitAny, strictFunctionTypes). declaration: true generuje pliki .d.ts dla konsumentów biblioteki w TypeScript.

Transpilacja w rozwoju aplikacji mobilnych

React Native używa Babel i Metro do transpilacji JavaScript/TypeScript w kod wykonywany przez JavaScriptCore (iOS) lub Hermes (Android). Wtyczki Babel dodają transformację JSX, adnotacje Flow/TypeScript i optymalizacje specyficzne dla React Native. Metro Bundler dodatkowo łączy moduły i wykonuje Hot Module Replacement podczas rozwoju.

Flutter używa transpilacji Dart. Dla Flutter Web dart2js transpiluje Dart w zoptymalizowany JavaScript. Dla Flutter Mobile dart2native kompiluje Dart w natywny kod ARM. Flutter obsługuje również Dart DevCompiler (dartdevc) podczas rozwoju — transpiluje Dart w JavaScript szybciej, ale z mniejszą optymalizacją.

Przykład: Konfiguracja Babel dla React Native

// babel.config.js — transpilacja 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 zawiera wszystkie niezbędne wtyczki dla React Native: JSX, Flow/TypeScript, system modułów Metro, async/await, class properties i dekoratory. Wtyczka module-resolver dodaje aliasy dla krótkich importów (@/components/Button zamiast ../../components/Button). W trybie produkcyjnym transform-remove-console usuwa wszystkie console.log z kodu.