Transpilyatsiya: nima, jarayon va kodni o'zgartirish vositalari

Transpilyatsiya nima?

Transpilyatsiya (source-to-source kompilyatsiya) — dasturni bir dasturlash tilidan ikkinchisiga abstraksiya darajasini saqlagan holda tarjima qilish jarayoni. Transpilyator A tilidagi manba kodini qabul qiladi va maqsadli muhitda bajarilishi mumkin bo'lgan B tilidagi ekvivalent kodni yaratadi. Oddiy misollar: TypeScript dan JavaScript ga, SASS dan CSS ga, Haxe dan bir nechta maqsadli tillarga.

Transpilyatsiya kompilyatsiyadan farq qiladi, chunki chiqish kodi yuqori darajada qoladi va inson tomonidan o'qilishi mumkin (garchi bu maqsadda bo'lmasa ham). Kompilyator (GCC, LLVM, javac) kodni mashina kodiga yoki bayt kodiga — o'qib bo'lmaydigan formatga o'zgartiradi. Transpilyator qo'shimcha ravishda kompilyatsiya qilinishi yoki minifikatsiya qilinishi mumkin bo'lgan kodni yaratadi.

Transpilyatsiya nima uchun kerak. Asosiy sabab — moslik. Dasturchilar zamonaviy tillardan (tiplar bilan TypeScript, null safety bilan Kotlin) foydalanishni xohlaydilar, ammo maqsadli platforma faqat JavaScript yoki Java ni qo'llab-quvvatlaydi. Transpilyatsiya zamonaviy tilda yozish va maqsadli muhit uchun tushunarli kodni joylashtirish imkonini beradi.

Mashhur transpilyatorlar

Transpilyatsiya vs kompilyatsiya: asosiy farqlar

Abstraksiya darajasi — asosiy farq. Transpilyator kodni bir xil darajadagi tillar o'rtasida tarjima qiladi (yuqori darajali → yuqori darajali). Kompilyator yuqori darajadan past darajaga (mashina kodi, bayt kodi) o'zgartiradi. LLVM IR oraliq ko'rinishdir, ammo baribir manba C++ yoki Rust dan past darajali.

Natijaning o'qilishi — ikkinchi farq. Transpilyatsiya natijasi (TypeScript dan JavaScript) o'qilishi mumkin va brauzerda disk raskadrovka qilinishi mumkin. Kompilyatsiya natijasi (C++ dan mashina kodi) o'qish uchun mo'ljallanmagan — uni tahlil qilish dezasembler talab qiladi. Source maps transpilyatsiya qilingan kodni manba kod bilan bog'lab, disk raskadrovka qilishga yordam beradi.

CI/CD kontekstida transpilyatsiya

CI/CD quvurlarida transpilyatsiya qurish bosqichida (build stage) bajariladi. TypeScript loyihalari uchun tsc yoki Babel Docker konteynerida ishga tushiriladi, JavaScript va source maps yaratadi, keyin minifikatsiya qilinadi va server yoki ilovalar do'koniga joylashtiriladi. Transpilyatsiya natijalarini keshlashni sozlash muhim — tsc --incremental ishga tushirishlar o'rtasida bog'liqlik grafigini saqlaydi, qurish vaqtini 30–50% ga qisqartiradi.

Mobil loyihalar (React Native) uchun Metro Bundler orqali transpilyatsiya har bir nashrda CI serverida bajariladi. Tezlashtirish uchun kesh kataloglari (tmp/metro-cache) va --workers orqali parallel qurish ishlatiladi. GitHub Actions va GitLab CI ishga tushirishlar o'rtasida node_modules va .cache kataloglarini keshlashni qo'llab-quvvatlaydi, bu quvur vaqtini qisqartirish uchun muhimdir.

Bajarilish tezligi ham farqlanadi. Mashina kodiga kompilyatsiya maksimal ishlashni beradi. Transpilyatsiya abstraksiya darajasining overheadini saqlaydi: TypeScript dan JavaScript oddiy JavaScript bilan bir xil tezlikda bajariladi. Optimallashtirishlar (TypeScript --strict) tahlil bosqichida ishlaydi, bajarilish bosqichida emas.

Mashhur transpilyatsiya stsenariylari

Stsenariy 1: TypeScript → JavaScript — eng ommaviy stsenariy. Dasturchi tiplar bilan TypeScript da yozadi, tsc yoki Babel tip annotatsiyalarini olib tashlaydi va toza JavaScript yaratadi. Barcha Angular loyihalari va aksariyat React loyihalari (2026) TypeScript transpilyatsiyasidan foydalanadi. State of JS 2025 statistikasiga ko'ra, so'rovda qatnashgan dasturchilarning 79% asosiy loyihalarida TypeScript dan foydalanadi.

Stsenariy 2: Kotlin → JavaScript — Full-Stack ishlanma uchun Kotlin/JS da ishlatiladi. Kotlin kodi Kotlin Compiler orqali IR (Intermediate Representation) bilan JavaScript ga kompilyatsiya qilinadi. Kotlin/JS tashqi JS kutubxonalari bilan integratsiya uchun TypeScript tipli deklaratsiyalarni (.d.ts) qo'llab-quvvatlaydi. JetBrains o'z mahsulotlarida veb interfeyslari uchun Kotlin/JS dan foydalanadi.

