ট্রান্সপাইলেশন: এটি কী, প্রক্রিয়া এবং কোড রূপান্তর সরঞ্জাম

ট্রান্সপাইলেশন কী?

ট্রান্সপাইলেশন (সোর্স-টু-সোর্স কম্পাইলেশন) হল একটি প্রোগ্রামকে এক প্রোগ্রামিং ভাষা থেকে অন্য ভাষায় অনুবাদ করার প্রক্রিয়া যা বিমূর্ততার একই স্তর বজায় রাখে। একটি ট্রান্সপাইলার ভাষা 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 সরিয়ে দেয়।