ٹرانسپائلیشن: یہ کیا ہے، عمل اور کوڈ کی تبدیلی کے اوزار

ٹرانسپائلیشن کیا ہے؟

ٹرانسپائلیشن (ماخذ-سے-ماخذ کمپائلیشن) ایک پروگرام کو ایک پروگرامنگ زبان سے دوسری میں ترجمہ کرنے کا عمل ہے جو تجرید کی ایک ہی سطح کو برقرار رکھتا ہے۔ ایک ٹرانسپائلر زبان A میں سورس کوڈ لیتا ہے اور زبان B میں مساوی کوڈ تیار کرتا ہے جو ہدف کے ماحول میں چلایا جا سکتا ہے۔ عام مثالیں: TypeScript سے JavaScript، SASS سے CSS، Haxe سے متعدد ہدف زبانوں میں۔

ٹرانسپائلیشن کمپائلیشن سے اس لحاظ سے مختلف ہے کہ آؤٹ پٹ کوڈ اعلیٰ سطح پر رہتا ہے اور انسان پڑھ سکتے ہیں (اگرچہ اس کے لیے مقصود نہیں ہے)۔ کمپائلر (GCC، LLVM، javac) کوڈ کو مشین کوڈ یا بائٹ کوڈ میں ترجمہ کرتا ہے — ایک ناقابل مطالعہ فارمیٹ۔ ٹرانسپائلر ایسا کوڈ تیار کرتا ہے جسے مزید کمپائل یا مینیفائی کیا جا سکتا ہے۔

ٹرانسپائلیشن کی ضرورت کیوں ہے۔ بنیادی وجہ مطابقت ہے۔ ڈویلپرز جدید زبانیں (اقسام کے ساتھ TypeScript، null safety کے ساتھ Kotlin) استعمال کرنا چاہتے ہیں، لیکن ہدف پلیٹ فارم صرف JavaScript یا Java کو سپورٹ کرتا ہے۔ ٹرانسپائلیشن جدید زبان میں لکھنے کی اجازت دیتی ہے جبکہ ہدف کے ماحول کے لیے قابل فہم کوڈ ڈپلائے کرتی ہے۔

مقبول ٹرانسپائلرز

ٹرانسپائلیشن بمقابلہ کمپائلیشن: کلیدی فرق

تجریدی سطح بنیادی فرق ہے۔ ایک ٹرانسپائلر ایک ہی سطح کی زبانوں (اعلیٰ سطح → اعلیٰ سطح) کے درمیان کوڈ کا ترجمہ کرتا ہے۔ ایک کمپائلر اعلیٰ سطح سے ادنیٰ سطح (مشین کوڈ، بائٹ کوڈ) میں ترجمہ کرتا ہے۔ LLVM IR ایک درمیانی نمائندگی ہے لیکن پھر بھی اصل C++ یا Rust سے ادنیٰ سطح پر ہے۔

نتیجے کی پڑھنے کی اہلیت دوسرا فرق ہے۔ ٹرانسپائلیشن کا نتیجہ (TypeScript سے JavaScript) پڑھنے کے قابل ہے اور براؤزر میں ڈیبگ کیا جا سکتا ہے۔ کمپائلیشن کا نتیجہ (C++ سے مشین کوڈ) پڑھنے کے لیے نہیں ہے — اس کے تجزیہ کے لیے ڈس اسمبلر کی ضرورت ہوتی ہے۔ سورس میپس ٹرانسپائل شدہ کوڈ کو اصل ماخذ سے منسلک کرکے ڈیبگ کرنے میں مدد کرتی ہیں۔

CI/CD سیاق و سباق میں ٹرانسپائلیشن

CI/CD پائپ لائنوں میں، ٹرانسپائلیشن بلڈ مرحلے پر انجام دی جاتی ہے۔ TypeScript پروجیکٹس کے لیے، tsc یا Babel Docker کنٹینر میں چلتے ہیں، JavaScript اور سورس میپس تیار کرتے ہیں، جنہیں پھر مینیفائی کیا جاتا ہے اور سرور یا ایپ اسٹور پر ڈپلائے کیا جاتا ہے۔ ٹرانسپائلیشن کے نتائج کی کیشنگ کنفیگر کرنا ضروری ہے — tsc --incremental رنز کے درمیان انحصار گراف محفوظ کرتا ہے، بلڈ کا وقت 30-50% کم کرتا ہے۔

موبائل پروجیکٹس (React Native) کے لیے، Metro Bundler کے ذریعے ٹرانسپائلیشن ہر ریلیز کے ساتھ CI سرور پر چلتی ہے۔ کیش ڈائریکٹریز (tmp/metro-cache) اور --workers کے ذریعے متوازی بلڈ عمل کو تیز کرتے ہیں۔ GitHub Actions اور GitLab CI رنز کے درمیان node_modules اور .cache ڈائریکٹریز کی کیشنگ کو سپورٹ کرتے ہیں، جو پائپ لائن کا وقت کم کرنے کے لیے اہم ہے۔

