스토리북 npm 배포하기(pnpm,vite,react)

스토리북 npm 배포하기

storybook을 build후에 npm publish를 하니 npm publish 했을때 import하면 types.t.ds(타입)이 참조되었다.

한참은 검색한 후에 index.js가 빌드시에 실행되지 않음이 원인임을 알았고 또 한참을 검색후에 storybook을 build하는 것이 아니라 vite를 build해야 함을 알았다.

 

그러니까 vercel 배포를 위해 build:storybook을 실행시키고, npm publish는 build:lib을 실행시켜야 하는 것이다.

build를 2개로 나눠야 한다.

build:storybook으로는 vercel 배포하고 

build:lib을 만들어서 npm publish에 실행시켜야 함

 

vercel deploy

//production.yaml

Deploy-Production:
    needs: ["Bump-patch-version"]
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install Vercel CLI
        run: npm install --global vercel@latest
      - name: Install pnpm
        run: npm install -g pnpm
      - name: Pull Vercel Environment Information
        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
      - name: Build Project Artifacts
        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
      - name: Deploy Project Artifacts to Vercel
        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

 

npm publish

사실 아직 git action을 정확하게 몰라서 아래 코드에 deprecate된 코드들을 변경하지 못했다.

// version patch up

Bump-patch-version:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: git config --global user.email "github-actions@example.com"
      - run: git config --global user.name "GitHub Actions"
      - uses: actions/setup-node@v1
        with:
          node-version: 16
      - run: npm version patch
      - run: git push
      - uses: actions/upload-artifact@v2
        with:
          name: src
          path: ./
          
          
// npm publish
NPM-Publish:
    needs: ["Deploy-Production"]
    runs-on: ubuntu-latest
    permissions:
      contents: read
      packages: write
    steps:
      - uses: actions/checkout@v2
      # Setup .npmrc file to publish to GitHub Packages
      - uses: actions/setup-node@v2
        with:
          node-version: "16.x"
          registry-url: "https://npm.pkg.github.com"
        # Install pnpm globally
      - name: Install PNPM
        run: npm install -g pnpm
      # Install Dependencies
      - name: Install Dependencies
        run: pnpm install
      # Run build:lib
      - name: Build Library
        run: pnpm run build:lib
      # Then, Publish to NPM
      - name: NPM Publish
        uses: JS-DevTools/npm-publish@v2.2.1
        id: junyeol-components
        with:
          token: ${{ secrets.NPM_TOKEN }}
          package: "./package.json"

 

package.json

// pacakge.json

{
  "name": "junyeol-components",
  "version": "0.0.27",
  "type": "module",
  "main": "./dist/index.js",
  "module": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/index.js",
      "require": "./dist/index.umd.cjs"
    }
  },
  "files": [
    "dist"
  ],
  "repository": 본인 레포지토리,
  "author": 본인 정보
  "homepage": "https://junyeol-components.vercel.app/",
  "scripts": {
    "dev": "storybook dev -p 6006",
    "clean:build": "rm -rf dist",
    "build:lib": "tsc && vite build",
    "build:storybook": "storybook build -o dist && touch ./dist/.nojekyll",
    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "start-react": "vite"
  },

---

npm package 페이지

junyeol-components