변경 세트 및 GitHub Actions를 사용하여 NPM 패키지 자동 게시

이 가이드에서는 PNPM 및 변경 집합 cli를 사용하여 "npm-package-template-changesets"라는 간단한 NPM typescript 패키지를 게시합니다. 자동화 부분은 라이브러리를 변경할 때 제공되며, 봇은 승인이 필요한 풀 요청을 열고 새 버전에 포함될 모든 변경 사항과 변경 로그를 포함합니다.
패키지는 이전 버전 및 ESM용 CJS를 지원합니다.

1. PNPM 설치 및 새 프로젝트 생성

npm install -g pnpm

pnpm init

이렇게 하면 단일 package.json 파일이 생성되고 이름 속성을 아직 존재하지 않는 패키지 이름으로 변경됩니다.

GitHub에 새 저장소를 만들고 저장소.url 속성에 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: typescript 코드를 작성하는 데 사용됩니다. 이 dep의 사용법은 사용 사례에 따라 다릅니다.
• typescript: 필수 종속성
• @changesets/cli: 버전 관리 및 게시에 사용됩니다

3. tsconfig 파일 생성

이 경우에는 tsconfig.build.json 및 tsconfig.json이라는 2개의 tsconfig 파일을 사용합니다. 이들 사이의 차이점은 tsconfig.build.json이 속성 complex: true 및 rootDir: "./src"를 사용하므로 빌드는 src 디렉터리의 파일만 살펴보는 반면, 개발 중에는 tsconfig.json이 이러한 설정을 재정의하고 rootDir": "."를 사용하여 루트 수준의 구성 파일에 대해 TypeScript를 활성화합니다.

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 파일을 추가합니다.
index.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에 진입점을 추가하고 config를 입력하세요.

  "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 속성은 ESM보다 오래된 CommonJS를 사용하는 최종 사용자를 위한 것입니다. 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_TOKEN 값은 게시 권한을 사용하여 npm에서 생성되어야 합니다.

그런 다음 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가 메인에서 분기된 위치를 찾지 못했습니다"라는 오류가 발생하는 경우 .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 중국어 웹사이트의 기타 관련 기사를 참조하세요!