ترانسپایل‌سازی: چیست، فرآیند و ابزارهای تبدیل کد

ترانسپایل‌سازی چیست؟

ترانسپایل‌سازی (کامپایل مبدأ به مبدأ) — فرآیند ترجمه برنامه از یک زبان برنامه‌نویسی به زبان دیگر با حفظ سطح انتزاع. ترانسپایلر کد منبع را به زبان A دریافت می‌کند و کد معادل به زبان B تولید می‌کند که می‌تواند در محیط مقصد اجرا شود. مثال‌های معمول: TypeScript به JavaScript، SASS به CSS، Haxe به چندین زبان مقصد.

ترانسپایل‌سازی با کامپایل تفاوت دارد زیرا کد خروجی در سطح بالا باقی می‌ماند و قابل خواندن توسط انسان است (اگرچه برای این منظور طراحی نشده). کامپایلر (GCC, LLVM, javac) کد را به کد ماشین یا بایت‌کد — فرمت غیرقابل خواندن — تبدیل می‌کند. ترانسپایلر کدی تولید می‌کند که می‌تواند بیشتر کامپایل یا مینیفای شود.

چرا ترانسپایل‌سازی لازم است. دلیل اصلی سازگاری است. توسعه‌دهندگان می‌خواهند از زبان‌های مدرن (TypeScript با انواع، Kotlin با null safety) استفاده کنند، اما پلتفرم مقصد فقط JavaScript یا Java را پشتیبانی می‌کند. ترانسپایل‌سازی امکان نوشتن به زبان مدرن و استقرار کدی قابل فهم برای محیط مقصد را فراهم می‌کند.

ترانسپایلرهای محبوب

ترانسپایل‌سازی در مقابل کامپایل: تفاوت‌های کلیدی

سطح انتزاع — تفاوت اصلی. ترانسپایلر کد را بین زبان‌های هم‌سطح ترجمه می‌کند (سطح بالا ← سطح بالا). کامپایلر از سطح بالا به سطح پایین (کد ماشین، بایت‌کد) ترجمه می‌کند. LLVM IR یک نمایش میانی است، اما باز هم از C++ یا Rust مبدأ سطح پایین‌تری دارد.

خوانایی نتیجه — دومین تفاوت. نتیجه ترانسپایل (JavaScript از TypeScript) قابل خواندن و اشکال‌زدایی در مرورگر است. نتیجه کامپایل (کد ماشین از C++) برای خواندن طراحی نشده — تجزیه و تحلیل آن نیاز به دیساسمبلر دارد. Source maps به اشکال‌زدایی کد ترانسپایل شده کمک می‌کند و آن را به کد مبدأ متصل می‌کند.

ترانسپایل‌سازی در زمینه CI/CD

در خطوط لوله CI/CD ترانسپایل‌سازی در مرحله ساخت (build stage) انجام می‌شود. برای پروژه‌های TypeScript، tsc یا Babel در کانتینر Docker اجرا می‌شوند، JavaScript و source maps تولید می‌کنند که سپس مینیفای و روی سرور یا فروشگاه برنامه مستقر می‌شوند. مهم است که حافظه نهان نتایج ترانسپایل پیکربندی شود — tsc --incremental گراف وابستگی را بین اجراها ذخیره می‌کند و زمان ساخت را ۳۰–۵۰٪ کاهش می‌دهد.

برای پروژه‌های موبایل (React Native) ترانسپایل از طریق Metro Bundler در سرور CI در هر انتشار انجام می‌شود. برای سرعت بخشیدن از دایرکتوری‌های کش (tmp/metro-cache) و ساخت موازی از طریق --workers استفاده می‌شود. GitHub Actions و GitLab CI از کش کردن node_modules و دایرکتوری‌های .cache بین اجراها پشتیبانی می‌کنند که برای کاهش زمان خط لوله حیاتی است.

