كيف تقرأ مكتبات js مفتوحة المصدر!

لقد خططنا جميعًا، لمرة واحدة على الأقل، للمساهمة في مكتبة واحدة مفتوحة المصدر. سارت الأمور على ما يرام ولكن عندما نلقي نظرة على الكود المصدري، نصبح غير قادرين ومشوشين، ولا يمكننا حتى أن نركز.

اليوم أريد في هذا المقال، أن أوضح لكم أسلوب تعاملي ومنهجي في قراءة المكتبات وفهمها جيدًا. لا أعتقد أنها الطريقة الأفضل، لكن دعونا نجربها، بالنسبة لي لقد حققت نجاحًا!

إذا كنت لا تعرف المكتبة المفتوحة، أقترح عليك مراجعة هذه المقالة ل_ Kent C Dodds.

ماذا تحتاج للمكتبة؟

  • كود VS (أو أي محرر كود يمكنك إرفاق مصحح أخطاء به)
  • المصحح VS code jest extension (يمكننا العمل بدونه) أو مصحح أخطاء node
  • مشروعك المفضل (أنا أستخدم jotai هذه المرة)

نحتاج أحيانًا إلى تعيين إصدار node الخاص بنا على 14 لأنني رأيت أن مصحح الأخطاء لديه بعض الصعوبات مع الإصدار 15.

تأكد من أن لديك بعض الخلفية لمستندات المكتبة، ثم افتح كود مصدر المكتبة، فدعونا نبدأ رحلتنا ونشرب القهوة (أنا لا أفعل ذلك في الواقع) لأنني متحمس حقًا لإخراجها من نظامي!

البداية

في معظم الأوقات، لن أفتح ملف index.js، نظرًا لوجود العديد من فروع المكتبة، وليس لدينا أدنى فكرة عن أي منها حتى الآن. أقترح عليك التحقق من الاختبارات أولاً، حتى تتمكن من تصحيح الاختبارات ومعرفة كيفية عمل المكتبة.

إعدادات مكتبة js

لدى Jotai اختبارات فكاهية (jest)، لذا يمكنني تصحيح أخطاء اختباراتها بامتداد المزاح! أنا فقط بحاجة إلى إنشاء ملف التكوين هناك.

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "name": "vscode-jest-tests",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/jest/bin/jest",
      "args": ["--runInBand", "${file}"],
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "disableOptimisticBPs": true
    }
  ]
}

أستخدم هذا التكوين في معظم الأوقات، لكنه يعتمد على مشروعك في بعض الأحيان! على سبيل المثال في شفرة مصدر Reactjs، يجب عليك ربط jest-cli.js كبرنامج بدلاً من jest نفسها.

نقاط التوقف

على سبيل المثال، أود أن أرى كيفية عمل useAtom، لذلك أنا بحاجة فقط للذهاب إلى الاختبار ذي الصلة وتعيين نقطة توقف على السطر الذي أريد معرفة المزيد عنه. بعد ذلك، يمكننا تشغيل اختبارات vscode-jest.

config، لذلك سيتم تشغيل ملف المكتبة الذي كنا فيه، وسيتم إيقافه على السطر الذي وضعنا نقطة توقف ⏹️ فيه.

vscode-jest-debugger

الآن علينا اللعب بشريط مصحح الأخطاء (الزاوية اليمنى) ومشاهدة تدفق تنفيذ الكود، يمكننا فقط تعيين العديد من نقاط التوقف أينما نريد وفهم ما يحدث هناك.

آمل أن يشجعك هذا المقال على عمل المزيد من مكتبات المصادر المفتوحة ويقتل مخاوفك (ليس جميعها في الواقع). لا تنس مشاركة هذه المقالة القصيرة. أحاول نشر المزيد، لذا ساعدني في فعل ذلك مع ردود أفعالك.

المصدر: Bugged🐞

محمدباقر عبيات

The one Who loves solving stuff and writing about them.

منشور ذات صلة
لغة جاڤاسكرپت 5 Minutes

تعليم لغة جاڤاسكرپت| كيف ابدأ؟

فردوس مزرعاوي

لربما قد بحثت عن الجي إس أو الجاڤاسكرپت مثل كل الذين یقررون تعلم هذه اللغة. هنا سأساعدك وسنتكلم حول “كیف أبدأ بتعلم لغات البرمجة؟” و “كیف سیكون هذا الطریق؟” و سنتكلم بشكل خاص حول طرق تعلم الجاڤاسكرپت!

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

السلة