تحويل كود جافاسكريبت: دليل تطوير إضافات Babel

لغة جافاسكريبت في تطور مستمر. يتم اقتراح ميزات جديدة، وتوحيدها، وتنفيذها في النهاية في المتصفحات وNode.js. ومع ذلك، فإن دعم هذه الميزات في البيئات القديمة، أو تطبيق تحويلات كود مخصصة، يتطلب أدوات يمكنها معالجة كود جافاسكريبت. وهنا يبرز دور Babel، ومعرفة كيفية كتابة إضافات Babel الخاصة بك تفتح عالمًا من الإمكانيات.

ما هو Babel؟

Babel هو مترجم جافاسكريبت يسمح للمطورين باستخدام صيغ وميزات جافاسكريبت من الجيل التالي اليوم. يقوم بتحويل كود جافاسكريبت الحديث إلى إصدار متوافق مع الإصدارات الأقدم يمكن تشغيله في المتصفحات والبيئات القديمة. في جوهره، يقوم Babel بتحليل كود جافاسكريبت إلى شجرة بناء جملة مجردة (AST)، ويتعامل مع هذه الشجرة بناءً على التحويلات المكونة، ثم ينشئ كود جافاسكريبت المحوَّل.

لماذا نكتب إضافات Babel؟

على الرغم من أن Babel يأتي مع مجموعة من التحويلات المحددة مسبقًا، إلا أن هناك سيناريوهات تكون فيها التحويلات المخصصة ضرورية. إليك بعض الأسباب التي قد تدفعك لكتابة إضافة Babel خاصة بك:

• صيغ مخصصة: تنفيذ دعم لإضافات الصيغ المخصصة الخاصة بمشروعك أو مجالك.
• تحسين الكود: أتمتة تحسينات الكود التي تتجاوز قدرات Babel المدمجة.
• التدقيق وفرض أنماط الكود: فرض قواعد نمط كود محددة أو تحديد المشكلات المحتملة أثناء عملية الترجمة.
• التدويل (i18n) والتوطين (l10n): أتمتة عملية استخراج النصوص القابلة للترجمة من قاعدة الكود الخاصة بك. على سبيل المثال، يمكنك إنشاء إضافة تستبدل تلقائيًا النصوص الموجهة للمستخدم بمفاتيح تُستخدم للبحث عن الترجمات بناءً على لغة المستخدم.
• تحويلات خاصة بإطار العمل: تطبيق تحويلات مصممة خصيصًا لإطار عمل معين، مثل React أو Vue.js أو Angular.
• الأمان: تنفيذ فحوصات أمان مخصصة أو تقنيات تشويش.
• توليد الكود: توليد الكود بناءً على أنماط أو تكوينات محددة.

فهم شجرة بناء الجملة المجردة (AST)

شجرة بناء الجملة المجردة (AST) هي تمثيل شبيه بالشجرة لهيكل كود جافاسكريبت الخاص بك. تمثل كل عقدة في الشجرة بنية في الكود، مثل تعريف متغير، أو استدعاء دالة، أو تعبير. فهم AST أمر بالغ الأهمية لكتابة إضافات Babel لأنك ستتنقل في هذه الشجرة وتتعامل معها لإجراء تحويلات الكود.

أدوات مثل AST Explorer لا تقدر بثمن لتصور شجرة AST لمقطع كود معين. يمكنك استخدام AST Explorer لتجربة تحويلات كود مختلفة ورؤية كيف تؤثر على الشجرة.

إليك مثال بسيط لكيفية تمثيل كود جافاسكريبت كشجرة AST:

كود جافاسكريبت:

            const x = 1 + 2;
            

              
                Copy
              
            
          

تمثيل AST مبسط:

            {
  "type": "VariableDeclaration",
  "declarations": [
    {
      "type": "VariableDeclarator",
      "id": {
        "type": "Identifier",
        "name": "x"
      },
      "init": {
        "type": "BinaryExpression",
        "operator": "+",
        "left": {
          "type": "NumericLiteral",
          "value": 1
        },
        "right": {
          "type": "NumericLiteral",
          "value": 2
        }
      }
    }
  ],
  "kind": "const"
}
            

              
                Copy
              
            
          

كما ترى، تقوم AST بتقسيم الكود إلى أجزائه المكونة، مما يسهل تحليله ومعالجته.

إعداد بيئة تطوير إضافات Babel الخاصة بك

قبل أن تبدأ في كتابة الإضافة الخاصة بك، تحتاج إلى إعداد بيئة التطوير. إليك إعداد أساسي:

