変更セットと GitHub アクションを使用して NPM パッケージを自動公開する

このガイドでは、PNPM と変更セット cli を使用して、「npm-package-template-changesets」という単純な NPM typescript パッケージを公開します。自動化部分は、ライブラリに変更を加えるときに発生します。ボットは承認を必要とするプル リクエストを開き、新しいバージョンに含まれるすべての変更と変更ログが含まれます。
このパッケージは、古いバージョンの CJS と ESM をサポートします。

1. PNPM をインストールし、新しいプロジェクトを作成します

npm install -g pnpm

pnpm init

これにより、単一の package.json ファイルが生成され、name プロパティがまだ存在しないパッケージ名に変更されます。

また、GitHub 上に新しいリポジトリを作成し、その URL を repository.url プロパティに追加します。これは来歴にとって重要です:

{
  "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. 依存関係をインストールする

pnpm add tsup typescript @changesets/cli -D

• tsup: typescript コードの構築に使用されます。この dep の使用法はユースケースによって異なります
• typescript: 必要な依存関係
• @changesets/cli: バージョン管理と公開に使用されます

3. tsconfig ファイルを生成する

このケースでは、2 つの tsconfig ファイル、tsconfig.build.json と tsconfig.json を使用します。それらの違いは、tsconfig.build.json はプロパティ複合: true と rootDir: "./src" を使用するため、ビルドでは src ディレクトリ内のファイルのみが参照されるのに対し、開発では tsconfig.json がこれらの設定をオーバーライドし、 rootDir": "." を使用して、ルート レベルで設定ファイルの TypeScript を有効にします。

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. 公開するファイルを追加します。

この例では、src ディレクトリに 1 つのindex.ts ファイルを追加します。
インデックス.ts

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

5. package.json を更新します。

スクリプトの追加:

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

NPM 構成を追加します:

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

エントリポイントを追加し、package.json に「config」と入力します。

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

require プロパティと main プロパティは、ESM よりも古い CommonJS を使用するエンド ユーザー向けです。 ESM では最新の構文が可能になり、CJS に比べて多くの利点が得られますが、このガイドでは両方をサポートします。 ESM の場​​合、プロパティ モジュールとインポートが適用されます。

.cjs と .mjs の両方の拡張子のファイルをビルドするには、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ワークフローファイルの追加

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

GITHUB_TOKEN はデフォルトで Github のリポジトリにすでに存在しており、NPM_TOKEN 値は公開権限を持って npm で生成する必要があります。

次に、Github で新しいリポジトリを作成し、[設定] に移動してシークレットに追加します。

「アクション」> にも移動します。一般

このオプションを有効にしないと、チェンジセットは PR を開けなくなります:

7. 最初の変更セットを生成する

• 変更セットの初期化:

npm install -g pnpm

• 最初のコミットを作成します。

pnpm init

• チェンジセットを実行します:

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

「HEAD が main から分岐した場所が見つかりませんでした」というエラーが表示された場合は、.changeset/config.json でベース ブランチを構成します

いくつかのオプションを求められます。この例では、パッチを選択します:

• 新しいファイルが .changesets フォルダーに作成されました。この最初のリリースでは、別のファイルを追加しないように、それらを前のコミットに修正する必要があります。

pnpm add tsup typescript @changesets/cli -D

8. リポジトリにプッシュする

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

CI が完了したら、リポジトリの [Pull Requests] タブを確認します。開いているタブが 1 つあるはずです

レビューしてマージします。

9. NPM でパッケージを確認します

以上が変更セットと GitHub アクションを使用して NPM パッケージを自動公開するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。