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

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

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

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

ما هو CI/CD ولماذا يحتاجه مطور TypeScript؟

CI/CD هي منهجية تجمع بين ممارستين:

التكامل المستمر (CI) - البناء والاختبار التلقائي للكود مع كل دفع إلى المستودع. هذا يسمح باكتشاف الأخطاء والصراعات بسرعة.
النشر/التسليم المستمر (CD) - النشر التلقائي للتطبيق على الخادم أو السحابة بعد اجتياز الاختبارات بنجاح.

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

الخطوة 1: Workflow أساسي لمشروع TypeScript

لنبدأ بشيء بسيط - سننشئ ملف .github/workflows/ci.yml في جذر مشروعك. سيتم تشغيل هذا workflow مع كل دفع إلى الفرع main أو عند إنشاء Pull Request.

name: CI Pipeline

on:  push:    branches: [ main ]  pull_request:    branches: [ main ]

jobs:  build-and-test:    runs-on: ubuntu-latest

    strategy:      matrix:        node-version: [18.x, 20.x]

    steps:      - uses: actions/checkout@v4      - name: Use Node.js ${{ matrix.node-version }}        uses: actions/setup-node@v4        with:          node-version: ${{ matrix.node-version }}          cache: 'npm'      - run: npm ci      - run: npm run build --if-present      - run: npm test      - run: npm run lint --if-present

دعنا نشرح النقاط الرئيسية:

actions/checkout - يستنسخ المستودع إلى المشغل (runner).
actions/setup-node - يقوم بتثبيت Node.js مع تخزين مؤقت للتبعيات.
npm ci - تثبيت نظيف للتبعيات (أسرع من npm install).
npm run build - ترجمة TypeScript إلى JavaScript (تأكد من وجود سكريبت build في package.json).
npm test - تشغيل الاختبارات (مثل Jest).

مصفوفة strategy.matrix تسمح باختبار الكود على إصدارات متعددة من Node.js في وقت واحد - مما يزيد الثقة في التوافق.

الخطوة 2: إضافة الفحص اللغوي (Linting) والتنسيق (Formatting)

جودة الكود هي جزء مهم من CI. سنضيف خطوات لـ ESLint و Prettier. تأكد من تثبيتهما في المشروع:

npm install --save-dev eslint prettier eslint-config-prettier

سنكمل workflow الخاص بنا بخطوات جديدة:

      - run: npm run lint      - run: npm run format:check

يجب أن تكون هناك سكريبتات مقابلة في package.json:

{  "scripts": {    "lint": "eslint src --ext .ts",    "format:check": "prettier --check \\"src/**/*.ts\\"",    "format": "prettier --write \\"src/**/*.ts\\""  }}

الآن مع كل دفع، سيقوم GitHub Actions بفحص ليس فقط الأنواع والاختبارات، بل أيضًا أسلوب الكود. إذا وجد المدقق اللغوي (linter) أخطاء - سيفشل خط الأنابيب، وسيتلقى المطور إشعارًا.