使用变更集和 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中文网其他相关文章！