Транспіляція: що це, процес та інструменти перетворення коду

Що таке транспіляція?

Транспіляція (source-to-source компіляція) — процес перекладу програми з однієї мови програмування на іншу, що зберігає рівень абстракції. Транспілятор приймає вихідний код мовою A та генерує еквівалентний код мовою B, який може виконуватися в цільовому середовищі. Типові приклади: 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 автоматично визначає необхідні плагіни на основі target-браузерів (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 перетворив: стрілкову функцію в 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). У production-режимі transform-remove-console видаляє всі console.log з коду.