Stsenariy 3: SASS/SCSS → CSS — CSS preprotsessorlarining transpilyatsiyasi. Dart Sass (tavsiya etilgan amalga oshirish) .scss ni .css ga transpilyatsiya qiladi, miksinlar, o'zgaruvchilar, ichki o'rnatilgan qoidalar va funksiyalarni kengaytiradi. Bu kompilyatsiya emas (CSS CSS bo'lib qoladi), sintaktik kengaytma bilan transpilyatsiyadir.

Taqqoslash: Transpilyatsiya vs Kompilyatsiya vs Interpretatsiya

Babel: zamonaviy JavaScript transpilyatsiyasi

Babel — eng keng tarqalgan JavaScript transpilyatori, ES6+/ESNext kodini ES5-mos JavaScript ga o'zgartiradi. Babel plagin va preset tizimi orqali ishlaydi: har bir plagin bitta transformatsiya uchun javobgardir (arrow functions, async/await, optional chaining). @babel/preset-env maqsadli brauzerlar (browserslist) asosida kerakli plaginlarni avtomatik aniqlaydi.

Babel arxitekturasi uch bosqichdan iborat: pars qilish (parsing) → transformatsiya (transformation) → generatsiya (generation). Parser (Babylon/@babel/parser) manba kodini AST (Abstract Syntax Tree) ga o'zgartiradi. Transformatorlar (plaginlar) AST ni o'zgartiradi. Generator (@babel/generator) o'zgartirilgan AST dan chiqish kodini yaratadi.

Misol: Babel orqali transpilyatsiya

// Manba ES6+ kodi
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 dan keyin (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 o'zgartirdi: arrow funksiyasini function expression ga, standart parametrni (name = “World”) void 0 tekshirishiga, template string ni konkatenatsiyaga, class ni funksiya-konstruktorga va optional chaining (?.) ni uchlik operatorlar zanjiriga. const moslik uchun ES5 muhitlari bilan var bilan almashtirildi.

TypeScript: tip tizimi bilan transpilyatsiya

TypeScript — qat'iy tipli til, JavaScript ga transpilyatsiya qilinadi. tsc kompilyatori (TypeScript Compiler) ikkita vazifani bajaradi: tip tekshiruvi (type checking) va transpilyatsiya (emit). Tushunish muhim: tip tekshiruvi va transpilyatsiya mustaqil bosqichlardir. Tip tekshiruvisiz transpilyatsiya qilish (--noEmitOnError false) yoki kod generatsiyasiz tekshirish (--noEmit true) mumkin.

TypeScript transpilyatsiyasi barcha tip annotatsiyalarini, interfeyslarni, tip aliaslarini va generic parametrlarni olib tashlaydi — JavaScript da ular yo'q. Enum lar obyektlarga, dekoratorlar funksiya chaqiruvlariga, async/await generatorlarga (agar target ES2017 dan past bo'lsa) o'zgartiriladi. tsconfig.json target (JavaScript versiyasi), module (modul tizimi), strict (tip tekshiruvi darajasi) va outDir (chiqish papkasi) ni boshqaradi.

Transpilyatsiya uchun TypeScript konfiguratsiyasi

{
  "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 ga ES6 sintaksisi bilan JavaScript yaratishni ko'rsatadi (arrow funksiyalar, class lar, let/const). module: “esnext” keyingi Tree Shaking uchun ES modullarini (import/export) saqlaydi Webpack da. strict: true barcha tip tekshiruvlarini yoqadi (strictNullChecks, noImplicitAny, strictFunctionTypes). declaration: true kutubxonaning TypeScript iste'molchilari uchun .d.ts fayllarini yaratadi.

Mobil ishlanmada transpilyatsiya

React Native JavaScript/TypeScript ni JavaScriptCore (iOS) yoki Hermes (Android) tomonidan bajariladigan kodga transpilyatsiya qilish uchun Babel va Metro dan foydalanadi. Babel plaginlari JSX transformatsiyasi, Flow/TypeScript annotatsiyalari va React Native ga xos optimallashtirishlarni qo'shadi. Metro Bundler qo'shimcha ravishda modullarni birlashtiradi va ishlanma uchun Hot Module Replacement bajaradi.

Flutter Dart transpilyatsiyasidan foydalanadi. Flutter Web uchun dart2js Dart ni optimallashtirilgan JavaScript ga transpilyatsiya qiladi. Flutter Mobile uchun dart2native Dart ni native ARM kodiga kompilyatsiya qiladi. Flutter shuningdek ishlanma uchun Dart DevCompiler (dartdevc) ni qo'llab-quvvatlaydi — Dart ni tezroq, ammo kamroq optimallashtirish bilan JavaScript ga transpilyatsiya qiladi.

Misol: React Native uchun Babel konfiguratsiyasi

// babel.config.js — React Native transpilyatsiyasi
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 uchun barcha kerakli plaginlarni o'z ichiga oladi: JSX, Flow/TypeScript, Metro modul tizimi, async/await, class properties va dekoratorlar. module-resolver plagini qisqa importlar uchun aliaslar qo'shadi (@/components/Button o'rniga ../../components/Button). Ishlab chiqarish rejimida transform-remove-console koddan barcha console.log larni olib tashlaydi.