首頁 > web前端 > js教程 > 使用變更集和 GitHub Actions 自動發布 NPM 包

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

Barbara Streisand
發布: 2024-11-04 15:01:44
原創
222 人瀏覽過

在本指南中,我們將使用 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 值:

Auto publish NPM packages using changesets and GitHub Actions

然後,在 Github 上建立一個新的儲存庫,前往「設定」並將其新增至秘密:

Auto publish NPM packages using changesets and GitHub Actions

另請前往「操作」>一般

Auto publish NPM packages using changesets and GitHub Actions

並啟用此選項,否則變更集將無法開啟 PR:

Auto publish NPM packages using changesets and GitHub Actions

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 中設定您的基礎分支

系統會提示您一些選項,在本例中我們將選擇補丁:

Auto publish NPM packages using changesets and GitHub Actions

  • 在 .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 選項卡,應該有一個開啟的

Auto publish NPM packages using changesets and GitHub Actions

檢視並合併它。

9. 在 NPM 上檢查你的包

Auto publish NPM packages using changesets and GitHub Actions

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

來源:dev.to
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板