npm에 배포하기

npm 계정 생성 및 로그인

npm을 통해 라이브러리를 배포하기 위해 npm 계정을 생성 후 로그인 해줍니다.

$ npm login

프로젝트 설정

tsconfig.js package.json에서 TypeScript 컴파일을 위한 설정을 해줍니다.

// tsconfig.js
{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react-jsx",
    "noEmit": false, // 출력을 내보내지 않음
    "declaration": true, // .d.ts 생성 여부 (타입스크립트 지원)
    "outDir": "./dist" // tsc 명령어로 컴파일된 파일들의 위치
  },
  // tsc 명령어로 컴파일할 파일의 위치
  "include": ["src"],
  "exclude": ["./src/assets"]
}

// package.json
{
  "name": ${라이브러리 명},
  "version": ${버전},
  "description": ${라이브러리 설명},
  "private": false,
  "main": "dist/stories/index.js",
  "types": "dist/stories/index.d.ts",
  "script" {
		 "prepare": "rm -rf dist && mkdir dist && tsc",
  }
}

• private: 라이브러리 배포를 위해 반드시 false로 설정 합니다.
• main : 라이브러리의 진입점 파일 경로입니다.
• types : typescript 추론을 도와주는 파일 진입점 파일 경로입니다
• prepare: npm publish 실행 전 dist 폴더 경로에 tsconfig.js 설정에 맞게 컴파일합니다.

.npmignore

아래와 같이 npm에 올리지않을 부분을 .npmignore 를 통해 지정해줍니다.

.github/
.storybook/
node_modules/
public/
tsconfig.json/
.prettierrc
.eslintrc.js
.eslintignore
build-storybook.log
build/
dist/hooks/
dist/stories/**/*.stories.js
dist/stories/**/*.stories.d.ts
dist/*.{js,ts,d.ts,css}
postcss.config.js
tailwind.config.js
tsconfig.json
webpack.config.js
src/

stories 폴더에 index.ts 파일을 생성한 후, 아래와 같이 배포할 소스 코드들을 export 해줍니다.

export { default as PrimaryButton } from './Button/PrimaryButton'
export { default as SecondaryButton } from './Button/SecondaryButton'
export { default as GhostButton } from './Button/GhostButton'
export { default as OutLineButton } from './Button/OutLineButton'
export { default as RoundPrimaryButton } from './RoundButton/RoundPrimaryButton'
export { default as RoundSecondaryButton } from './RoundButton/RoundSecondaryButton'
export { default as RoundGhostButton } from './RoundButton/RoundGhostButton'
export { default as RoundOutLineButton } from './RoundButton/RoundOutLineButton'
export { default as Accordion } from './Accordion/Accordion'
export { default as Alert } from './Alert/Alert'
export { default as Badge } from './Badge/Badge'
export { default as DropDown } from './DropDown/DropDown'
export { default as Input } from './Input/Input'
export { default as InputWithIcon } from './Input/InputWithIcon'
export { default as LabelInput } from './Input/LabelInput'
export { default as LabelInputWithIcon } from './Input/LabelInputWithIcon'
export { default as Modal } from './Modal/Modal'
export { default as SearchBar } from './SearchBar/SearchBar'
export { default as Tap } from './Tap/Tap'