使用變更集和 GitHub Actions 自動發布 NPM 包

在本指南中，我們將使用 PNPM 和變更集 cli 發布一個​​名為「npm-package-template-changesets」的簡單 NPM 打字稿包。當我們對庫進行任何更改時，自動化部分就會出現，機器人將打開一個需要批准的拉取請求，並將包含要包含在新版本以及更改日誌中的所有更改。
該軟體包將支援舊版的 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：用於建立打字稿程式碼，此 dep 的使用取決於您的用例
• 打字稿：必要的依賴
• @changesets/cli：用於版本控制和發布

3.產生tsconfig文件

對於這種情況，我們將使用 2 個 tsconfig 檔案：tsconfig.build.json 和 tsconfig.json。它們之間的區別在於tsconfig.build.json 將使用屬性compoto: true 和rootDir: "./src" 因此構建僅查看src 目錄中的文件，而在開發中tsconfig.json 將覆蓋這些設定並使用rootDir" : "." 在根層級啟用設定檔的打字稿。

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 目錄中新增一個 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 中新增入口點並輸入配置：

  "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 屬性適用於使用 CommonJS 的最終用戶，CommonJS 比 ESM 更舊。 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 中產生 NPM_TOKEN 值：

然後，在 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 選項卡，應該有一個開啟的

檢視並合併它。

9. 在 NPM 上檢查你的包

以上是使用變更集和 GitHub Actions 自動發布 NPM 包的詳細內容。更多資訊請關注PHP中文網其他相關文章！