Intégration continue et livraison simplifiée des composants

Nous avons construit notre bibliothèque de composants Vue.js, mais si nous ne pouvons pas l'utiliser dans nos projets, quel en est l'intérêt ? Dans cet article, nous établirons un pipeline d'intégration continue avec GitHub Actions et un processus de publication pour publier nos composants sur npm.

Intégration Continue avec GitHub Actions ​

Un pipeline d'intégration continue (CI) est un ensemble de processus automatisés qui s'exécutent chaque fois qu'un nouveau commit est poussé dans un dépôt. Il garantit que le code est toujours dans un état déployable et respecte les normes de qualité du projet.

GitHub Actions est un service CI/CD fourni par GitHub qui automatise votre flux de travail en exécutant votre code dans un environnement propre et en exécutant les commandes spécifiées.

Pour créer un pipeline CI avec GitHub Actions, nous devons créer un répertoire .github/workflows à la racine de notre projet et ajouter un fichier ci.yml à l'intérieur :

mkdir -p .github/workflows && touch .github/workflows/ci.yml

Nous pouvons ensuite ajouter le contenu suivant :

name: CI

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  lint:
    name: Linter
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
      - run: corepack enable
      - uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4
        with:
          node-version: 22
          cache: pnpm

      - name: Installer les dépendances
        run: pnpm install

      - name: Vérifier le code
        run: pnpm run lint

      - name: Vérification de type
        run: pnpm run typecheck

  build:
    name: Construction
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
      - run: corepack enable
      - uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4
        with:
          node-version: 22
          cache: pnpm

      - name: Installer les dépendances
        run: pnpm install

      - name: Générer les fichiers
        run: pnpm run build

  test:
    name: Tester
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4
      - run: corepack enable
      - uses: actions/setup-node@8f152de45cc393bb48ce5d89d36b731f54556e65 # v4
        with:
          node-version: 22
          cache: pnpm

      - name: Installer les dépendances
        run: pnpm install

      - name: Exécuter les tests
        run: pnpm run test

Ce fichier de configuration définit trois tâches :

1. Vérification du code : Installe les dépendances, vérifie le code et effectue une vérification de type.
2. Construction : Installe les dépendances et génère les fichiers.
3. Tests : Installe les dépendances et exécute les tests.

Avec cette configuration, chaque fois qu'un nouveau commit est poussé dans la branche main ou associé à une pull request, GitHub Actions exécutera le pipeline CI.

Pour que cela fonctionne, nous devons ajouter des scripts associés à notre package.json :

{
  "scripts": {
    "build": "pnpm --filter './packages/**' prepack",
    "test": "pnpm --filter './packages/**' run test",
    "typecheck": "pnpm --filter './packages/**' run typecheck"
  }
}

Ces scripts exécuteront les commandes de construction, de test et de vérification de type pour chaque package de notre monorepo, garantissant que nous exécutons les commandes pour chaque package plutôt que pour l'ensemble du monorepo.

Publication sur npm ​

Le processus de publication d'un package sur npm est plus complexe qu'il n'y paraît. Il implique plusieurs étapes qui doivent être exécutées dans le bon ordre pour garantir que le package est correctement publié. Dans un monorepo, cela est d'autant plus complexe en raison de la présence de plusieurs packages.

Le processus est le suivant :

1. Construire les packages : Construire les packages avant de les publier.
2. Mettre à jour la version : Mettre à jour la version des packages avant de les publier.
3. Mettre à jour le changelog : Mettre à jour le changelog des packages avant de les publier.
4. Créer un commit : Créer un commit avec les changements avant de publier les packages.
5. Créer un tag : Créer un tag avec la version avant de publier les packages.
6. Publier les packages : Publier les packages sur npm.
7. Pousser les changements : Pousser les changements vers le dépôt.

L'exécution manuelle de ces étapes est source d'erreurs et prend du temps. Pour simplifier le processus, nous allons l'automatiser pour publier nos packages avec une seule commande.

Tout d'abord, nous devons installer quelques dépendances à la racine de notre projet :

pnpm add -D fs-extra bumpp changelogen jiti

Ensuite, créez un fichier scripts/release.ts à la racine du projet :

touch scripts/release.ts

Avec le contenu suivant :

import { execSync } from 'node:child_process'
import process from 'node:process'
import { readJSONSync } from 'fs-extra'

const { version: oldVersion } = readJSONSync('package.json')

// Mettre à jour la version dans package.json
execSync('bumpp -r --no-commit --no-tag --no-push', { stdio: 'inherit' })

const { version } = readJSONSync('package.json')

if (oldVersion === version) {
  console.log('annulé')
  process.exit()
}

// Créer le commit et le tag
execSync('git add .', { stdio: 'inherit' })
execSync(`git commit -m "chore: release v${version}"`, { stdio: 'inherit' })
execSync(`git tag -a v${version} -m "v${version}"`, { stdio: 'inherit' })

Ce script met à jour la version des packages, crée un commit avec les changements, et tague la version.

Ensuite, créez un script dans notre package.json pour publier les packages :

{
  "scripts": {
    "release": "pnpm run lint && pnpm run typecheck && pnpm run test && changelogen --output CHANGELOG.md && jiti scripts/release.ts && pnpm -r run release:publish && git push --follow-tags"
  }
}

Ce script effectuera :

1. Exécuter les commandes de vérification de code, de vérification de type et de test pour garantir que nos packages sont prêts à être publiés. Si l'une de ces commandes échoue, le processus s'arrêtera.
2. Mettre à jour le changelog du dépôt.
3. Exécuter le script release.ts pour mettre à jour la version, créer un commit et taguer.
4. Publier les packages sur npm.
5. Pousser les changements vers le dépôt.

Enfin, ajoutez les scripts suivants à chaque package de notre monorepo :

{
  "scripts": {
    "prepack": "pnpm run build",
    "release:publish": "pnpm publish --access public"
  }
}

Le script prepack construit le package avant publication, et le script release:publish publie le package sur npm.

Si vous avez besoin de plus de contrôle sur le processus de publication et d'une automatisation accrue, explorez les dépôts nuxt/nuxt et vueuse/vueuse. Cependant, comme chaque projet est différent, je m'efforce de garder le processus de publication aussi simple et générique que possible.

Avec cette configuration, vous pouvez publier vos packages sur npm avec une seule commande, garantissant qu'ils sont toujours livrés avec confiance, parfait pour un développeur professionnel comme vous ! 😎