Advanced

Implémenter la gestion de versions avec Changeset et Claude Code

Apprenez à implémenter la gestion de versions basée sur Changeset et la génération automatique de CHANGELOG avec Claude Code. Couvre le support monorepo, l'intégration CI et la conception du flux de release.

Réaliser une gestion de versions systématique avec Changeset

Changeset est un outil qui automatise la gestion des versions de packages et la génération de CHANGELOG. Il est particulièrement puissant dans les environnements monorepo, permettant de construire un flux de release cohérent qui prend en compte les dépendances entre packages. Claude Code offre un support précis, de la configuration à l’intégration CI.

Configuration initiale

Demandons à Claude Code de faire la configuration.

> Introduis Changeset dans le projet monorepo.
> Inclus la release automatique via GitHub Actions et la génération de CHANGELOG.
# Installation
npm install -D @changesets/cli @changesets/changelog-github

# Initialisation
npx changeset init
// .changeset/config.json
{
  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
  "changelog": [
    "@changesets/changelog-github",
    { "repo": "your-org/your-repo" }
  ],
  "commit": false,
  "fixed": [],
  "linked": [],
  "access": "public",
  "baseBranch": "main",
  "updateInternalDependencies": "patch",
  "ignore": [],
  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
    "onlyUpdatePeerDependentsWhenOutOfRange": true
  }
}

Création d’un Changeset

Voici comment créer un fichier Changeset décrivant les modifications.

# Créer un Changeset de manière interactive
npx changeset
<!-- .changeset/happy-dogs-fly.md -->
---
"@myapp/ui": minor
"@myapp/utils": patch
---

Ajout du variant « outline » au composant bouton.
Amélioration des définitions de types des fonctions utilitaires.

Exemple de prompt pour demander à Claude Code de créer un Changeset.

> Crée un Changeset pour les modifications actuelles.
> Un changement minor pour @myapp/ui, avec une description.

Configuration des scripts npm

// package.json
{
  "scripts": {
    "changeset": "changeset",
    "changeset:status": "changeset status",
    "version": "changeset version",
    "release": "changeset publish",
    "prerelease": "npm run build"
  }
}

Release automatique avec GitHub Actions

Un workflow qui crée automatiquement une PR de mise à jour de version lors du merge d’une PR, puis publie sur npm après le merge.

# .github/workflows/release.yml
name: Release

on:
  push:
    branches: [main]

concurrency: ${{ github.workflow }}-${{ github.ref }}

permissions:
  contents: write
  pull-requests: write
  packages: write

jobs:
  release:
    name: Release
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          registry-url: "https://registry.npmjs.org"

      - run: npm ci
      - run: npm run build

      - name: Create Release Pull Request or Publish
        id: changesets
        uses: changesets/action@v1
        with:
          version: npm run version
          publish: npm run release
          title: "chore: mise à jour de version"
          commit: "chore: mise à jour de version"
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

Configuration avancée pour monorepo

Modèles de configuration pour gérer la coordination entre packages.

// .changeset/config.json
{
  "changelog": [
    "@changesets/changelog-github",
    { "repo": "your-org/your-repo" }
  ],
  "commit": false,
  "fixed": [
    ["@myapp/core", "@myapp/cli"]
  ],
  "linked": [
    ["@myapp/ui", "@myapp/theme"]
  ],
  "access": "public",
  "baseBranch": "main",
  "updateInternalDependencies": "patch"
}
  • fixed - Groupe de packages qui ont toujours la même version
  • linked - Groupe de packages dont les versions évoluent de manière coordonnée

Gestion des pré-releases

Flux de release pour les versions bêta et RC.

# Entrer en mode pré-release
npx changeset pre enter beta

# Ajouter un Changeset
npx changeset

# Appliquer la version pré-release
npx changeset version
# => 1.0.0 -> 1.1.0-beta.0

# Publier
npx changeset publish

# Quitter le mode pré-release
npx changeset pre exit

Validation des Changesets

Un workflow pour vérifier en CI que la PR contient un Changeset.

# .github/workflows/changeset-check.yml
name: Changeset Check

on:
  pull_request:
    branches: [main]

jobs:
  changeset-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - name: Check for changeset
        run: npx changeset status --since=origin/main

Format de CHANGELOG personnalisé

Modèle pour personnaliser la sortie du CHANGELOG.

// .changeset/changelog-config.ts
import type { ChangelogFunctions } from "@changesets/types";

const changelogFunctions: ChangelogFunctions = {
  getDependencyReleaseLine: async () => "",
  getReleaseLine: async (changeset, type) => {
    const [firstLine, ...rest] = changeset.summary
      .split("\n")
      .map((l) => l.trimEnd());

    const date = new Date().toISOString().slice(0, 10);

    let returnVal = `- ${firstLine}`;

    if (rest.length > 0) {
      returnVal += `\n${rest.map((l) => `  ${l}`).join("\n")}`;
    }

    return returnVal;
  },
};

export default changelogFunctions;

Conclusion

Changeset est un outil puissant pour automatiser la gestion systématique des versions et les flux de release. En utilisant Claude Code, vous pouvez construire efficacement de la configuration initiale à l’intégration CI et au support monorepo.

Pour les méthodes de gestion monorepo, consultez le guide de gestion monorepo, et pour la conception de pipelines CI/CD, consultez le guide de configuration CI/CD. Consultez également la documentation officielle de Changesets.

#Claude Code #Changeset #version management #monorepo #release