반응형
스토리북 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"
},
반응형
'TIL > TIL' 카테고리의 다른 글
성장을 위한 피드백 (0) | 2024.04.07 |
---|---|
TDD (0) | 2023.06.09 |
gif를 mp4로 변환해서 용량줄이기 (1) | 2023.01.05 |
타입스크립트에서 new kakao 객체 사용하기 (0) | 2022.11.19 |
kakaomap : Cannot read properties of null(reading 'currentStyle') (0) | 2022.11.19 |