Veröffentlichen Sie NPM-Pakete automatisch mithilfe von Änderungssätzen und GitHub-Aktionen

Für dieses Handbuch veröffentlichen wir ein einfaches NPM-Typoskriptpaket mit dem Namen „npm-package-template-changesets“ unter Verwendung von PNPM und der Changesets-CLI. Der Automatisierungsteil kommt, wenn wir Änderungen an der Bibliothek vornehmen. Ein Bot öffnet einen Pull-Request, der genehmigt werden muss und alle Änderungen enthält, die in die neue Version aufgenommen werden sollen, sowie das Änderungsprotokoll.
Das Paket unterstützt CJS für ältere Versionen und ESM.

1. Installieren Sie PNPM und erstellen Sie ein neues Projekt

npm install -g pnpm

pnpm init

Dadurch wird eine einzelne package.json-Datei generiert. Ändern Sie die Namenseigenschaft in einen Paketnamen, der noch nicht existiert:

Erstellen Sie außerdem ein neues Repository auf GitHub und fügen Sie die URL zur Eigenschaft „repository.url“ hinzu. Dies ist wichtig für die Herkunft:

{
  "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. Abhängigkeiten installieren

pnpm add tsup typescript @changesets/cli -D

• tsup: Wird zum Erstellen des Typoskript-Codes verwendet. Die Verwendung dieses Dep hängt von Ihrem Anwendungsfall ab
• Typoskript: notwendige Abhängigkeit
• @changesets/cli: wird für die Versionierung und Veröffentlichung verwendet

3. Generieren Sie tsconfig-Dateien

In diesem Fall verwenden wir zwei tsconfig-Dateien: tsconfig.build.json und tsconfig.json. Der Unterschied zwischen ihnen besteht darin, dass tsconfig.build.json die Eigenschaften „composite: true“ und „rootDir: „./src“ verwendet, sodass der Build nur Dateien im src-Verzeichnis betrachtet, während tsconfig.json in der Entwicklung diese Einstellungen und überschreibt Verwenden Sie „rootDir“: „.“ um TypeScript für Konfigurationsdateien auf der Root-Ebene zu aktivieren.

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. Zu veröffentlichende Dateien hinzufügen:

Für dieses Beispiel fügen wir eine einzelne index.ts-Datei im src-Verzeichnis hinzu:
index.ts

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

5. Paket.json aktualisieren:

Skripte hinzufügen:

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

NPM-Konfiguration hinzufügen:

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

Einstiegspunkte hinzufügen und config in package.json eingeben:

  "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",

Die Eigenschaften „require“ und „main“ gelten für Endbenutzer, die CommonJS verwenden, das älter als ESM ist. ESM ermöglicht eine moderne Syntax und viele Vorteile gegenüber CJS, aber wir werden in diesem Leitfaden beides unterstützen. Für ESM gelten das Eigenschaftenmodul und der Import.

Um Dateien für die Erweiterungen .cjs und .mjs zu erstellen, können wir 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. Github-Workflow-Datei hinzufügen

.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 }}

Der GITHUB_TOKEN ist standardmäßig bereits im Github-Repository vorhanden, der NPM_TOKEN-Wert muss in npm mit Veröffentlichungsberechtigung generiert werden:

Dann erstellen Sie ein neues Repo auf Github, gehen Sie zu Einstellungen und fügen Sie es zu den Geheimnissen hinzu:

Gehen Sie auch zu Aktionen > Allgemein

und aktivieren Sie diese Option, sonst können Changesets keine PRs öffnen:

7. Generieren Sie den ersten Änderungssatz

• Änderungssätze initialisieren:

npm install -g pnpm

• Erstellen Sie ein erstes Commit:

pnpm init

• Änderungssatz ausführen:

{
  "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"
}

Wenn Sie die Fehlermeldung „Es konnte nicht gefunden werden, wo HEAD vom Hauptzweig abweicht“ erhalten, konfigurieren Sie Ihren Basiszweig in .changeset/config.json

Sie werden zu einigen Optionen aufgefordert. In diesem Beispiel wählen wir Patch:

• Neue Dateien wurden im Ordner .changesets erstellt. Für diese erste Version sollten wir sie an den vorherigen Commit anpassen, damit wir keine weitere hinzufügen:

pnpm add tsup typescript @changesets/cli -D

8. Pushen Sie in das Repository

{
    "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"
    ],
}

Nachdem das CI fertig ist, überprüfen Sie die Registerkarte „Pull Requests“ im Repo. Dort sollte eine geöffnet sein

Überprüfen Sie es und führen Sie es zusammen.

9. Überprüfen Sie Ihr Paket auf NPM

Das obige ist der detaillierte Inhalt vonVeröffentlichen Sie NPM-Pakete automatisch mithilfe von Änderungssätzen und GitHub-Aktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!