React 컴포넌트 Npm에 배포하기 (with TS)

react 로 만든 컴포넌트를 npm 사이트에 배포해 보자! (typescript 적용)

 

<배포한 컴포넌트>

https://www.npmjs.com/package/react-divided-progress-bar

react-divided-progress-bar

 

 

컴포넌트 생성 & 배포 절차

 

1. src 디렉토리에 컴포넌트를 생성한다.

사람들은 보통 src/lib에 컴포넌트를 생성해 배포하지만, 나는 그냥 src 폴더에 바로 컴포너트를 생성했다.

└── src
    ├── index.tsx
    ├── progressBar.css
    ├── progressBar.tsx

 

- ts를 사용할 react app을 생성해주자!

npx create-react-app my-app --template typescript

 

- 컴포넌트 생성해주자

src/progressBar.tsx

'use client'
import "./progressBar.css"
import {useEffect, useRef} from "react";

export type ProgressBarType = {
    value?: number,
    maxValue?: number,
    increaseDuration?: number,
    divide?: boolean
    sections?: number,
    color?: string,
    colorChange?:boolean,
    stripped?: boolean,
    animated?: boolean
}

export default function ProgressBar(props: ProgressBarType) {
    ...

 

- index.ts 파일에 컴포넌트를 import 하고 바로 export 해준다. type 또한 export 해준다.

src/index.ts

import ProgressBar from './progressBar';

export type { ProgressBarType } from './progressBar.js';

export { ProgressBar };

export default ProgressBar;

 

2. tsconfig 파일을 작성한다.

tsconfig에서는 ts(tsx)파일을 js로 컴파일할 환경을 설정한다.

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": false,
    "declaration": true,
    "outDir": "./dist",
    "jsx": "react-jsx"
  },
  "include": ["src"]
}

- target: 어떤 버전의 js로 컴파일 될지 결정한다. 옛 브라우저 까지 지원하기 위해 es5를 선택하였다.

- module: es5에 맞춰, coomonJs설정 하였다.

- declaration: .d.ts 파일을 생성 한다. true로 설정한다. .d.ts는 타입을 정의 하는 파일이다. ts에서 해당 모듈을 사용하기 위해 반드시 필요하다.

- outdir: 컴파일된 파일들의 위치 ./dist로 설정 한다.

- include: 컴파일할 .ts 파일들의 위치이다. /src로 설정 하였다.

 

3. package.json 파일 수정한다.

각 필드에 대한 설명은 ↓

{
  "name": 내 컴포넌트 이름,
  "version": 버전,
  "author": 이름,
  "description": 설명,
  "repository": {
    "type": "git",
    "url": git repository url
  },
  "keywords": [
    npm 에 노출될 keyword 들
  ],
  "private": false -> 공개 배포 ,
  // entry 지점
  "main": "dist/index.js",
  "module": "dist/index.js",
  // d.ts 파일들 위치
  "types": "dist/index.d.ts",
  // 배포될 폴더 디렉토리.. dist 하위 파일들만 배포된다.
  "files": [
		"dist/*"
	],
  // 라이센스 정보
  "license": "MIT", 
  "dependencies": {
    
  },
  "devDependencies": {
    
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "copy-styles": "cp src/*.css dist",
    "prepare": "rm -rf dist && mkdir dist && tsc && npm run copy-styles",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

 

4. npm 명령어를 실행해 dist 폴더내 빌드해 보자!

  "scripts": {
    "prepare": "rm -rf dist && mkdir dist && tsc && npm run copy-styles",
    "copy-styles": "cp src/*.css dist"
  },

 

먼저 prepare 명령어를 실행해 ./dist 폴더로 컴파일을 진행해준다.

결국 npm 사이트에 올라가는 파일들은 dist에 존재하는 파일들이다! npm에 올리기전, dist파일들을 통해 테스트도 진행 할 수 있다.

 

dist 폴더를 생성하고, tsc 명령어를 통해 dist폴더내에 ts 파일들을 컴파일 한다! 그리고 본인의 경우에는 css 파일을 별도로 생성했기 때문에, copy-styles  명령어를 추가해 css 파일을 따로 복사해 주었다. 

 

이는 css-in-js 혹은 sass,scss 등 전처리기를 사용하는 사용자 마다 따로 설정해 주어야 한다!

 

dist 에 빌드된 결과물

└── dist
    ├── index.d.ts
    ├── index.js
    ├── progressBar.css
    ├── progressBar.d.ts
    ├── progressBar.js

 

6. npm 명령어 실행

차레대로

1. 로그인 후, (당연히 npm 사이트에서 회원가입을 해야 한다.) 

npm login

2. 간단히 publish 명령어 실행!

npm publish

 

Complete!