React 프로젝트 npm에 배포하기

배포할 프로젝트 생성

create-react-app 또는 yarn init으로 리액트 프로젝트를 생성한다. (본 글에서는 생략, 아래 글 참고)

 

2020.06.15 - [Front End/React] - 리액트 설치 및 처음 시작하기

리액트 설치 및 처음 시작하기

 

2022.01.06 - [Front End/React] - babel, webpack 으로 react 프로젝트 생성하기

babel, webpack 으로 react 프로젝트 생성하기

 

.npmignore 생성

npm에 배포할 때, 배포하면 안되는 목록을 나열할 수 있다. (.gitignore와 비슷)

 

npm 회원가입

npm에 계정이 있어야만 배포를 할 수 있다.

 

계정 가입 후 가입할때 작성한 이메일로 본인 검증 메일이 전송된다. 검증 후에 아래 단계를 진행한다.

검증 메일

 

package.json 수정

{
  "name": "bluemiv-simple-component",
  "version": "0.1.0",
  "description": "simple component for deploy test",
  "main": "dist/index.js",
  "repository": "https://github.com/bluemiv/simple-component.git",
  "author": "bluemiv <public.bluemiv@gmail.com> (https://memostack.tistory.com/)",
  "license": "MIT",
  "private": false,
  ...
}

• name: 패키지 이름
• version: 패키지의 버전
• description: 패키지 설명
• main: 패키지의 기본 진입 점(entry point)
• repository: git 주소
• author: 해당 패키지의 작성자
• license: 라이센스
• private: 비공개 또는 공개 설정 (공개로 설정하는 경우는 유료)

 

npm 배포

우선 로그인을 먼저한다. (웹이 아니라 터미널에서)

$ npm login

 

로그인 후 제대로 로그인이 되었는지 whoami 명령어로 확인 할 수 있다.

$ npm whoami
bluemiv

 

이제 빌드를 하고 배포를 한다.

• 본 글에서는 prepublish를 이용하여 npm publish를 하면 이전에 빌드가 먼저 실행되도록했다

{
  ...
  "scripts": {
    "dev": "webpack-dev-server --progress --mode development",
    "build": "webpack --progress --mode production",
    "prepublish": "yarn build"
  },
  ...
}

 

npm publish 명령어를 사용하여, npm에 배포를 한다.

$ npm publish

 

배포가 완료되면, 아래와 같이 내가 배포한 모듈이 생성이 된다.

내 이미지 > packages 클릭

 

배포된 내 package