1. 배포할 프로젝트 생성
create-react-app 또는 yarn init으로 리액트 프로젝트를 생성한다. (본 글에서는 생략, 아래 글 참고)
2020.06.15 - [Front End/React] - 리액트 설치 및 처음 시작하기
리액트 설치 및 처음 시작하기
NodeJS 설치 https://nodejs.org/ko/ 에서 node.js를 설치한다. 2020/06 기준 최신버전은 14.4, Stable 버전은 12.18이다. 본 글에서는 12.18버전으로 설치한다. 터미널에서 npm -version 을 입력해보자 # npm -v..
memostack.tistory.com
2022.01.06 - [Front End/React] - babel, webpack 으로 react 프로젝트 생성하기
babel, webpack 으로 react 프로젝트 생성하기
목표 babel과 webpack을 이용하여 컴파일 및 번들링을 한다 컴파일 및 번들링이 완료된 컴포넌트를 npm에 배포한다 React 프로젝트 생성 본 글에서는 npm 대신 yarn을 이용한다 package.json 생성 yarn init 명
memostack.tistory.com
2. .npmignore 생성
npm에 배포할 때, 배포하면 안되는 목록을 나열할 수 있다. (.gitignore와 비슷)
3. npm 회원가입
npm에 계정이 있어야만 배포를 할 수 있다.
![](http://t1.daumcdn.net/tistory_admin/static/images/xBoxReplace_250.png)
계정 가입 후 가입할때 작성한 이메일로 본인 검증 메일이 전송된다. 검증 후에 아래 단계를 진행한다.
![](http://t1.daumcdn.net/tistory_admin/static/images/xBoxReplace_250.png)
4. package.json 수정
<python />
{
"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: 비공개 또는 공개 설정 (공개로 설정하는 경우는 유료)
5. npm 배포
우선 로그인을 먼저한다. (웹이 아니라 터미널에서)
<shell />
$ npm login
로그인 후 제대로 로그인이 되었는지 whoami 명령어로 확인 할 수 있다.
<shell />
$ npm whoami
bluemiv
이제 빌드를 하고 배포를 한다.
- 본 글에서는 prepublish를 이용하여 npm publish를 하면 이전에 빌드가 먼저 실행되도록했다
<javascript />
{
...
"scripts": {
"dev": "webpack-dev-server --progress --mode development",
"build": "webpack --progress --mode production",
"prepublish": "yarn build"
},
...
}
npm publish 명령어를 사용하여, npm에 배포를 한다.
<shell />
$ npm publish
배포가 완료되면, 아래와 같이 내가 배포한 모듈이 생성이 된다.
![](https://blog.kakaocdn.net/dn/HNh4j/btrp1HAS55q/Z3Skf8efx0APqfhpr1o0A0/img.png)
![](https://blog.kakaocdn.net/dn/bNZdc0/btrp1H1XcIa/djJhD56IDthmcftl4kXgi1/img.png)
'Frontend > React' 카테고리의 다른 글
rollup을 이용하여 react 모듈 만들기 (yarn berry, babel) (0) | 2022.07.11 |
---|---|
기존 React App에 Typescript 적용하기 (0) | 2022.03.02 |
babel, webpack 으로 react 프로젝트 생성하기 (0) | 2022.01.06 |
Gatsby와 React를 이용하여 Github page 호스팅하기 (0) | 2021.08.03 |
React 프로젝트 github page에 호스팅하기 (0) | 2021.07.26 |