지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > JS 튜토리얼 > 변경 세트 및 GitHub Actions를 사용하여 NPM 패키지 자동 게시

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

Barbara Streisand
풀어 주다： 2024-11-04 15:01:44
원래의
222명이 탐색했습니다.

이 가이드에서는 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에서 생성되어야 합니다.

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가 메인에서 분기된 위치를 찾지 못했습니다"라는 오류가 발생하는 경우 .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
이전 기사：JavaScript에서 중첩 개체의 속성을 어떻게 동적으로 설정할 수 있습니까? 다음 기사：약속/A 및 비동기 대기 - JavaScript 문제
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
function_exists()는 사용자 정의 함수를 결정할 수 없습니다. 기능 테스트() {                                                                                ...
에서 2024-04-29 11:01:01
0
3
2165
Chrome 모바일 버전을 표시하는 방법 안녕하세요 선생님, Chrome을 모바일 버전으로 어떻게 변경하나요?
에서 2024-04-23 00:22:19
0
11
2313
자식 창이 부모 창을 작동하지만 출력이 응답하지 않습니다. 처음 두 문장은 실행 가능하지만 마지막 문장은 구현할 수 없습니다.
에서 2024-04-19 15:37:47
0
1
1950
상위 창에 출력이 없습니다. document.onclick = function(){ window.opener.document.write('나는 자식 창의 출력입니다.');
에서 2024-04-18 23:52:34
0
1
1826
CSS 마인드맵 코스웨어는 어디에 있나요? 코스웨어
에서 2024-04-16 10:10:18
0
0
1879
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