1. Node.js و npm (أو yarn): تأكد من تثبيت Node.js و npm (أو yarn).
2. إنشاء مجلد مشروع: أنشئ مجلدًا جديدًا للإضافة الخاصة بك.
3. تهيئة npm: قم بتشغيل npm init -y في مجلد مشروعك لإنشاء ملف package.json.
4. تثبيت التبعيات: قم بتثبيت تبعيات Babel الضرورية:

               npm install @babel/core @babel/types @babel/template
               
   
                 
                   Copy
                 
               
             

   • @babel/core: مكتبة Babel الأساسية.
   • @babel/types: مكتبة أدوات مساعدة لإنشاء والتحقق من عقد AST.
   • @babel/template: مكتبة أدوات مساعدة لتوليد عقد AST من سلاسل القوالب.

تشريح إضافة Babel

إضافة Babel هي في الأساس دالة جافاسكريبت تعيد كائنًا يحتوي على خاصية visitor. خاصية visitor هي كائن يحدد دوال ليتم تنفيذها عندما يواجه Babel أنواعًا معينة من عقد AST أثناء تنقله في الشجرة.

إليك هيكل أساسي لإضافة Babel:

            module.exports = function(babel) {
  const { types: t } = babel;

  return {
    name: "my-custom-plugin",
    visitor: {
      Identifier(path) {
        // Code to transform Identifier nodes
      }
    }
  };
};
            

              
                Copy
              
            
          

دعنا نحلل المكونات الرئيسية:

• module.exports: يتم تصدير الإضافة كوحدة نمطية، مما يسمح لـ Babel بتحميلها.
• babel: كائن يحتوي على واجهة برمجة تطبيقات Babel، بما في ذلك كائن types (المكنى بـ t)، والذي يوفر أدوات مساعدة لإنشاء والتحقق من عقد AST.
• name: سلسلة نصية تحدد الإضافة الخاصة بك. على الرغم من أنها ليست مطلوبة تمامًا، إلا أنه من الممارسات الجيدة تضمين اسم وصفي.
• visitor: كائن يربط أنواع عقد AST بالدوال التي سيتم تنفيذها عند مواجهة أنواع العقد هذه أثناء التنقل في AST.
• Identifier(path): دالة زائر (visitor) سيتم استدعاؤها لكل عقدة من نوع Identifier في AST. يوفر كائن path الوصول إلى العقدة وسياقها المحيط في AST.

العمل مع كائن path

كائن path هو المفتاح لمعالجة AST. يوفر طرقًا للوصول إلى عقد AST وتعديلها واستبدالها. إليك بعض طرق path الأكثر استخدامًا:

• path.node: عقدة AST نفسها.
• path.parent: العقدة الأصل للعقدة الحالية.
• path.parentPath: كائن path للعقدة الأصل.
• path.scope: كائن النطاق (scope) للعقدة الحالية. هذا مفيد لحل مراجع المتغيرات.
• path.replaceWith(newNode): يستبدل العقدة الحالية بعقدة جديدة.
• path.replaceWithMultiple(newNodes): يستبدل العقدة الحالية بعدة عقد جديدة.
• path.insertBefore(newNode): يدرج عقدة جديدة قبل العقدة الحالية.
• path.insertAfter(newNode): يدرج عقدة جديدة بعد العقدة الحالية.
• path.remove(): يزيل العقدة الحالية.
• path.skip(): يتخطى التنقل في أبناء العقدة الحالية.
• path.traverse(visitor): يتنقل في أبناء العقدة الحالية باستخدام زائر جديد.
• path.findParent(callback): يبحث عن أول عقدة أصل تحقق دالة رد الاتصال (callback) المعطاة.

إنشاء والتحقق من عقد AST باستخدام @babel/types

توفر مكتبة @babel/types مجموعة من الدوال لإنشاء والتحقق من عقد AST. هذه الدوال ضرورية لمعالجة AST بطريقة آمنة من حيث النوع.

إليك بعض الأمثلة على استخدام @babel/types:

            const { types: t } = babel;

// Create an Identifier node
const identifier = t.identifier("myVariable");

// Create a NumericLiteral node
const numericLiteral = t.numericLiteral(42);

// Create a BinaryExpression node
const binaryExpression = t.binaryExpression("+", t.identifier("x"), t.numericLiteral(1));

// Check if a node is an Identifier
if (t.isIdentifier(identifier)) {
  console.log("The node is an Identifier");
}

            

              
                Copy
              
            
          

توفر @babel/types مجموعة واسعة من الدوال لإنشاء والتحقق من أنواع مختلفة من عقد AST. ارجع إلى وثائق Babel Types للحصول على قائمة كاملة.

توليد عقد AST من سلاسل القوالب باستخدام @babel/template

تسمح لك مكتبة @babel/template بتوليد عقد AST من سلاسل القوالب، مما يسهل إنشاء هياكل AST معقدة. هذا مفيد بشكل خاص عندما تحتاج إلى توليد مقتطفات كود تتضمن عقد AST متعددة.

