CI/CD لمشاريع TypeScript: GitHub Actions من الألف إلى الياء

مقدمة: لماذا يعتبر CI/CD بالغ الأهمية لمشاريع TypeScript

التطوير باستخدام TypeScript هو أداة قوية، ولكن بدون أتمتة عمليات البناء والاختبار والنشر، فإنك تخاطر بمواجهة أخطاء بشرية، وإهدار الوقت، وعدم استقرار بيئة الإنتاج. CI/CD (التكامل المستمر / النشر المستمر) هو فلسفة ومجموعة من الممارسات التي تتيح أتمتة هذه العمليات. GitHub Actions هي أداة مدمجة في GitHub، وهي مثالية لمشاريع TypeScript، حيث توفر خطوط أنابيب مرنة وقابلة للتوسع ومجانية (للمستودعات العامة).

في هذه المقالة، سننتقل من الصفر إلى خط أنابيب كامل: سنقوم بإعداد فحص الكود (Linting)، والاختبار، والبناء، والنشر التلقائي لتطبيق TypeScript. ستتعلم كيفية كتابة ملفات YAML فعالة، وتحسين وقت التنفيذ، وتجنب الأخطاء الشائعة.

الجزء الرئيسي: إنشاء خط أنابيب CI/CD خطوة بخطوة

1. أساسيات GitHub Actions: هيكل سير العمل

سير العمل (Workflow) في GitHub Actions هو مجموعة من الخطوات مجمعة في مهام (Jobs). يتم وصفه في ملف YAML، يتم تخزينه في مجلد .github/workflows/ في مستودعك. الهيكل الأساسي يبدو كالتالي:

name: CI/CD Pipeline for TypeScript\n\non:\n  push:\n    branches: [ main, develop ]\n  pull_request:\n    branches: [ main ]\n\njobs:\n  build-and-test:\n    runs-on: ubuntu-latest\n\n    steps:\n      - uses: actions/checkout@v4\n      - name: Setup Node.js\n        uses: actions/setup-node@v4\n        with:\n          node-version: '20'\n          cache: 'npm'\n      - run: npm ci\n      - run: npm run build\n      - run: npm test

العناصر الأساسية:

\n
• on: — المحفزات (push, pull_request).
\n
• jobs: — قائمة المهام التي يتم تنفيذها بالتوازي أو بالتسلسل.
\n
• runs-on: — نظام التشغيل للتنفيذ (عادةً ubuntu-latest).
\n
• steps: — تسلسل الأوامر. uses يستدعي إجراءات جاهزة (actions)، بينما run ينفذ أوامر shell.
\n
• npm ci — تثبيت نظيف وسريع للتبعيات بناءً على package-lock.json.
\n

يوفر خط الأنابيب الأدنى هذا بالفعل CI أساسي: مع كل push أو PR، سيتم التحقق من بناء الكود واختباراته.

2. تكوين متقدم: فحص الكود (Linting)، التنسيق (Formatting)، ومصفوفة الإصدارات

بالنسبة لمشاريع TypeScript، من الضروري الحفاظ على نمط كود موحد. سنضيف فحصًا باستخدام linter (eslint) ومُنسق (prettier). سنستخدم أيضًا مصفوفة الاستراتيجيات للاختبار على إصدارات متعددة من Node.js.

jobs:\n  lint-and-format:\n    runs-on: ubuntu-latest\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with:\n          node-version: '20'\n          cache: 'npm'\n      - run: npm ci\n      - run: npm run lint\n      - run: npm run format:check\n\n  test:\n    needs: lint-and-format\n    runs-on: ubuntu-latest\n    strategy:\n      matrix:\n        node-version: [18, 20, 22]\n    steps:\n      - uses: actions/checkout@v4\n      - uses: actions/setup-node@v4\n        with:\n          node-version: ${{ matrix.node-version }}\n          cache: 'npm'\n      - run: npm ci\n      - run: npm test

نقاط مهمة:

\n
• needs: — يحدد ترتيب تنفيذ المهام (فحص الكود أولاً، ثم الاختبارات).
• strategy.matrix — يسمح بتشغيل نفس المهمة بمعاملات مختلفة (إصدارات Node.js).
• التخزين المؤقت (cache: 'npm') يسرع تثبيت التبعيات.
• أضف إلى package.json النصوص البرمجية: "lint": "eslint src/" و "format:check": "prettier --check src/".

الآن، لا يقوم خط الأنابيب الخاص بك فقط بفحص