Transpilasyon: ano ito, proseso, at mga kasangkapan sa pagbabago ng code

Ano ang transpilasyon?

Transpilasyon (source-to-source compilation) — proseso ng pagsasalin ng programa mula sa isang programming language patungo sa iba, na pinapanatili ang antas ng abstraction. Ang transpilator ay tumatanggap ng source code sa wikang A at lumilikha ng katumbas na code sa wikang B na maaaring isagawa sa target na kapaligiran. Mga tipikal na halimbawa: TypeScript sa JavaScript, SASS sa CSS, Haxe sa maraming target na wika.

Ang transpilasyon ay naiiba sa compilation dahil ang output code ay nananatili sa mataas na antas at maaaring basahin ng tao (kahit hindi ito nilayon para doon). Ang compiler (GCC, LLVM, javac) ay nagsasalin ng code sa machine code o bytecode — hindi nababasang format. Ang transpilator ay lumilikha ng code na maaaring dagdag na compile o minify.

Bakit kailangan ang transpilasyon. Ang pangunahing dahilan ay compatibility. Gustong gumamit ng mga developer ng modernong mga wika (TypeScript na may mga tipo, Kotlin na may null safety), ngunit ang target na platform ay sumusuporta lamang ng JavaScript o Java. Pinapayagan ng transpilasyon ang pagsulat sa modernong wika at pag-deploy ng code na naiintindihan ng target na kapaligiran.

Mga sikat na transpilator

Transpilasyon vs compilation: mga pangunahing pagkakaiba

Antas ng abstraction — pangunahing pagkakaiba. Ang transpilator ay nagsasalin ng code sa pagitan ng mga wika ng parehong antas (mataas na antas → mataas na antas). Ang compiler ay nagsasalin mula sa mataas na antas patungo sa mababang antas (machine code, bytecode). Ang LLVM IR ay isang intermediate na representasyon, ngunit mas mababa pa rin ang antas kaysa sa source C++ o Rust.

Pagkabasa ng resulta — pangalawang pagkakaiba. Ang resulta ng transpilasyon (JavaScript mula sa TypeScript) ay nababasa at maaaring i-debug sa browser. Ang resulta ng compilation (machine code mula sa C++) ay hindi nilayon para basahin — ang pagsusuri nito ay nangangailangan ng disassembler. Tumutulong ang source maps sa pag-debug ng na-transpile na code sa pamamagitan ng pag-link nito sa source code.

Transpilasyon sa konteksto ng CI/CD

Sa CI/CD pipelines ang transpilasyon ay isinasagawa sa yugto ng build. Para sa mga TypeScript project, ang tsc o Babel ay pinapatakbo sa Docker container, lumilikha ng JavaScript at source maps, na pagkatapos ay mina-minify at ide-deploy sa server o app store. Mahalagang i-configure ang caching ng mga resulta ng transpilasyon — ang tsc --incremental ay nag-iimbak ng dependency graph sa pagitan ng mga run, binabawasan ang build time ng 30–50%.

Para sa mga mobile project (React Native) ang transpilasyon sa pamamagitan ng Metro Bundler ay isinasagawa sa CI server sa bawat publication. Para sa pagpapabilis, ginagamit ang cache directories (tmp/metro-cache) at parallel build sa pamamagitan ng --workers. Sinusuportahan ng GitHub Actions at GitLab CI ang caching ng node_modules at .cache directories sa pagitan ng mga run, na kritikal para sa pagbawas ng pipeline time.

Bilis ng pag-execute ay nagkakaiba rin. Ang compilation sa machine code ay nagbibigay ng maximum na performance. Ang transpilasyon ay nagpapanatili ng overhead ng antas ng abstraction: ang JavaScript mula sa TypeScript ay isinasagawa sa parehong bilis ng ordinaryong JavaScript. Ang mga optimization (TypeScript --strict) ay gumagana sa yugto ng analysis, hindi sa yugto ng execution.

Mga sikat na senaryo ng transpilasyon

Senaryo 1: TypeScript → JavaScript — pinakamalaganap na senaryo. Ang developer ay sumusulat sa TypeScript na may mga tipo, ang compiler tsc o Babel ay nag-aalis ng type annotations at lumilikha ng purong JavaScript. Lahat ng Angular project at karamihan sa React project (2026) ay gumagamit ng TypeScript transpilation. Ayon sa estadistika ng State of JS 2025, 79% ng mga na-survey na developer ay gumagamit ng TypeScript sa kanilang pangunahing proyekto.

Senaryo 2: Kotlin → JavaScript — ginagamit sa Kotlin/JS para sa Full-Stack development. Ang Kotlin code ay nagko-compile sa JavaScript sa pamamagitan ng Kotlin Compiler na may IR (Intermediate Representation). Sinusuportahan ng Kotlin/JS ang mga TypeScript-typ na deklarasyon (.d.ts) para sa integrasyon sa panlabas na JS libraries. Ginagamit ng JetBrains ang Kotlin/JS sa kanilang mga produkto para sa web interfaces.