إليك مثال على استخدام @babel/template:

            const { template } = babel;

const buildRequire = template(`
  var IMPORT_NAME = require(SOURCE);
`);

const requireStatement = buildRequire({
  IMPORT_NAME: t.identifier("myModule"),
  SOURCE: t.stringLiteral("my-module")
});

// requireStatement now contains the AST for: var myModule = require("my-module");

            

              
                Copy
              
            
          

تقوم دالة template بتحليل سلسلة القالب وتعيد دالة يمكن استخدامها لتوليد عقد AST عن طريق استبدال العناصر النائبة بالقيم المقدمة.

مثال على إضافة: استبدال المعرفات

لنقم بإنشاء إضافة Babel بسيطة تستبدل جميع مثيلات المعرف x بالمعرف y.

            module.exports = function(babel) {
  const { types: t } = babel;

  return {
    name: "replace-identifier",
    visitor: {
      Identifier(path) {
        if (path.node.name === "x") {
          path.node.name = "y";
        }
      }
    }
  };
};
            

              
                Copy
              
            
          

تتنقل هذه الإضافة عبر جميع عقد Identifier في AST. إذا كانت خاصية name للمعرف هي x، فإنها تستبدلها بـ y.

مثال على إضافة: إضافة تعليمة console.log

إليك مثال أكثر تعقيدًا يضيف تعليمة console.log في بداية جسم كل دالة.

            module.exports = function(babel) {
  const { types: t } = babel;

  return {
    name: "add-console-log",
    visitor: {
      FunctionDeclaration(path) {
        const functionName = path.node.id.name;
        const consoleLogStatement = t.expressionStatement(
          t.callExpression(
            t.memberExpression(
              t.identifier("console"),
              t.identifier("log")
            ),
            [t.stringLiteral(`Function ${functionName} called`)]
          )
        );

        path.get("body").unshiftContainer("body", consoleLogStatement);
      }
    }
  };
};
            

              
                Copy
              
            
          

تزور هذه الإضافة عقد FunctionDeclaration. لكل دالة، تقوم بإنشاء تعليمة console.log تسجل اسم الدالة. ثم تقوم بإدراج هذه التعليمة في بداية جسم الدالة باستخدام path.get("body").unshiftContainer("body", consoleLogStatement).

اختبار إضافة Babel الخاصة بك

من الضروري اختبار إضافة Babel الخاصة بك بدقة للتأكد من أنها تعمل كما هو متوقع ولا تقدم أي سلوك غير متوقع. إليك كيفية اختبار الإضافة:

1. إنشاء ملف اختبار: أنشئ ملف جافاسكريبت يحتوي على كود تريد تحويله باستخدام الإضافة الخاصة بك.
2. تثبيت @babel/cli: قم بتثبيت واجهة سطر أوامر Babel:

               npm install @babel/cli
               
   
                 
                   Copy
                 
               
             

3. تكوين Babel: أنشئ ملف .babelrc أو babel.config.js في مجلد مشروعك لتكوين Babel لاستخدام الإضافة الخاصة بك.

   مثال على .babelrc:

               {
     "plugins": ["./my-plugin.js"]
   }
               
   
                 
                   Copy
                 
               
             

4. تشغيل Babel: قم بتشغيل Babel من سطر الأوامر لتحويل ملف الاختبار الخاص بك:

               npx babel test.js -o output.js
               
   
                 
                   Copy
                 
               
             

5. التحقق من المخرجات: تحقق من ملف output.js للتأكد من أن الكود قد تم تحويله بشكل صحيح.

لاختبار أكثر شمولاً، يمكنك استخدام إطار عمل اختبار مثل Jest أو Mocha مع مكتبة تكامل Babel مثل babel-jest أو @babel/register.

نشر إضافة Babel الخاصة بك

إذا كنت ترغب في مشاركة إضافة Babel الخاصة بك مع العالم، يمكنك نشرها على npm. إليك الطريقة:

1. إنشاء حساب npm: إذا لم يكن لديك حساب بالفعل، فأنشئ حسابًا على npm.
2. تحديث package.json: قم بتحديث ملف package.json بالمعلومات الضرورية، مثل اسم الحزمة، والإصدار، والوصف، والكلمات الرئيسية.
3. تسجيل الدخول إلى npm: قم بتشغيل npm login في الطرفية الخاصة بك وأدخل بيانات اعتماد npm الخاصة بك.
4. نشر الإضافة: قم بتشغيل npm publish في مجلد مشروعك لنشر الإضافة على npm.

قبل النشر، تأكد من أن إضافتك موثقة جيدًا وتتضمن ملف README مع تعليمات واضحة حول كيفية تثبيتها واستخدامها.

تقنيات تطوير الإضافات المتقدمة

