Transpilasi: apa itu, proses, dan alat transformasi kode

Apa itu transpilasi?

Transpilasi (kompilasi source-to-source) — proses penerjemahan program dari satu bahasa pemrograman ke bahasa lain, dengan mempertahankan tingkat abstraksi. Transpilator menerima kode sumber dalam bahasa A dan menghasilkan kode setara dalam bahasa B yang dapat dijalankan di lingkungan target. Contoh tipikal: TypeScript ke JavaScript, SASS ke CSS, Haxe ke beberapa bahasa target.

Transpilasi berbeda dengan kompilasi karena kode keluaran tetap pada tingkat tinggi dan dapat dibaca manusia (meskipun tidak dimaksudkan untuk itu). Compiler (GCC, LLVM, javac) menerjemahkan kode ke kode mesin atau bytecode — format yang tidak terbaca. Transpilator menghasilkan kode yang dapat dikompilasi atau diminifikasi lebih lanjut.

Mengapa transpilasi diperlukan. Alasan utamanya adalah kompatibilitas. Pengembang ingin menggunakan bahasa modern (TypeScript dengan tipe, Kotlin dengan null safety), tetapi platform target hanya mendukung JavaScript atau Java. Transpilasi memungkinkan menulis dalam bahasa modern dan menyebarkan kode yang dipahami oleh lingkungan target.

Transpilator populer

Transpilasi vs kompilasi: perbedaan utama

Tingkat abstraksi — perbedaan utama. Transpilator menerjemahkan kode antar bahasa pada tingkat yang sama (tingkat tinggi → tingkat tinggi). Compiler menerjemahkan dari tingkat tinggi ke tingkat rendah (kode mesin, bytecode). LLVM IR adalah representasi perantara, tetapi tetap lebih rendah tingkatnya daripada C++ atau Rust sumber.

Keterbacaan hasil — perbedaan kedua. Hasil transpilasi (JavaScript dari TypeScript) dapat dibaca dan dapat di-debug di browser. Hasil kompilasi (kode mesin dari C++) tidak dimaksudkan untuk dibaca — analisisnya memerlukan disassembler. Source maps membantu men-debug kode yang ditranspilasi dengan menghubungkannya ke kode sumber.

Transpilasi dalam konteks CI/CD

Dalam pipeline CI/CD transpilasi dilakukan pada tahap build. Untuk proyek TypeScript, tsc atau Babel dijalankan dalam kontainer Docker, menghasilkan JavaScript dan source maps, yang kemudian diminifikasi dan diterapkan ke server atau toko aplikasi. Penting untuk mengatur cache hasil transpilasi — tsc --incremental menyimpan grafik dependensi antar eksekusi, mengurangi waktu build sebesar 30–50%.

Untuk proyek mobile (React Native) transpilasi melalui Metro Bundler dilakukan di server CI pada setiap publikasi. Untuk percepatan, direktori cache (tmp/metro-cache) dan build paralel melalui --workers digunakan. GitHub Actions dan GitLab CI mendukung caching node_modules dan direktori .cache antar eksekusi, yang sangat penting untuk mengurangi waktu pipeline.

Kecepatan eksekusi juga berbeda. Kompilasi ke kode mesin memberikan kinerja maksimal. Transpilasi mempertahankan overhead tingkat abstraksi: JavaScript dari TypeScript dijalankan dengan kecepatan yang sama dengan JavaScript biasa. Optimasi (TypeScript --strict) bekerja pada tahap analisis, bukan pada tahap eksekusi.

Skenario transpilasi populer

Skenario 1: TypeScript → JavaScript — skenario paling masif. Pengembang menulis dalam TypeScript dengan tipe, compiler tsc atau Babel menghapus anotasi tipe dan menghasilkan JavaScript murni. Semua proyek Angular dan sebagian besar proyek React (2026) menggunakan transpilasi TypeScript. Menurut statistik State of JS 2025, 79% pengembang yang disurvei menggunakan TypeScript di proyek utama mereka.

Skenario 2: Kotlin → JavaScript — digunakan dalam Kotlin/JS untuk pengembangan Full-Stack. Kode Kotlin dikompilasi ke JavaScript melalui Kotlin Compiler dengan IR (Intermediate Representation). Kotlin/JS mendukung deklarasi bertipe TypeScript (.d.ts) untuk integrasi dengan pustaka JS eksternal. JetBrains menggunakan Kotlin/JS dalam produknya untuk antarmuka web.