سرعت اجرا نیز متفاوت است. کامپایل به کد ماشین حداکثر کارایی را می‌دهد. ترانسپایل سربار سطح انتزاع را حفظ می‌کند: JavaScript از TypeScript با همان سرعت JavaScript معمولی اجرا می‌شود. بهینه‌سازی‌ها (TypeScript --strict) در مرحله تحلیل کار می‌کنند، نه در مرحله اجرا.

سناریوهای محبوب ترانسپایل

سناریو ۱: TypeScript ← JavaScript — پرکاربردترین سناریو. توسعه‌دهنده با TypeScript با انواع می‌نویسد، کامپایلر tsc یا Babel حاشیه‌نویسی انواع را حذف و JavaScript خالص تولید می‌کند. همه پروژه‌های Angular و بیشتر پروژه‌های React (۲۰۲۶) از ترانسپایل TypeScript استفاده می‌کنند. طبق آمار State of JS ۲۰۲۵، ۷۹٪ از توسعه‌دهندگان شرکت‌کننده در نظرسنجی از TypeScript در پروژه‌های اصلی استفاده می‌کنند.

سناریو ۲: Kotlin ← JavaScript — در Kotlin/JS برای توسعه Full-Stack استفاده می‌شود. کد Kotlin از طریق Kotlin Compiler با IR (Intermediate Representation) به JavaScript کامپایل می‌شود. Kotlin/JS از اعلان‌های تایپ‌شده TypeScript (.d.ts) برای ادغام با کتابخانه‌های خارجی JS پشتیبانی می‌کند. JetBrains از Kotlin/JS در محصولات خود برای رابط‌های وب استفاده می‌کند.

سناریو ۳: SASS/SCSS ← CSS — ترانسپایل پیش‌پردازنده‌های CSS. Dart Sass (پیاده‌سازی توصیه‌شده) .scss را به .css ترانسپایل می‌کند، میکسین‌ها، متغیرها، قوانین تودرتو و توابع را گسترش می‌دهد. این کامپایل نیست (CSS همچنان CSS است)، بلکه ترانسپایل با گسترش نحوی است.

مقایسه: ترانسپایل در مقابل کامپایل در مقابل تفسیر

Babel: ترانسپایل JavaScript مدرن

Babel — رایج‌ترین ترانسپایلر JavaScript که کد ES6+/ESNext را به JavaScript سازگار با ES5 تبدیل می‌کند. Babel از طریق سیستم پلاگین‌ها و پریست‌ها کار می‌کند: هر پلاگین مسئول یک تبدیل است (arrow functions، async/await، optional chaining). @babel/preset-env به طور خودکار پلاگین‌های لازم را بر اساس مرورگرهای مقصد (browserslist) تعیین می‌کند.

معماری Babel از سه مرحله تشکیل شده است: تجزیه (parsing) ← تبدیل (transformation) ← تولید (generation). تجزیه‌گر (Babylon/@babel/parser) کد مبدأ را به AST (درخت نحو انتزاعی) تبدیل می‌کند. تبدیل‌کننده‌ها (پلاگین‌ها) 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، template string به الحاق، کلاس به تابع سازنده و optional chaining (?.) به زنجیره عملگرهای سه‌تایی. const برای سازگاری با محیط‌های ES5 با var جایگزین شد.

TypeScript: ترانسپایل با سیستم انواع

TypeScript — زبان به شدت تایپ‌شده که به JavaScript ترانسپایل می‌شود. کامپایلر tsc (TypeScript Compiler) دو وظیفه را انجام می‌دهد: بررسی انواع (type checking) و ترانسپایل (emit). مهم است بدانید: بررسی انواع و ترانسپایل مراحل مستقل هستند. می‌توان ترانسپایل را بدون بررسی انواع (--noEmitOnError false) یا بررسی را بدون تولید کد (--noEmit true) انجام داد.

ترانسپایل TypeScript همه حاشیه‌نویسی انواع، رابط‌ها، نام‌های مستعار نوع و پارامترهای جنریک را حذف می‌کند — در 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 aliasهایی برای importهای کوتاه اضافه می‌کند (@/components/Button به جای ../../components/Button). در حالت تولید، transform-remove-console همه console.logها را از کد حذف می‌کند.