عملدرآمد کی رفتار بھی مختلف ہوتی ہے۔ مشین کوڈ میں کمپائلیشن زیادہ سے زیادہ کارکردگی دیتی ہے۔ ٹرانسپائلیشن تجریدی سطح کا اوور ہیڈ برقرار رکھتی ہے: TypeScript سے JavaScript عام JavaScript کی طرح اسی رفتار سے چلتی ہے۔ اصلاح (TypeScript —strict) تجزیہ کے مرحلے پر کام کرتی ہے، رن ٹائم پر نہیں۔

مقبول ٹرانسپائلیشن منظرنامے

منظرنامہ 1: TypeScript → JavaScript — سب سے عام منظرنامہ۔ ڈویلپر اقسام کے ساتھ TypeScript لکھتا ہے، tsc کمپائلر یا Babel قسم کے نوٹس ہٹاتا ہے اور خالص JavaScript تیار کرتا ہے۔ تمام Angular پروجیکٹس اور زیادہ تر React پروجیکٹس (2026) TypeScript ٹرانسپائلیشن استعمال کرتے ہیں۔ State of JS 2025 کے مطابق، 79% سروے شدہ ڈویلپر اپنے اہم پروجیکٹس میں TypeScript استعمال کرتے ہیں۔

منظرنامہ 2: Kotlin → JavaScript — فل اسٹیک ڈویلپمنٹ کے لیے Kotlin/JS میں استعمال ہوتا ہے۔ Kotlin کوڈ IR (Intermediate Representation) کے ساتھ Kotlin کمپائلر کے ذریعے JavaScript میں کمپائل ہوتا ہے۔ Kotlin/JS بیرونی JS لائبریریوں کے ساتھ انضمام کے لیے TypeScript ٹائپ شدہ اعلانات (.d.ts) کو سپورٹ کرتا ہے۔ JetBrains ویب انٹرفیس کے لیے اپنی مصنوعات میں Kotlin/JS استعمال کرتا ہے۔

منظرنامہ 3: SASS/SCSS → CSS — CSS پری پروسیسرز کی ٹرانسپائلیشن۔ Dart Sass (تجویز کردہ نفاذ) .scss کو .css میں ٹرانسپائل کرتا ہے، مکسینز، متغیرات، اندرون قواعد اور افعال کو وسعت دیتا ہے۔ یہ کمپائلیشن نہیں ہے (CSS ویسے ہی CSS ہے)، بلکہ نحوی توسیع کے ساتھ ٹرانسپائلیشن ہے۔

موازنہ: ٹرانسپائلیشن بمقابلہ کمپائلیشن بمقابلہ تشریح

Babel: جدید JavaScript کی ٹرانسپائلیشن

Babel سب سے مقبول جاوا اسکرپٹ ٹرانسپائلر ہے، جو ES6+/ESNext کوڈ کو ES5 مطابقت پذیر JavaScript میں تبدیل کرتا ہے۔ Babel پلگ ان اور پری سیٹ سسٹم کے ذریعے کام کرتا ہے: ہر پلگ ان ایک تبدیلی (ایرو فنکشنز، async/await، optional chaining) کے لیے ذمہ دار ہے۔ @babel/preset-env ہدف براؤزرز (browserslist) کی بنیاد پر ضروری پلگ انز خود بخود متعین کرتا ہے۔

Babel کا فن تعمیر تین مراحل پر مشتمل ہے: پارسنگ → تبدیلی → تخلیق۔ پارسر (Babylon/@babel/parser) سورس کوڈ کو AST (Abstract Syntax Tree) میں تبدیل کرتا ہے۔ ٹرانسفارمرز (پلگ انز) 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 نے تبدیل کیا: ایرو فنکشن کو فنکشن ایکسپریشن میں، ڈیفالٹ پیرامیٹر (name = «World») کو void 0 چیک میں، ٹیمپلیٹ سٹرنگ کو جوڑ میں، کلاس کو کنسٹرکٹر فنکشن میں، اور optional chaining (?.) کو ternary آپریٹرز کی زنجیر میں۔ 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 کو ES6 نحو (ایرو فنکشنز، کلاسز، let/const) کے ساتھ JavaScript تیار کرنے کی ہدایت کرتا ہے۔ module: «esnext» Webpack میں بعد میں Tree Shaking کے لیے ES ماڈیولز (import/export) کو محفوظ رکھتا ہے۔ strict: true تمام قسم کی جانچیں (strictNullChecks، noImplicitAny، strictFunctionTypes) فعال کرتا ہے۔ declaration: true لائبریری کے TypeScript صارفین کے لیے .d.ts فائلیں تیار کرتا ہے۔

موبائل ڈویلپمنٹ میں ٹرانسپائلیشن

React Native JavaScript/TypeScript کو JavaScriptCore (iOS) یا Hermes (Android) کے ذریعے قابل عمل کوڈ میں ٹرانسپائل کرنے کے لیے Babel اور Metro کا استعمال کرتا ہے۔ 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 میں ٹرانسپائل کرتا ہے لیکن کم اصلاح کے ساتھ۔

مثال: React Native کے لیے Babel کنفیگریشن

// 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، کلاس پراپرٹیز اور ڈیکوریٹرز۔ ماڈیول-ریزولور پلگ ان مختصر امپورٹس کے لیے عرفی نام شامل کرتا ہے (@/components/Button بجائے ../../components/Button)۔ پروڈکشن موڈ میں، transform-remove-console کوڈ سے تمام console.log ہٹا دیتا ہے۔