الترجمة المصدرية: ما هي، العملية وأدوات تحويل الكود

ما هي الترجمة المصدرية؟

الترجمة المصدرية (التجميع من مصدر إلى مصدر) هي عملية ترجمة برنامج من لغة برمجة إلى أخرى مع الحفاظ على نفس مستوى التجريد. يأخذ المُترجم المصدر كودًا بلغة A ويُنتج كودًا مكافئًا بلغة B يمكن تنفيذه في البيئة المستهدفة. أمثلة نموذجية: TypeScript إلى JavaScript، SASS إلى CSS، Haxe إلى عدة لغات مستهدفة.

تختلف الترجمة المصدرية عن التجميع في أن الكود الناتج يبقى على مستوى عالٍ ويمكن قراءته بواسطة البشر (وإن لم يكن مخصصًا لذلك). المُجمّع (GCC، LLVM، javac) يترجم الكود إلى كود آلي أو bytecode — تنسيق غير قابل للقراءة. يُنتج المُترجم المصدر كودًا يمكن تجميعه أو تصغيره لاحقًا.

لماذا نحتاج الترجمة المصدرية. السبب الرئيسي هو التوافق. يريد المطورون استخدام لغات حديثة (TypeScript مع الأنواع، Kotlin مع أمان القيم الخالية)، لكن المنصة المستهدفة تدعم فقط JavaScript أو Java. تتيح الترجمة المصدرية الكتابة بلغة حديثة مع نشر كود مفهوم للبيئة المستهدفة.

المترجمات المصدرية الشائعة

الترجمة المصدرية مقابل التجميع: الفروق الرئيسية

مستوى التجريد هو الفرق الرئيسي. يُترجم المُترجم المصدر الكود بين لغات من نفس المستوى (عالٍ ← عالٍ). يُترجم المُجمّع من مستوى عالٍ إلى مستوى منخفض (كود آلي، bytecode). LLVM IR هو تمثيل وسيط لكنه يظل أقل مستوى من C++ أو Rust الأصلي.

قابلية قراءة النتيجة هي الفرق الثاني. نتيجة الترجمة المصدرية (JavaScript من TypeScript) قابلة للقراءة ويمكن تصحيحها في المتصفح. نتيجة التجميع (كود آلي من C++) غير مخصصة للقراءة — تحليلها يتطلب مفككًا. تساعد خرائط المصدر (source maps) في تصحيح الكود المُترجم مصدريًا من خلال ربطه بالكود الأصلي.

الترجمة المصدرية في سياق 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 بين مرات التشغيل، وهو أمر بالغ الأهمية لتقليل وقت خط الأنابيب.

سرعة التنفيذ تختلف أيضًا. التجميع إلى كود آلي يُعطي أقصى أداء. تحافظ الترجمة المصدرية على عبء مستوى التجريد: JavaScript من TypeScript يعمل بنفس سرعة 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 للتطوير الكامل (Full-Stack). يتم تجميع كود Kotlin إلى JavaScript عبر مترجم Kotlin مع IR (Intermediate Representation). يدعم Kotlin/JS تعريفات TypeScript المكتوبة (.d.ts) للتكامل مع مكتبات JS الخارجية. تستخدم JetBrains Kotlin/JS في منتجاتها الخاصة لواجهات الويب.

السيناريو 3: SASS/SCSS → CSS — ترجمة مصدرية لمعالجات CSS الأولية. يقوم Dart Sass (التنفيذ الموصى به) بترجمة .scss إلى .css، مع توسيع mixins والمتغيرات والقواعد المتداخلة والوظائف. هذا ليس تجميعًا (CSS يبقى CSS)، بل ترجمة مصدرية مع توسيع نحوي.

مقارنة: الترجمة المصدرية مقابل التجميع مقابل التفسير

Babel: ترجمة JavaScript الحديثة

Babel هو أشهر مترجم مصدر لـ JavaScript، يحول كود ES6+/ESNext إلى JavaScript متوافق مع ES5. يعمل Babel من خلال نظام من الإضافات والمجموعات (presets): كل إضافة مسؤولة عن تحويل واحد (دوال السهم، 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 حوّل: دالة السهم إلى تعبير دالة، المعامل الافتراضي (name = "World") إلى فحص void 0، سلسلة القالب إلى تسلسل، الفئة إلى دالة إنشاء، والربط الاختياري (?.) إلى سلسلة من العوامل الثلاثية. تم استبدال const بـ var للتوافق مع ES5.

TypeScript: الترجمة المصدرية مع نظام الأنواع

TypeScript هي لغة مكتوبة بشدة تُترجم مصدريًا إلى JavaScript. يقوم المترجم tsc (مترجم TypeScript) بمهمتين: التحقق من الأنواع (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، خصائص الفئة والديكورات. تضيف إضافة module-resolver أسماء مستعارة للاستيرادات القصيرة (@/components/Button بدلاً من ../../components/Button). في وضع الإنتاج، تقوم transform-remove-console بإزالة جميع console.log من الكود.