React 컴포넌트 npm 배포하기

React 컴포넌트를 npm 모듈로 배포하여 사용해 본다.

신규 프로젝트 생성

React 모듈 개발을 위한 React 프로젝트를 생성한다.

npx create-react-app [new project name]

React 빌드를 위한 모듈을 설치

yarn add -D @babel/cli @babel/preset-react

src/lib 폴더 생성 후 배포할 컴포넌트 추가

import React from "react";

const TC = () => {
  return <span>배포용 컴포넌트</span>;
};

export default TC;

.gitignore 에 배포 제외 파일 설정

src
demo
.babelrc
webpack.config.js
public

package.json 파일 수정

• presets 설정 추가

  "babel": {
  "presets": [
    "@babel/preset-react"
  ]
  }
  

• 빌드 script 추가

  "scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject",
  "publish:npm": "rm -rf dist && mkdir dist && babel src/lib -d dist --copy-files"
  }
  

• peerDependencies 설정
  react 관련 모듈은 참조하는 프로젝트에서 중복시 오류를 뱉는 경우가 있어 peerDependencies로 넣어준다.

  "peerDependencies": {
  "@testing-library/jest-dom": "^5.16.4",
  "@testing-library/react": "^13.3.0",
  "@testing-library/user-event": "^13.5.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-scripts": "^4.0.1",
  "web-vitals": "^2.1.4"
  }
  

컴포넌트 빌드

yarn publish:npm

프로젝트 배포

npm publish

배포한 모듈 사용 (import)

import React from "react";
import TC from "@niceharu/tc";

const Home = () => {
  return (
   <TC></TC>
  );
};

export default Home;