ट्रांसपिलेशन: यह क्या है, प्रक्रिया और कोड रूपांतरण उपकरण

ट्रांसपिलेशन क्या है?

ट्रांसपिलेशन (स्रोत-से-स्रोत कंपाइलेशन) एक प्रोग्राम को एक प्रोग्रामिंग भाषा से दूसरी में अनुवाद करने की प्रक्रिया है जो अमूर्तता के समान स्तर को बनाए रखती है। एक ट्रांसपाइलर भाषा 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 Compiler के माध्यम से 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 ने रूपांतरित किया: एरो फ़ंक्शन को function expression में, डिफ़ॉल्ट पैरामीटर (name = "World") को void 0 जांच में, टेम्पलेट स्ट्रिंग को कॉन्केटनेशन में, क्लास को कंस्ट्रक्टर फ़ंक्शन में, और optional chaining (?.) को टर्नरी ऑपरेटरों की श्रृंखला में। const को ES5 संगतता के लिए var से बदल दिया गया।

TypeScript: टाइप सिस्टम के साथ ट्रांसपिलेशन

TypeScript एक सशक्त रूप से टाइप की गई भाषा है जो JavaScript में ट्रांसपाइल होती है। tsc कंपाइलर (TypeScript Compiler) दो कार्य करता है: टाइप चेकिंग और ट्रांसपिलेशन (emit)। यह समझना महत्वपूर्ण है: टाइप चेकिंग और ट्रांसपिलेशन स्वतंत्र चरण हैं। आप टाइप चेकिंग के बिना ट्रांसपिलेशन (--noEmitOnError false) या कोड जनरेशन के बिना टाइप चेकिंग (--noEmit true) चला सकते हैं।

TypeScript ट्रांसपिलेशन सभी टाइप एनोटेशन, इंटरफ़ेस, टाइप एलियास और जेनेरिक पैरामीटर हटाता है — वे JavaScript में मौजूद नहीं हैं। Enum को ऑब्जेक्ट में, डेकोरेटर को फ़ंक्शन कॉल में, async/await को जनरेटर में (यदि टार्गेट ES2017 से नीचे है) रूपांतरित किया जाता है। tsconfig.json टार्गेट (JavaScript संस्करण), मॉड्यूल (मॉड्यूल सिस्टम), स्ट्रिक्ट (टाइप चेकिंग की कठोरता) और आउटडीर (आउटपुट फ़ोल्डर) को नियंत्रित करता है।

ट्रांसपिलेशन के लिए 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, क्लास प्रॉपर्टीज़ और डेकोरेटर। module-resolver प्लगइन छोटे इम्पोर्ट के लिए एलियास जोड़ता है (@/components/Button के बजाय ../../components/Button)। प्रोडक्शन मोड में, transform-remove-console कोड से सभी console.log हटा देता है।