Transpilasiya: nədir, prosesi və kod çevirmə alətləri

Transpilasiya nədir?

Transpilasiya (mənbədən-mənbəyə kompilyasiya) — proqramın bir proqramlaşdırma dilindən digərinə abstraksiya səviyyəsini qoruyaraq tərcümə prosesi. Transpilator A dilində mənbə kodu qəbul edir və hədəf mühitdə icra oluna bilən B dilində ekvivalent kod yaradır. Tipik nümunələr: TypeScript-dən JavaScript-ə, SASS-dan CSS-ə, Haxe-dən bir neçə hədəf dilə.

Transpilasiya kompilyasiyadan fərqlənir ki, çıxış kodu yüksək səviyyədə qalır və insan tərəfindən oxuna bilər (baxmayaraq ki, bunun üçün nəzərdə tutulmayıb). Kompilyator (GCC, LLVM, javac) kodu maşın koduna və ya bayt koduna — oxunmayan formata çevirir. Transpilator əlavə kompilyasiya oluna və ya minifikasiya oluna bilən kod yaradır.

Transpilasiya niyə lazımdır. Əsas səbəb uyğunluqdur. Tərtibatçılar müasir dillərdən (tiplərlə TypeScript, null safety ilə Kotlin) istifadə etmək istəyirlər, lakin hədəf platforma yalnız JavaScript və ya Java-nı dəstəkləyir. Transpilasiya müasir dildə yazmağa, lakin hədəf mühit üçün başa düşülən kodu yerləşdirməyə imkan verir.

Populyar transpilatorlar

Transpilasiya vs kompilyasiya: əsas fərqlər

Abstraksiya səviyyəsi — əsas fərq. Transpilator kodu eyni səviyyəli dillər arasında tərcümə edir (yüksək səviyyəli → yüksək səviyyəli). Kompilyator yüksək səviyyədən aşağı səviyyəyə (maşın kodu, bayt kodu) çevirir. LLVM IR aralıq təmsilçilikdir, lakin yenə də mənbə C++ və ya Rust-dan aşağı səviyyəlidir.

Nəticənin oxunaqlılığı — ikinci fərq. Transpilasiya nəticəsi (TypeScript-dən JavaScript) oxuna bilər və brauzerdə debug edilə bilər. Kompilyasiya nəticəsi (C++-dan maşın kodu) oxumaq üçün nəzərdə tutulmayıb — onun analizi dezasembler tələb edir. Source maps transpilasiya olunmuş kodu mənbə kodu ilə əlaqələndirərək debug etməyə kömək edir.

CI/CD kontekstində transpilasiya

CI/CD pipeline-larında transpilasiya qurma mərhələsində (build stage) icra olunur. TypeScript layihələri üçün tsc və ya Babel Docker konteynerində işə salınır, JavaScript və source maps yaradır, sonra minifikasiya olunur və serverə və ya tətbiq mağazasına yerləşdirilir. Transpilasiya nəticələrinin keşləşdirilməsini konfiqurasiya etmək vacibdir — tsc --incremental işə salmalar arasında asılılıq qrafını saxlayır, qurma vaxtını 30–50% azaldır.

Mobil layihələr (React Native) üçün Metro Bundler vasitəsilə transpilasiya hər nəşrdə CI serverində icra olunur. Sürətləndirmək üçün keş kataloqları (tmp/metro-cache) və --workers vasitəsilə paralel qurma istifadə olunur. GitHub Actions və GitLab CI işə salmalar arasında node_modules və .cache kataloqlarının keşləşdirilməsini dəstəkləyir, bu pipeline vaxtını qısaltmaq üçün kritikdir.

İcra sürəti də fərqlənir. Maşın koduna kompilyasiya maksimum performans verir. Transpilasiya abstraksiya səviyyəsinin overheadini saxlayır: TypeScript-dən JavaScript eyni adi JavaScript sürəti ilə icra olunur. Optimizasiyalar (TypeScript --strict) analiz mərhələsində işləyir, icra mərhələsində deyil.

Populyar transpilasiya ssenariləri

Ssenari 1: TypeScript → JavaScript — ən kütləvi ssenari. Tərtibatçı tiplərlə TypeScript-də yazır, tsc və ya Babel kompilyatoru tip annotasiyalarını silir və təmiz JavaScript yaradır. Bütün Angular layihələri və React layihələrinin əksəriyyəti (2026) TypeScript transpilasiyasından istifadə edir. State of JS 2025 statistikasına görə, sorğuda iştirak edən tərtibatçıların 79%-i əsas layihələrində TypeScript-dən istifadə edir.

Ssenari 2: Kotlin → JavaScript — Full-Stack inkişaf üçün Kotlin/JS-də istifadə olunur. Kotlin kodu Kotlin Compiler vasitəsilə IR (Intermediate Representation) ilə JavaScript-ə kompilyasiya olunur. Kotlin/JS xarici JS kitabxanaları ilə inteqrasiya üçün TypeScript tipli bəyannamələri (.d.ts) dəstəkləyir. JetBrains öz məhsullarında web interfeysləri üçün Kotlin/JS istifadə edir.

