Транспилација: шта је то, процес и алати за трансформацију кода

Шта је транспилација?

Транспилација (source-to-source компилација) — процес превођења програма са једног програмског језика на други, уз задржавање нивоа апстракције. Транспилатор прима изворни код на језику А и генерише еквивалентни код на језику Б, који може да се изврши у циљном окружењу. Типични примери: TypeScript у JavaScript, SASS у CSS, Haxe у више циљних језика.

Транспилација се разликује од компилације по томе што излазни код остаје на високом нивоу и може га прочитати човек (иако није намењен за то). Компајлер (GCC, LLVM, javac) преводи код у машински код или бајт-код — нечитак формат. Транспилатор генерише код који може бити додатно компилиран или минификован.

Зашто је потребна транспилација. Главни разлог је компатибилност. Програмери желе да користе модерне језике (TypeScript са типовима, Kotlin са null safety), али циљна платформа подржава само JavaScript или Java. Транспилација омогућава писање на модерном језику, а имплементацију кода разумљивог циљном окружењу.

Популарни транспилатори

Транспилација vs компилација: кључне разлике

Ниво апстракције — главна разлика. Транспилатор преводи код између језика истог нивоа (висок ниво → висок ниво). Компајлер преводи са високог нивоа на ниски (машински код, бајт-код). LLVM IR је посредна репрезентација, али ипак нижег нивоа од изворног C++ или Rust.

Читљивост резултата — друга разлика. Резултат транспилације (JavaScript из TypeScript) је читљив и може се отклонити у прегледачу. Резултат компилације (машински код из C++) није намењен читању — његова анализа захтева дезасемблер. Source maps помажу у отклањању грешака у транспилираном коду, повезујући га са изворним кодом.

Транспилација у контексту CI/CD

У CI/CD пајплајновима транспилација се извршава у фази изградње (build stage). За TypeScript пројекте, tsc или Babel се покрећу у Docker контејнеру, генеришу JavaScript и source maps, који се затим минификују и имплементирају на сервер или у продавницу апликација. Важно је подесити кеширање резултата транспилације — tsc --incremental чува граф зависности између покретања, смањујући време изградње за 30–50%.

За мобилне пројекте (React Native) транспилација преко Metro Bundler-а се извршава на CI серверу при сваком објављивању. За убрзање се користе кеш директоријуми (tmp/metro-cache) и паралелна изградња преко --workers. GitHub Actions и GitLab CI подржавају кеширање node_modules и .cache директоријума између покретања, што је критично за смањење времена пајплајна.

Брзина извршавања се такође разликује. Компилација у машински код даје максималне перформансе. Транспилација задржава overhead нивоа апстракције: JavaScript из TypeScript се извршава истом брзином као обичан JavaScript. Оптимизације (TypeScript --strict) раде у фази анализе, а не у фази извршавања.

Популарни сценарији транспилације

Сценариј 1: TypeScript → JavaScript — најмасовнији сценариј. Програмер пише у TypeScript-у са типовима, компајлер tsc или Babel уклања анотације типова и генерише чисти JavaScript. Сви Angular пројекти и већина React пројеката (2026) користе TypeScript транспилацију. Према статистици State of JS 2025, 79% анкетираних програмера користи TypeScript у главним пројектима.

Сценариј 2: Kotlin → JavaScript — користи се у Kotlin/JS за Full-Stack развој. Kotlin код се компилира у JavaScript преко Kotlin Compiler-а са IR (Intermediate Representation). Kotlin/JS подржава TypeScript-типизиране декларације (.d.ts) за интеграцију са спољним JS библиотекама. JetBrains користи Kotlin/JS у својим производима за веб интерфејсе.

Сценариј 3: SASS/SCSS → CSS — транспилација CSS препроцесора. Dart Sass (препоручена имплементација) транспилира .scss у .css, развијајући миксине, променљиве, угнеждена правила и функције. Ово није компилација (CSS остаје CSS), већ транспилација са синтаксним проширењем.

Поређење: Транспилација vs Компилација vs Интерпретација

Babel: транспилација модерног JavaScript

Babel — најраспрострањенији JavaScript транспилатор, који претвара ES6+/ESNext код у ES5-компатибилни JavaScript. Babel ради преко система додатака и пресета: сваки додатак је одговоран за једну трансформацију (arrow functions, async/await, optional chaining). @babel/preset-env аутоматски одређује потребне додатке на основу циљних прегледача (browserslist).

Архитектура Babel-а се састоји од три фазе: парсирање (parsing) → трансформација (transformation) → генерација (generation). Парсер (Babylon/@babel/parser) претвара изворни код у AST (Abstract Syntax Tree). Трансформери (додаци) мењају AST. Генератор (@babel/generator) креира излазни код из измењеног AST-а.

Пример: транспилација преко Babel-а

// Изворни 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;

// Након 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 је претворио: стреличастy функцију у function expression, подразумевани параметар (name = „World”) у проверу void 0, темплејт стринг у конкатенацију, класу у функцију-конструктор и optional chaining (?.) у ланац тернарних оператора. const је замењен са var ради компатибилности са ES5 окружењима.

TypeScript: транспилација са системом типова

TypeScript — строго типизирани језик који се транспилира у JavaScript. Компајлер tsc (TypeScript Compiler) обавља два задатка: проверу типова (type checking) и транспилацију (emit). Важно је разумети: провера типова и транспилација су независне фазе. Могуће је извршити транспилацију без провере типова (--noEmitOnError false) или проверу без генерисања кода (--noEmit true).

Транспилација TypeScript-а уклања све анотације типова, интерфејсе, type-алиасе и генеричке параметре — у JavaScript-у их нема. Enum-и се претварају у објекте, декоратори — у позиве функција, async/await — у генераторе (ако је target испод ES2017). tsconfig.json управља target (верзијом JavaScript), module (системом модула), strict (степеном провере типова) и outDir (излазним директоријумом).

Конфигурација TypeScript за транспилацију

{
  "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 да генерише JavaScript са ES6 синтаксом (стреличасте функције, класе, let/const). module: „esnext” чува ES модуле (import/export) за накнадно Tree Shaking у Webpack-у. strict: true укључује све провере типова (strictNullChecks, noImplicitAny, strictFunctionTypes). declaration: true генерише .d.ts датотеке за TypeScript потрошаче библиотеке.

Транспилација у мобилном развоју

React Native користи Babel и Metro за транспилацију JavaScript/TypeScript у код који извршава JavaScriptCore (iOS) или Hermes (Android). Babel додаци додају JSX трансформацију, Flow/TypeScript анотације и оптимизације специфичне за React Native. Metro Bundler додатно обједињује модуле и врши Hot Module Replacement за развој.

Flutter користи Dart транспилацију. За Flutter Web, dart2js транспилира Dart у оптимизовани JavaScript. За Flutter Mobile, dart2native компилира Dart у изворни ARM код. Flutter такође подржава Dart DevCompiler (dartdevc) за развој — он транспилира Dart у JavaScript брже, али са мање оптимизације.

Пример: Конфигурација Babel за React Native

// babel.config.js — 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 укључује све потребне додатке за React Native: JSX, Flow/TypeScript, Metro модуларни систем, async/await, class properties и декораторе. Додатак module-resolver додаје алијасе за кратке импорте (@/components/Button уместо ../../components/Button). У продукционом режиму, transform-remove-console уклања све console.log из кода.