Skenario 3: SASS/SCSS → CSS — transpilasi preprocessing CSS. Dart Sass (implementasi yang direkomendasikan) mentranspilasi .scss ke .css, memperluas mixin, variabel, aturan bersarang, dan fungsi. Ini bukan kompilasi (CSS tetap CSS), melainkan transpilasi dengan perluasan sintaks.

Perbandingan: Transpilasi vs Kompilasi vs Interpretasi

Babel: transpilasi JavaScript modern

Babel — transpilator JavaScript yang paling luas digunakan, mengubah kode ES6+/ESNext menjadi JavaScript yang kompatibel dengan ES5. Babel bekerja melalui sistem plugin dan preset: setiap plugin bertanggung jawab atas satu transformasi (arrow functions, async/await, optional chaining). @babel/preset-env secara otomatis menentukan plugin yang diperlukan berdasarkan browser target (browserslist).

Arsitektur Babel terdiri dari tiga tahap: parsing → transformasi → generasi. Parser (Babylon/@babel/parser) mengubah kode sumber menjadi AST (Abstract Syntax Tree). Transformer (plugin) memodifikasi AST. Generator (@babel/generator) membuat kode keluaran dari AST yang dimodifikasi.

Contoh: transpilasi melalui Babel

// Kode sumber 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;

// Setelah 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 mengubah: fungsi panah menjadi function expression, parameter default (name = “World”) menjadi pemeriksaan void 0, template string menjadi konkatenasi, kelas menjadi fungsi konstruktor, dan optional chaining (?.) menjadi rantai operator ternary. const diganti dengan var untuk kompatibilitas dengan lingkungan ES5.

TypeScript: transpilasi dengan sistem tipe

TypeScript — bahasa yang diketik secara ketat, ditranspilasi ke JavaScript. Compiler tsc (TypeScript Compiler) melakukan dua tugas: pemeriksaan tipe (type checking) dan transpilasi (emit). Penting untuk dipahami: pemeriksaan tipe dan transpilasi adalah tahap independen. Dimungkinkan untuk melakukan transpilasi tanpa pemeriksaan tipe (--noEmitOnError false) atau pemeriksaan tanpa generasi kode (--noEmit true).

Transpilasi TypeScript menghapus semua anotasi tipe, antarmuka, alias tipe, dan parameter generik — dalam JavaScript tidak ada. Enum diubah menjadi objek, dekorator menjadi panggilan fungsi, async/await menjadi generator (jika target di bawah ES2017). tsconfig.json mengelola target (versi JavaScript), module (sistem modul), strict (tingkat pemeriksaan tipe), dan outDir (folder keluaran).

Konfigurasi TypeScript untuk transpilasi

{
  "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” menginstruksikan tsc untuk menghasilkan JavaScript dengan sintaks ES6 (fungsi panah, kelas, let/const). module: “esnext” mempertahankan modul ES (import/export) untuk Tree Shaking selanjutnya di Webpack. strict: true mengaktifkan semua pemeriksaan tipe (strictNullChecks, noImplicitAny, strictFunctionTypes). declaration: true menghasilkan file .d.ts untuk konsumen pustaka TypeScript.

Transpilasi dalam pengembangan mobile

React Native menggunakan Babel dan Metro untuk mentranspilasi JavaScript/TypeScript menjadi kode yang dijalankan oleh JavaScriptCore (iOS) atau Hermes (Android). Plugin Babel menambahkan transformasi JSX, anotasi Flow/TypeScript, dan optimasi khusus React Native. Metro Bundler juga menggabungkan modul dan melakukan Hot Module Replacement untuk pengembangan.

Flutter menggunakan transpilasi Dart. Untuk Flutter Web, dart2js mentranspilasi Dart menjadi JavaScript yang dioptimalkan. Untuk Flutter Mobile, dart2native mengkompilasi Dart menjadi kode native ARM. Flutter juga mendukung Dart DevCompiler (dartdevc) untuk pengembangan — ia mentranspilasi Dart ke JavaScript lebih cepat, tetapi dengan optimasi yang lebih sedikit.

Contoh: Konfigurasi Babel untuk React Native

// babel.config.js — transpilasi 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 mencakup semua plugin yang diperlukan untuk React Native: JSX, Flow/TypeScript, sistem modul Metro, async/await, class properties, dan dekorator. Plugin module-resolver menambahkan alias untuk impor pendek (@/components/Button alih-alih ../../components/Button). Dalam mode produksi, transform-remove-console menghapus semua console.log dari kode.