Транспиляция: что это, процесс и инструменты преобразования кода

Что такое транспиляция?

Транспиляция (source-to-source compilation) — процесс перевода программы с одного языка программирования на другой, сохраняющий уровень абстракции. Транспилятор принимает исходный код на языке А и генерирует эквивалентный код на языке Б, который может быть выполнен в целевой среде. Типичные примеры: 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 из кода.