Ssenari 3: SASS/SCSS → CSS — CSS preprosessorlarının transpilasiyası. Dart Sass (tövsiyə olunan tətbiq) .scss fayllarını .css-ə transpilə edir, miksinləri, dəyişənləri, iç-içə qaydaları və funksiyaları genişləndirir. Bu kompilyasiya deyil (CSS CSS olaraq qalır), sintaksis genişləndirməsi ilə transpilasiyadır.

Müqayisə: Transpilasiya vs Kompilyasiya vs Interpretasiya

Babel: müasir JavaScript-in transpilasiyası

Babel — ən geniş yayılmış JavaScript transpilatoru, ES6+/ESNext kodunu ES5-uyğun JavaScript-ə çevirir. Babel plagin və preset sistemi vasitəsilə işləyir: hər plagin bir transformasiyaya cavabdehdir (arrow functions, async/await, optional chaining). @babel/preset-env hədəf brauzerlər (browserslist) əsasında lazımi plaginləri avtomatik müəyyən edir.

Babel arxitekturası üç mərhələdən ibarətdir: pars etmə (parsing) → transformasiya (transformation) → generasiya (generation). Parser (Babylon/@babel/parser) mənbə kodunu AST-yə (Abstract Syntax Tree) çevirir. Transformerlər (plaginlər) AST-ni dəyişdirir. Generator (@babel/generator) dəyişdirilmiş AST-dən çıxış kodu yaradır.

Nümunə: Babel vasitəsilə transpilasiya

// Mənbə ES6+ kodu
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-dən sonra (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 çevirdi: arrow funksiyasını function expression-a, standart parametri (name = “World”) void 0 yoxlamasına, template string-i konkatenasiyaya, class-ı funksiya-konstruktora və optional chaining (?.) üçlü operatorlar zəncirinə. const uyğunluq üçün var ilə əvəz olundu ES5 mühitləri.

TypeScript: tip sistemi ilə transpilasiya

TypeScript — ciddi tipli dil, JavaScript-ə transpilə olunur. tsc kompilyatoru (TypeScript Compiler) iki tapşırığı yerinə yetirir: tip yoxlaması (type checking) və transpilasiya (emit). Başa düşmək vacibdir: tip yoxlaması və transpilasiya müstəqil mərhələlərdir. Tip yoxlaması olmadan transpilasiya etmək (--noEmitOnError false) və ya kod generasiyası olmadan yoxlama (--noEmit true) mümkündür.

TypeScript transpilasiyası bütün tip annotasiyalarını, interfeysləri, tip aliaslarını və generic parametrləri silir — JavaScript-də onlar yoxdur. Enum-lar obyektlərə, dekoratorlar funksiya çağırışlarına, async/await generatorlara (əgər target ES2017-dən aşağıdırsa) çevrilir. tsconfig.json target (JavaScript versiyası), module (modul sistemi), strict (tip yoxlama dərəcəsi) və outDir (çıxış qovluğu) idarə edir.

Transpilasiya üçün TypeScript konfiqurasiyası

{
  "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-yə ES6 sintaksisi ilə JavaScript yaratmağı göstərir (arrow funksiyalar, class-lar, let/const). module: “esnext” sonrakı Tree Shaking üçün ES modullarını (import/export) qoruyur Webpack-də. strict: true bütün tip yoxlamalarını aktiv edir (strictNullChecks, noImplicitAny, strictFunctionTypes). declaration: true kitabxananın TypeScript istehlakçıları üçün .d.ts faylları yaradır.

Mobil inkişafda transpilasiya

React Native JavaScript/TypeScript-i JavaScriptCore (iOS) və ya Hermes (Android) tərəfindən icra olunan koda transpilə etmək üçün Babel və Metro-dan istifadə edir. Babel plaginləri JSX transformasiyası, Flow/TypeScript annotasiyaları və React Native-ə xas optimizasiyalar əlavə edir. Metro Bundler əlavə olaraq modulları birləşdirir və inkişaf üçün Hot Module Replacement icra edir.

Flutter Dart transpilasiyasından istifadə edir. Flutter Web üçün dart2js Dart-ı optimallaşdırılmış JavaScript-ə transpilə edir. Flutter Mobile üçün dart2native Dart-ı native ARM koduna kompilyasiya edir. Flutter həmçinin inkişaf üçün Dart DevCompiler (dartdevc) dəstəkləyir — Dart-ı daha sürətli, lakin az optimallaşdırma ilə JavaScript-ə transpilə edir.

Nümunə: React Native üçün Babel konfiqurasiyası

// babel.config.js — React Native transpilasiyası
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 üçün bütün lazımi plaginləri ehtiva edir: JSX, Flow/TypeScript, Metro modul sistemi, async/await, class properties və dekoratorlar. module-resolver plagini qısa importlar üçün aliaslar əlavə edir (@/components/Button əvəzinə ../../components/Button). İstehsal rejimində transform-remove-console koddan bütün console.log-ları silir.