دورة تعلم Babel لجافا سكريبت

الدرس 1 • استخدام نصوص npm للبناء والمهام المحلية

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

الدرس 2 • تهيئة مشروع بـ npm init وحقول package.json

ابدأ مشروعًا جديدًا باستخدام npm init وقم بتهيئة حقول package.json الرئيسية. تعلم كيفية تعيين الاسم والإصدار والنصوص والمدخل والنوع والبيانات الوصفية، وكيف تؤثر هذه الحقول على الأدوات والنشر ووثائق المشروع.

الدرس 3 • إدارة devDependencies مقابل dependencies

تعلم الفرق بين التبعيات والتبعيات التنموية وكيف تؤثر على التثبيتات وبناء الإنتاج. افهم متى تستخدم كل منهما، كيف تعمل أعلام تثبيت npm، وكيف تساعد ملفات القفل في الحفاظ على شجرة التبعيات متوقعة.

الدرس 4 • أساسيات التحكم بالإصدارات لملفات البناء (.gitignore لـ dist، node_modules)

افهم كيفية الحفاظ على مخرجات البناء والتبعيات خارج التحكم بالإصدارات. تعلم أنماط .gitignore لمجلدات dist و node_modules، ولماذا لا يجب تسليم الملفات، وكيفية إعادة توليد البناء بشكل موثوق على أي جهاز.

الدرس 1 • نظرة عامة على حزم Babel: @babel/core، @babel/cli، @babel/preset-env، @babel/plugin-transform-runtime

استكشف أدوار حزم Babel الرئيسية وكيفية تفاعلها وعند تثبيت كل منها. تعلم كيف تتناسب @babel/core و @babel/cli و @babel/preset-env و @babel/plugin-transform-runtime في إعدادات المشاريع الحقيقية.

الدرس 2 • تكامل Babel مع نصوص npm وأمثلة استخدام CLI

تعلم تشغيل Babel عبر نصوص npm وواجهة الأوامر. ستقوم بإنشاء أوامر بناء ومراقبة واختبار شائعة، تمرير الخيارات عبر الأعلام وملفات التهيئة، وتكامل Babel في تدفقات عمل المشروع الحالية.

الدرس 3 • الإعدادات المسبقة والإضافات: كيفية عملها وعند إضافة إضافات مخصصة

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

الدرس 4 • babel.config.js مقابل .babelrc: نطاقات التهيئة وأفضل الممارسات

قارن بين babel.config.js و .babelrc مع التركيز على النطاق وهيكل المشروع والأدوات. تعلم أفضل الممارسات للمستودعات المتعددة والمكتبات والتطبيقات، وكيفية تجنب تضارب التهيئة والمفاجآت.

الدرس 1 • اختبار مخرجات التحويل لمتصفحات قديمة محددة

اكتشف تقنيات التحقق من أن الكود المتحول يعمل بشكل صحيح في المتصفحات القديمة. ستتعلم إعدادات الاختبار الآلي والاختبارات اليدوية والأدوات التصحيحية واكتشاف التعبئات أو تحويلات الصيغة المفقودة.

الدرس 2 • اختيار إصدار core-js وتهيئة core-js مع Babel

تعلم كيفية اختيار إصدار core-js مناسب، توافقه مع @babel/preset-env، وتهيئة استيراد التعبئات. افهم توافق الإصدارات وتغطية الميزات وكيفية تجنب التكرار مع أدوات التجميع أو الإطارات.

الدرس 3 • تهيئة @babel/preset-env مع خيارات targets و useBuiltIns

افهم كيفية تهيئة أهداف @babel/preset-env و useBuiltIns معًا. تعلم عن المتصفحات و node وأهداف وحدات ES، وكيف تتفاعل مع Browserslist، وكيفية الحفاظ على التهيئة قابلة للصيانة عبر البيئات.

الدرس 4 • فهم استفسارات browserslist والصيغة (الافتراضيات، آخر 2 إصدارات، > 1%، إصدارات محددة)

استكشف صيغة Browserslist المستخدمة بـ @babel/preset-env، بما في ذلك الافتراضيات والإصدارات الأخيرة N وحصص السوق والنطاقات الصريحة. تعلم كيف تؤثر تغييرات الاستعلام على التحويل والتعبئات ودعم المتصفح طويل الأمد.

الدرس 1 • فئات ES6+، خصائص الفئة، البنائيات، وتحويل النموذج الأولي

افهم صيغة فئات ES6+ والحقول والبنائيات وكيف تترجم إلى النماذج الأولية. تعلم كيف تعيد كتابة المحولات الفئات وتتعامل مع الوراثة و super والفروق التي تؤثر على التصحيح والأداء.

الدرس 2 • طرق المصفوفة: map، filter، reduce وما يعادلها المتحول

استكشف طرق المصفوفة الأساسية map و filter و reduce بما في ذلك تواقيع الاستدعاء وقيم العودة. شاهد كيف تنفذ المحولات والتعبئات وتعلم تبادلات الأداء وقابلية القراءة في الكود الحقيقي.

الدرس 3 • وظائف السهم وسلوك this اللغوي

غوص في صيغة وظائف السهم والأجسام الموجزة والإرجاع الضمني. تعلم كيف تختلف this اللغوية و arguments و super عن الوظائف العادية وكيف تحاكي المحولات هذا السلوك في أهداف JavaScript القديمة.

