자체 React 구성 요소 라이브러리를 NPM에 배포하고 게시하는 방법

GitHub 페이지에 Storybook 배포

GitHub에 푸시하고 작동하는지 확인하겠습니다. 이를 위해 파일storybook 또는 src 디렉토리에서 일부 변경을 수행하고 푸시해야 합니다. GitHub 저장소 _-> _actions로 이동하여 워크플로우를 확인하십시오. 완료되면 이전에 확인했던 링크(설정 -> 페이지)를 사용하여 라이브 스토리북 페이지를 열 수 있습니다.

내 프로젝트의 스토리북이 있습니다here.

내GitHub repo

NPM에 패키지 게시

완전히 자동화된 버전 관리 및 패키지 게시semantic-release를 사용하는 것이 좋습니다. 게시 과정이 매우 쉬워집니다.

시작하려면 프로젝트 디렉토리에서 이 명령을 실행하십시오. 프로젝트의 시맨틱 릴리스를 설정합니다.

npx semantic-release-cli setup

몇 가지 질문을 할 것입니다. 이에 답하려면 이미 npm에 가입해야 합니다.

• npm 레지스트리는 무엇입니까? (기본적으로 이 필드를 남겼습니다)
• npm 사용자 이름이 무엇입니까? (개인 사용자 이름 사용)
• npm 암호는 무엇입니까? (개인 비밀번호 사용)
• NPM 2단계 인증 코드는 무엇입니까?
• GitHub 개인 액세스 토큰을 제공합니다(아래 지침에 따라 생성)
.

GitHub 개인 액세스 토큰을 생성하려면 this page 으로 이동하여 토큰에 이름을 추가하고 첫 번째 확인란 그룹(repo)을 클릭한 다음 "토큰 생성"버튼을 클릭합니다. 복사하여 터미널에 붙여넣으세요.

그런 다음 스크립트는 선택할 CI를 제공합니다. "GitHub 작업"선택

그런 다음 라이브러리를 릴리스하는 워크플로우release.yml를 생성합니다. semantic-releasedocs로 이동하여 새 워크플로를 위해 이 코드를 복사합니다.

name: Release
on:
  push:
    branches:
      - master
jobs:
  release:
    name: Release
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v2
        with:
          fetch-depth: 0
      - name: Setup Node.js
        uses: actions/setup-node@v2
        with:
          node-version: 'lts/*'
      - name: Install dependencies
        run: npm ci
      - name: Release
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
        run: npx semantic-release

내 프로젝트에서는 다른 워크플로에서 이미 사용하고 있는 명령에 대한 종속성을 설치하는 명령만 변경할 것입니다.

      - name: Install deps and build (with cache)
        uses: bahmutov/npm-install@v1

대신

      - name: Install dependencies
        run: npm ci

그런 다음 실행

yarn

변경 사항을 GitHub 저장소로 푸시합니다.

중요 공지! NPM 레지스트리에 대해 고유한 이름을 가진 패키지만 게시할 수 있습니다. package.json name 필드에서 사용 중인 이름이 고유해야 합니다.

워크플로가 완료되면 NPM에서 패키지를 찾을 수 있습니다.

시맨틱 릴리스 사용의 또 다른 이점은 커밋 메시지를 사용하여 다음을 선택할 수 있다는 것입니다release type.

이 문서가 유용하고 NPM에 패키지를 쉽게 배포하고 푸시할 수 있기를 바랍니다!