Senaryo 3: SASS/SCSS → CSS — transpilasyon ng CSS preprocessors. Ang Dart Sass (inirerekomendang implementasyon) ay nagti-transpile ng .scss sa .css, pinapalawak ang mga mixin, variable, nested rules, at function. Ito ay hindi compilation (CSS ay nananatiling CSS), kundi transpilasyon na may syntax extension.

Paghahambing: Transpilasyon vs Compilation vs Interpretasyon

Babel: transpilasyon ng modernong JavaScript

Babel — pinakalaganap na JavaScript transpilator, nagko-convert ng ES6+/ESNext code sa ES5-compatible na JavaScript. Gumagana ang Babel sa pamamagitan ng sistema ng mga plugin at preset: bawat plugin ay responsable para sa isang transformasyon (arrow functions, async/await, optional chaining). Ang @babel/preset-env ay awtomatikong tinutukoy ang mga kinakailangang plugin batay sa target na browser (browserslist).

Ang arkitektura ng Babel ay binubuo ng tatlong yugto: parsing → transformation → generation. Ang parser (Babylon/@babel/parser) ay nagko-convert ng source code sa AST (Abstract Syntax Tree). Ang mga transformer (plugin) ay nagmo-modify ng AST. Ang generator (@babel/generator) ay lumilikha ng output code mula sa modified AST.

Halimbawa: transpilasyon sa pamamagitan ng Babel

// Source ES6+ code
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;

// Pagkatapos ng 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 ay nag-convert: arrow function sa function expression, default parameter (name = “World”) sa void 0 check, template string sa concatenation, class sa constructor function, at optional chaining (?.) sa chain ng ternary operators. Ang const ay pinalitan ng var para sa compatibility sa ES5 environment.

TypeScript: transpilasyon na may sistema ng tipo

TypeScript — mahigpit na nai-type na wika, na-transpile sa JavaScript. Ang compiler tsc (TypeScript Compiler) ay gumaganap ng dalawang gawain: type checking at transpilasyon (emit). Mahalagang maunawaan: ang type checking at transpilasyon ay independent na yugto. Posibleng magsagawa ng transpilasyon nang walang type checking (--noEmitOnError false) o checking nang walang code generation (--noEmit true).

TypeScript transpilasyon ay nag-aalis ng lahat ng type annotations, interfaces, type aliases, at generic parameters — sa JavaScript wala ang mga ito. Ang mga enum ay nagiging objects, decorators — function calls, async/await — generators (kung ang target ay mas mababa sa ES2017). Ang tsconfig.json ay namamahala ng target (bersyon ng JavaScript), module (sistema ng module), strict (antas ng type checking), at outDir (output folder).

Konfigurasyon ng TypeScript para sa transpilasyon

{
  "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” ay nag-uutos sa tsc na lumikha ng JavaScript na may ES6 syntax (arrow functions, classes, let/const). module: “esnext” ay nagpapanatili ng ES modules (import/export) para sa susunod na Tree Shaking sa Webpack. strict: true ay nag-a-activate ng lahat ng type checks (strictNullChecks, noImplicitAny, strictFunctionTypes). declaration: true ay lumilikha ng .d.ts file para sa TypeScript consumers ng library.

Transpilasyon sa mobile development

React Native ay gumagamit ng Babel at Metro para sa transpilasyon ng JavaScript/TypeScript sa code na isinasagawa ng JavaScriptCore (iOS) o Hermes (Android). Ang mga Babel plugin ay nagdaragdag ng JSX transformation, Flow/TypeScript annotations, at React Native-specific optimization. Ang Metro Bundler ay karagdagang pinagsasama ang mga module at nagsasagawa ng Hot Module Replacement para sa development.

Flutter ay gumagamit ng Dart transpilasyon. Para sa Flutter Web, ang dart2js ay nagti-transpile ng Dart sa optimized na JavaScript. Para sa Flutter Mobile, ang dart2native ay nagko-compile ng Dart sa native ARM code. Sinusuportahan din ng Flutter ang Dart DevCompiler (dartdevc) para sa development — mas mabilis itong nagti-transpile ng Dart sa JavaScript, ngunit may mas kaunting optimization.

Halimbawa: Konfigurasyon ng Babel para sa React Native

// babel.config.js — React Native transpilasyon
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 ay may kasamang lahat ng kinakailangang plugin para sa React Native: JSX, Flow/TypeScript, Metro module system, async/await, class properties, at decorators. Ang plugin na module-resolver ay nagdaragdag ng mga alias para sa maiikling import (@/components/Button sa halip na ../../components/Button). Sa production mode, ang transform-remove-console ay nag-aalis ng lahat ng console.log mula sa code.