الدرس 4 • النطاق الكتلي: دلالات const و let وتحذيرات التحويل

تعلم كيف تختلف let و const عن var وكيف يعمل النطاق الكتلي وما معنى المنطقة الميتة الزمنية. افهم كيف تحاكي المحولات هذه السلوكيات وأين يمكن أن يختلف الكود المولد عن الدلالات الأصلية.

الدرس 5 • وحدات ES: صيغة import/export والفروق عند التحويل إلى CommonJS

دراسة صيغة وحدات ES للاستيراد والتصدير بما في ذلك الأشكال الافتراضية والمسمیة. افهم كيف تحول أدوات التجميع والمحولات ESM إلى CommonJS والفروق التي تؤثر على tree-shaking وسلوك التشغيل.

الدرس 1 • تهيئة Babel CLI لتحويل مجلد src بأكمله إلى dist مع الحفاظ على أسماء الملفات

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

الدرس 2 • ضمان تحميل الملفات المتحولة عبر علامات <script> العادية (تحويل الوحدة إلى IIFE/CommonJS + خيارات التجميع)

استكشف كيف يخرج Babel حزم IIFE أو CommonJS التي تعمل مع علامات script العادية، قارن أدوات التجميع، وتعلم متى تجمع ملفات متعددة مقابل تقديم مخرجات منفصلة لعروض متصفح صغيرة مركزة.

الدرس 3 • تهيئة مخططات المصدر لتصحيح الكود المتحول في devtools المتصفح

قم بتهيئة مخططات المصدر حتى تتمكن من تصحيح ملفات المصدر الأصلية أثناء تشغيل الكود المتحول في المتصفح. تعلم خيارات الخرائط وتبادلات الأداء والتحقق من ربط devtools بشكل صحيح بملفات src.

الدرس 4 • هيكل المشروع: src، dist، وضع index.html وتحميل النصوص بدون type="module"

تعلم كيفية تنظيم مجلدات src و dist ووضع index.html بشكل صحيح وتحميل JavaScript المتحول بعلامات script الكلاسيكية بدلاً من وحدات ES، مما يضمن مسارات متوقعة وتنفيذ سلس في المتصفح لإعدادات العرض البسيطة.

الدرس 1 • تقليل حجم الحزمة: تعبئات انتقائية واستراتيجيات خدمة التعبئة

ستتعلم كيفية الحفاظ على الحزم نحيفة بتحميل التعبئات المطلوبة فقط باستخدام الحقن القائم على الاستخدام والقوائم القائمة على المدخل وخدمات التعبئة الخارجية مع موازنة قابلية التخزين المؤقت والأداء وتغطية المتصفح.

الدرس 2 • التعامل مع واجهات برمجة DOM غير المغطاة بـ Babel (fetch، IntersectionObserver) عبر التعبئات

يغطي هذا القسم واجهات برمجة DOM و Web APIs التي لا يعبئها Babel مثل fetch و IntersectionObserver ويظهر كيفية إضافتها بأمان باستخدام مكتبات التعبئة والتحميل الشرطي واكتشاف الميزات الواعي بالبيئة.

الدرس 3 • متى يتم إصدار مساعدي التشغيل ولما يُستخدم @babel/plugin-transform-runtime

هنا تتعلم متى يصدر Babel مساعدين مضمنين وما المشكلات التي يحلونها وكيف يستبدل @babel/plugin-transform-runtime الاستيرادات لتقليل التكرار وتجنب تلويث العوامل العامة وتحسين التخزين المؤقت عبر نقاط دخول متعددة.

الدرس 4 • تعبئات لواجهات برمجة التطبيقات العامة (Promise، Array.from، Symbol) وتهيئة core-js

يشرح هذا القسم كيفية تعبئة واجهات برمجة التطبيقات العامة الأساسية مثل Promise و Array.from و Symbol باستخدام core-js وكيفية تهيئة Babel لاستهداف بيئات محددة وكيفية تجنب تعريفات التعبئة المكررة أو المتضاربة.

الدرس 1 • استكشاف الأخطاء الشائعة: أخطاء الصيغة بعد التحويل، التعبئات المفقودة، أخطاء تحميل الوحدة

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

الدرس 2 • قائمة تحقق الاختبار اليدوي: البناء، فتح index.html، أخطاء الكونسول، والتحقق من السلوك

تعلم تصميم وتشغيل قائمة تحقق اختبار يدوي عملية لمشروع عرض Babel. ستتحقق من البناءات وتحميل index.html وفحص إخراج الكونسول وتأكيد أن تدفقات المستخدم الأساسية تتصرف كما هو متوقع قبل الإصدار.

الدرس 3 • استخدام devtools لربط الكود المتحول بالمصدر بمخططات المصدر

تعلم استخدام devtools ومخططات المصدر لتصحيح الحزم المتحولة كما لو كنت تخطو عبر المصدر الأصلي. ستُهيئ الخرائط وتضع نقاط توقف وتفحص المتغيرات بفعالية.

الدرس 4 • نهج الاختبار عبر المتصفحات للتحقق من المتصفحات القديمة

افهم كيفية التحقق من مشروع عرض Babel في المتصفحات القديمة والحديثة. ستخطط تغطية المتصفح وتستخدم أدوات للأتمتة وتوثق فجوات التوافق واستراتيجيات التدهور الرشيق.