在本指南中，我們將使用 PNPM 和變更集 cli 發(fā)布一個(gè)名為“npm-package-template-changesets”的簡(jiǎn)單 NPM 打字稿包。當(dāng)我們對(duì)庫(kù)進(jìn)行任何更改時(shí)，自動(dòng)化部分就會(huì)出現(xiàn)，機(jī)器人將打開(kāi)一個(gè)需要批準(zhǔn)的拉取請(qǐng)求，并將包含要包含在新版本以及更改日志中的所有更改。
該軟件包將支持舊版本的 CJS 和 ESM。

1.安裝PNPM并創(chuàng)建一個(gè)新項(xiàng)目

npm install -g pnpm

pnpm init

這將生成一個(gè) package.json 文件，將 name 屬性更改為尚不存在的包名稱：

同時(shí)在 GitHub 上創(chuàng)建一個(gè)新的存儲(chǔ)庫(kù)并將 url 添加到repository.url 屬性中，這對(duì)于出處很重要：

{
  "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：用于構(gòu)建打字稿代碼，此 dep 的使用取決于您的用例
• 打字稿：必要的依賴
• @changesets/cli：用于版本控制和發(fā)布

3.生成tsconfig文件

對(duì)于這種情況，我們將使用 2 個(gè) tsconfig 文件：tsconfig.build.json 和 tsconfig.json。它們之間的區(qū)別在于 tsconfig.build.json 將使用屬性 compoto: true 和 rootDir: "./src" 因此構(gòu)建僅查看 src 目錄中的文件，而在開(kāi)發(fā)中 tsconfig.json 將覆蓋這些設(shè)置并使用 rootDir": "." 在根級(jí)別啟用配置文件的打字稿。

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.添加要發(fā)布的文件：

對(duì)于此示例，我們將在 src 目錄中添加一個(gè) 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 中添加入口點(diǎn)并輸入配置：

  "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 支持現(xiàn)代語(yǔ)法并比 CJS 有許多優(yōu)勢(shì)，但我們將在本指南中支持這兩者。對(duì)于 ESM，屬性模塊和導(dǎo)入是適用的。

要構(gòu)建 .cjs 和 .mjs 擴(kuò)展名的文件，我們可以使用 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 }}

默認(rèn)情況下，GITHUB_TOKEN 已存在于 Github 存儲(chǔ)庫(kù)中，必須在具有發(fā)布權(quán)限的 npm 中生成 NPM_TOKEN 值：

然后，在 Github 上創(chuàng)建一個(gè)新的存儲(chǔ)庫(kù)，轉(zhuǎn)到“設(shè)置”并將其添加到秘密中：

另請(qǐng)轉(zhuǎn)到“操作”>一般

并啟用此選項(xiàng)，否則變更集將無(wú)法打開(kāi) PR：

7. 生成第一個(gè)變更集

• 初始化變更集：

npm install -g pnpm

• 創(chuàng)建第一個(gè)提交：

pnpm init

• 運(yùn)行變更集：

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

如果您收到有關(guān)“無(wú)法找到 HEAD 從 main 分支的位置”的錯(cuò)誤，請(qǐng)?jiān)?.changeset/config.json 中配置您的基礎(chǔ)分支

系統(tǒng)會(huì)提示您一些選項(xiàng)，在本例中我們將選擇補(bǔ)丁：

• 在 .changesets 文件夾中創(chuàng)建了新文件，對(duì)于第一個(gè)版本，我們應(yīng)該將它們修改為之前的提交，這樣我們就不會(huì)添加另一個(gè)文件：

pnpm add tsup typescript @changesets/cli -D

8.推送到倉(cāng)庫(kù)

{
    "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 完成后，檢查存儲(chǔ)庫(kù)上的 Pull Requests 選項(xiàng)卡，應(yīng)該有一個(gè)打開(kāi)的

查看并合并它。

9. 在 NPM 上檢查你的包

以上是使用變更集和 GitHub Actions 自動(dòng)發(fā)布 NPM 包的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！