كلما أصبحت أكثر ارتياحًا مع تطوير إضافات Babel، يمكنك استكشاف تقنيات أكثر تقدمًا، مثل:

• خيارات الإضافة: اسمح للمستخدمين بتكوين الإضافة الخاصة بك باستخدام الخيارات التي يتم تمريرها في تكوين Babel.
• تحليل النطاق: تحليل نطاق المتغيرات لتجنب الآثار الجانبية غير المقصودة.
• توليد الكود: توليد الكود ديناميكيًا بناءً على الكود المدخل.
• خرائط المصدر: توليد خرائط المصدر لتحسين تجربة تصحيح الأخطاء.
• تحسين الأداء: تحسين أداء إضافتك لتقليل التأثير على وقت الترجمة.

اعتبارات عالمية لتطوير الإضافات

عند تطوير إضافات Babel لجمهور عالمي، من المهم مراعاة ما يلي:

• التدويل (i18n): تأكد من أن إضافتك تدعم لغات ومجموعات أحرف مختلفة. هذا مهم بشكل خاص للإضافات التي تتعامل مع السلاسل النصية الحرفية أو التعليقات. على سبيل المثال، إذا كانت إضافتك تعتمد على التعبيرات النمطية، فتأكد من أن هذه التعبيرات يمكنها التعامل مع أحرف يونيكود بشكل صحيح.
• التوطين (l10n): قم بتكييف إضافتك مع الإعدادات الإقليمية المختلفة والتقاليد الثقافية.
• المناطق الزمنية: كن على دراية بالمناطق الزمنية عند التعامل مع قيم التاريخ والوقت. قد يكون التعامل مع كائن Date المدمج في جافاسكريبت صعبًا عبر مناطق زمنية مختلفة، لذا فكر في استخدام مكتبة مثل Moment.js أو date-fns لمعالجة أكثر قوة للمناطق الزمنية.
• العملات: تعامل مع العملات وتنسيقات الأرقام المختلفة بشكل مناسب.
• تنسيقات البيانات: كن على دراية بتنسيقات البيانات المختلفة المستخدمة في مناطق مختلفة. على سبيل المثال، تختلف تنسيقات التاريخ بشكل كبير في جميع أنحاء العالم.
• إمكانية الوصول: تأكد من أن إضافتك لا تقدم أي مشكلات تتعلق بإمكانية الوصول.
• الترخيص: اختر ترخيصًا مناسبًا لإضافتك يسمح للآخرين باستخدامها والمساهمة فيها. تشمل تراخيص المصادر المفتوحة الشائعة MIT و Apache 2.0 و GPL.

على سبيل المثال، إذا كنت تطور إضافة لتنسيق التواريخ وفقًا للمنطقة، فيجب عليك الاستفادة من واجهة برمجة تطبيقات Intl.DateTimeFormat في جافاسكريبت والمصممة خصيصًا لهذا الغرض. ضع في اعتبارك مقتطف الكود التالي:

            const { types: t } = babel;

module.exports = function(babel) {
  return {
    name: "format-date",
    visitor: {
      CallExpression(path) {
        if (t.isIdentifier(path.node.callee, { name: 'formatDate' })) {
          // Assuming formatDate(date, locale) is used
          const dateNode = path.node.arguments[0];
          const localeNode = path.node.arguments[1];

          // Generate AST for:
          // new Intl.DateTimeFormat(locale).format(date)
          const newExpression = t.newExpression(
            t.memberExpression(
              t.identifier("Intl"),
              t.identifier("DateTimeFormat")
            ),
            [localeNode]
          );

          const formatCall = t.callExpression(
            t.memberExpression(
              newExpression,
              t.identifier("format")
            ),
            [dateNode]
          );

          path.replaceWith(formatCall);
        }
      }
    }
  };
};
            

              
                Copy
              
            
          

تستبدل هذه الإضافة الاستدعاءات لدالة افتراضية formatDate(date, locale) باستدعاء واجهة برمجة تطبيقات Intl.DateTimeFormat المناسبة، مما يضمن تنسيق التاريخ الخاص بالمنطقة.

الخاتمة

يعد تطوير إضافات Babel طريقة قوية لتوسيع قدرات جافاسكريبت وأتمتة تحويلات الكود. من خلال فهم AST، وهيكلية إضافة Babel، وواجهات برمجة التطبيقات المتاحة، يمكنك إنشاء إضافات مخصصة لحل مجموعة واسعة من المشكلات. تذكر أن تختبر إضافاتك بدقة وأن تأخذ في الاعتبار الاعتبارات العالمية عند التطوير لجمهور متنوع. مع الممارسة والتجربة، يمكنك أن تصبح مطور إضافات Babel بارعًا وتساهم في تطور نظام جافاسكريبت البيئي.