Babel لجافا سكريبت (Node.js): دليل كامل مع أمثلة

ما هو Babel ولماذا نحتاجه؟

\n\n

Babel هو مترجم (transpiler) قوي لجافا سكريبت، يسمح للمطورين بكتابة كود بأحدث إصدارات ECMAScript (ES6, ES7, ES8, ES9, ES10, ES11, ES12 وما فوق) وتحويله إلى جافا سكريبت متوافق مع الإصدارات السابقة، يمكن تشغيله في المتصفحات القديمة وبيئات التشغيل (مثل Node.js إصدارات أقل من 12).

\n\n

المشكلة الأساسية التي يحلها Babel هي الفجوة بين الميزات الجديدة للغة (الدوال السهمية، async/await، التفكيك، الكلاسات، الوحدات، السلسلة الاختيارية، إلخ) ودعم هذه الميزات في بيئات التشغيل الفعلية. يعمل Babel كجسر، مما يسمح للمطورين باستخدام جميع مزايا جافا سكريبت الحديثة دون الحاجة لانتظار تحديث جميع المتصفحات.

\n\n

يتكون Babel من ثلاثة مكونات رئيسية:

\n

\n
• النواة (@babel/core) — المحرك الرئيسي الذي يحلل الكود، ويحوله، ويولد كودًا جديدًا.
\n
• الإضافات (Plugins) — وحدات منفصلة، كل منها مسؤول عن تحويل بنية نحوية محددة (مثل إضافة للدوال السهمية، لـ async/await).
\n
• الإعدادات المسبقة (Presets) — مجموعات إضافات مهيأة مسبقًا (مثل @babel/preset-env، @babel/preset-react).
\n

\n\n

يستخدم Babel أيضًا لتحويل TypeScript، JSX (React)، Flow، وامتدادات جافا سكريبت الأخرى.

\n\n

تثبيت Babel

\n\n

يتم تثبيت Babel عبر npm (مدير حزم Node). للبدء، ستحتاج إلى Node.js إصدار 12 أو أعلى.

\n\n

أنشئ مشروعًا جديدًا وقم بتهيئته:

\n

mkdir my-babel-project\ncd my-babel-project\nnpm init -y

\n\n

قم بتثبيت الحزم الأساسية لـ Babel:

\n

npm install --save-dev @babel/core @babel/cli @babel/preset-env

\n\n

دعنا نشرح ما قمنا بتثبيته:

\n

\n
• @babel/core — نواة Babel. بدونها لن يعمل شيء.
\n
• @babel/cli — واجهة سطر الأوامر، تسمح بتشغيل Babel من الطرفية.
\n
• @babel/preset-env — أهم إعداد مسبق، يحدد تلقائيًا الإضافات المطلوبة بناءً على بيئات التشغيل المستهدفة (المتصفحات أو إصدارات Node.js).
\n

\n\n

للعمل مع React، قم بتثبيت إضافي:

\n

npm install --save-dev @babel/preset-react

\n\n

لـ TypeScript:

\n

npm install --save-dev @babel/preset-typescript

\n\n

بداية سريعة مع مثال كود

\n\n

أنشئ ملف إعدادات Babel (babel.config.json أو .babelrc) في جذر المشروع:

\n

{\n  "presets": [\n    ["@babel/preset-env", {\n      "targets": {\n        "node": "current"\n      }\n    }]\n  ]\n}

\n\n

أنشئ ملف src/index.js بكود حديث:

\n

// src/index.js\nconst greet = (name) => {\n  return `Hello, ${name}!`;\n};\n\nconst users = ['Alice', 'Bob', 'Charlie'];\nconst greetings = users.map(user => greet(user));\n\nconsole.log(greetings);\n\n// استخدام async/await\nconst fetchData = async () => {\n  const data = await Promise.resolve({ message: 'Success' });\n  console.log(data.message);\n};\n\nfetchData();

\n\n

الآن قم بتجميع الكود باستخدام Babel:

\n

npx babel src --out-dir dist

\n\n

بعد تنفيذ الأمر، سيظهر ملف index.js في مجلد dist بالكود المحول:

\n

// dist/index.js\n"use strict";\n\nvar greet = function greet(name) {\n  return "Hello, ".concat(name, "!");\n};\n\nvar users = ['Alice', 'Bob', 'Charlie'];\nvar greetings = users.map(function (user) {\n  return greet(user);\n});\n\nconsole.log(greetings);\n\nvar fetchData = async function fetchData() {\n  var data = await Promise.resolve({ message: 'Success' });\n  console.log(data.message);\n};\n\nfetchData();

\n\n

لاحظ