Publier automatiquement les packages NPM à l'aide des ensembles de modifications et des actions GitHub

Pour ce guide, nous publierons un simple package dactylographié NPM appelé "npm-package-template-changesets" en utilisant PNPM et le cli changesets. La partie automatisation intervient lorsque nous apportons des modifications à la bibliothèque, un bot ouvrira une pull request qui nécessitera une approbation et contiendra toutes les modifications à inclure dans la nouvelle version ainsi que le journal des modifications.
Le package prendra en charge CJS pour les anciennes versions et ESM.

1. Installez PNPM et créez un nouveau projet

npm install -g pnpm

pnpm init

Cela générera un seul fichier package.json, changera la propriété name en un nom de package qui n'existe pas encore :

Créez également un nouveau dépôt sur GitHub et ajoutez l'url à la propriété deposit.url, c'est important pour la provenance :

{
  "name": "npm-package-template-changesets",
  "repository": {
    "url": "https://github.com/sebastianwd/npm-package-template-changesets"
  },
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "license": "ISC"
}

2. Installer les dépendances

pnpm add tsup typescript @changesets/cli -D

• tsup : utilisé pour créer le code dactylographié, l'utilisation de cette dépendance dépendra de votre cas d'utilisation
• dactylographié : dépendance nécessaire
• @changesets/cli : utilisé pour le versionnage et la publication

3. Générez des fichiers tsconfig

Pour ce cas nous utiliserons 2 fichiers tsconfig : tsconfig.build.json et tsconfig.json. La différence entre eux est que tsconfig.build.json utilisera les propriétés composite : true et rootDir : "./src" donc la construction ne regarde que les fichiers dans le répertoire src, tandis qu'en développement, le tsconfig.json remplacera ces paramètres et utilisez rootDir": "." pour activer le typescript pour les fichiers de configuration au niveau racine.

tsconfig.build.json

{
    "compilerOptions": {
        /* Base Options: */
        "rootDir": "./src",
        "esModuleInterop": true,
        "skipLibCheck": true,
        "target": "es2022",
        "allowJs": true,
        "resolveJsonModule": true,
        "moduleDetection": "force",
        "isolatedModules": true,
        "verbatimModuleSyntax": true,
        /* Strictness */
        "strict": true,
        "noUncheckedIndexedAccess": true,
        "noImplicitOverride": true,
        "module": "preserve",
        "outDir": "dist",
        "sourceMap": true,
        "declaration": true,
        "composite": true,
        "noEmit": true,
        /* If your code doesn't run in the DOM: */
        "lib": [
            "es2022"
        ],
    },
    "include": [
        "src"
    ],
}

tsconfig.json :

{
    "extends": "./tsconfig.build.json",
    "compilerOptions": {
        "composite": false,
        "rootDir": "."
    }
}

4. Ajoutez les fichiers à publier :

Pour cet exemple, nous ajouterons un seul fichier index.ts dans le répertoire src :
index.ts

export const hello = () => "hello world";

5. Mettez à jour package.json :

Ajouter des scripts :

"scripts": {
 "build": "tsup src",
 "release": "changeset",
 "ci:publish": "pnpm build && changeset publish --access public"
}

Ajouter la configuration NPM :

"publishConfig": {
    "provenance": true,
    "access": "public"
}

Ajoutez des points d'entrée et tapez config dans package.json :

  "type": "module",
  "exports": {
    ".": {
      "types": "./dist/index.d.ts",
      "import": "./dist/index.mjs",
      "require": "./dist/index.cjs"
    }
  },
  "main": "dist/index.cjs",
  "module": "dist/index.mjs",
  "types": "dist/index.d.ts",

Les propriétés require et main sont destinées aux utilisateurs finaux utilisant CommonJS, qui est plus ancien qu'ESM. ESM permet une syntaxe moderne et de nombreux avantages par rapport à CJS, mais nous prendrons en charge les deux pour ce guide. Pour ESM, le module de propriétés et l'importation sont ceux qui s'appliquent.

Pour créer des fichiers pour les extensions .cjs et .mjs, nous pouvons utiliser tsup :

tsup.config.ts

import { defineConfig } from "tsup";

export default defineConfig({
  entry: ["src/index.ts"],
  splitting: false,
  clean: true,
  dts: true,
  format: ["cjs", "esm"],
  outExtension({ format }) {
    return {
      js: format === "cjs" ? ".cjs" : ".mjs",
    };
  },
});

6. Ajout du fichier de workflow Github

.github/workflows/publish.yml

name: Publish
on:
  push:
    branches:
      - master

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

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

jobs:
  publish:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
        with:
          version: 9
      - uses: actions/setup-node@v4
        with:
          node-version: 20.x
          cache: "pnpm"
          registry-url: "https://registry.npmjs.org"

      - run: pnpm install --frozen-lockfile
      - name: Create Release Pull Request or Publish
        id: changesets
        uses: changesets/action@v1
        with:
          publish: pnpm run ci:publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

Le GITHUB_TOKEN est déjà présent dans le dépôt de Github par défaut, la valeur NPM_TOKEN doit être générée en npm avec l'autorisation de publication :

Ensuite, créez un nouveau dépôt sur Github, allez dans Paramètres et ajoutez-le aux secrets :

Allez également dans Actions > Général

et activez cette option, sinon les ensembles de modifications ne pourront pas ouvrir les PR :

7. Générer le premier ensemble de modifications

• Initier les modifications :

npm install -g pnpm

• Créez un premier commit :

pnpm init

• Exécuter l'ensemble de modifications :

{
  "name": "npm-package-template-changesets",
  "repository": {
    "url": "https://github.com/sebastianwd/npm-package-template-changesets"
  },
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "license": "ISC"
}

Si vous obtenez une erreur concernant « Impossible de trouver où HEAD a divergé de main », configurez votre branche de base dans .changeset/config.json

Quelques options vous seront proposées, pour cet exemple, nous choisirons le patch :

• De nouveaux fichiers ont été créés dans le dossier .changesets, pour cette première version, nous devrions les modifier par rapport au commit précédent afin de ne pas en ajouter un autre :

pnpm add tsup typescript @changesets/cli -D

8. Poussez vers le référentiel

{
    "compilerOptions": {
        /* Base Options: */
        "rootDir": "./src",
        "esModuleInterop": true,
        "skipLibCheck": true,
        "target": "es2022",
        "allowJs": true,
        "resolveJsonModule": true,
        "moduleDetection": "force",
        "isolatedModules": true,
        "verbatimModuleSyntax": true,
        /* Strictness */
        "strict": true,
        "noUncheckedIndexedAccess": true,
        "noImplicitOverride": true,
        "module": "preserve",
        "outDir": "dist",
        "sourceMap": true,
        "declaration": true,
        "composite": true,
        "noEmit": true,
        /* If your code doesn't run in the DOM: */
        "lib": [
            "es2022"
        ],
    },
    "include": [
        "src"
    ],
}

Une fois le CI terminé, vérifiez l'onglet Pull Requests sur le dépôt, il devrait y en avoir un ouvert

Examinez-le et fusionnez-le.

9. Vérifiez votre colis sur NPM

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!