Terbitkan pakej NPM secara automatik menggunakan set perubahan dan Tindakan GitHub

Untuk panduan ini, kami akan menerbitkan pakej skrip taip NPM ringkas yang dipanggil "npm-package-template-changesets" dengan menggunakan PNPM dan changeset cli. Bahagian automasi datang apabila kami membuat sebarang perubahan pada pustaka, bot akan membuka permintaan tarik yang memerlukan kelulusan dan akan mengandungi semua perubahan untuk disertakan dalam versi baharu serta log perubahan.
Pakej ini akan menyokong CJS untuk versi lama dan ESM.

1. Pasang PNPM dan buat projek baharu

npm install -g pnpm

pnpm init

Ini akan menjana satu fail package.json, menukar sifat nama kepada nama pakej yang belum wujud lagi:

Juga buat repositori baharu pada GitHub dan tambahkan url pada harta repository.url, ia penting untuk asal:

{
  "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. Pasang kebergantungan

pnpm add tsup typescript @changesets/cli -D

• tsup: digunakan untuk membina kod skrip taip, penggunaan dep ini bergantung pada kes penggunaan anda
• skrip taip: pergantungan yang diperlukan
• @changesets/cli: digunakan untuk versi dan penerbitan

3. Hasilkan fail tsconfig

Untuk kes ini kami akan menggunakan 2 fail tsconfig: tsconfig.build.json dan tsconfig.json. Perbezaan di antara mereka ialah tsconfig.build.json akan menggunakan sifat komposit: true dan rootDir: "./src" jadi binaan hanya melihat fail dalam direktori src, manakala dalam pembangunan tsconfig.json akan mengatasi tetapan ini dan gunakan rootDir": "." untuk mendayakan skrip taip bagi fail konfigurasi pada peringkat akar.

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. Tambah fail untuk diterbitkan:

Untuk contoh ini, kami akan menambah satu fail index.ts dalam direktori src:
index.ts

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

5. Kemas kini package.json:

Tambah skrip:

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

Tambah konfigurasi NPM:

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

Tambah titik masuk dan taip konfigurasi dalam 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",

Sifat keperluan dan utama adalah untuk pengguna akhir yang menggunakan CommonJS, yang lebih lama daripada ESM. ESM mendayakan sintaks moden dan banyak faedah berbanding CJS, tetapi kami akan menyokong kedua-duanya untuk panduan ini. Untuk ESM modul propeties dan import adalah yang terpakai.

Untuk membina fail bagi sambungan .cjs dan .mjs, kami boleh menggunakan 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. Menambah fail aliran kerja 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 sudah ada dalam repositori Github secara lalai, nilai NPM_TOKEN perlu dijana dalam npm dengan kebenaran penerbitan:

Kemudian, buat repo baharu pada Github, pergi ke Tetapan dan tambahkannya pada rahsia:

Juga pergi ke Tindakan > Umum

dan dayakan pilihan ini atau set perubahan tidak akan dapat membuka PR:

7. Hasilkan set perubahan pertama

• Perubahan init:

npm install -g pnpm

• Buat komitmen pertama:

pnpm init

• Jalankan set perubahan:

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

Jika anda mendapat ralat tentang "Gagal mencari tempat HEAD menyimpang dari utama", konfigurasikan cawangan asas anda dalam .changeset/config.json

Anda akan digesa beberapa pilihan, untuk contoh ini kami akan memilih patch:

• Fail baharu telah dibuat dalam folder .changesets, untuk keluaran pertama ini, kami harus memindanya kepada komit sebelumnya supaya kami tidak menambah satu lagi:

pnpm add tsup typescript @changesets/cli -D

8. Tolak ke repositori

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

Selepas CI selesai, semak tab Permintaan Tarik pada repo, mesti ada satu terbuka

Semak dan gabungkannya.

9. Semak pakej anda pada NPM

Atas ialah kandungan terperinci Terbitkan pakej NPM secara automatik menggunakan set perubahan dan Tindakan GitHub. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!