리액트 컴포넌트 NPM 배포하기

폴더 구조

우선 폴더 구조부터 보면 lib 폴더 내에서 배포할 컴포넌트를 작업해준다. 이렇게 하는 이유는

 

• 명확한 분리: 배포할 컴포넌트를 다른 코드와 명확히 분리함으로써, 컴포넌트 개발 및 유지보수가 용이해진다.
• 재사용성: lib 폴더 내의 컴포넌트는 독립적으로 설계되기 때문에 다른 프로젝트에서도 쉽게 가져다 사용할 수 있다.
• 테스트 용이성: lib 폴더 안의 컴포넌트를 따로 테스트할 수 있어서 전체 프로젝트를 테스트하기가 더 쉬워진다.
• 배포 편의성: lib 폴더 내의 컴포넌트는 쉽게 빌드하고 배포할 수 있다. tsconfig.json 파일에서 outDir 설정을 통해 lib 폴더 내의 코드만을 빌드 대상에 포함시키면, 불필요한 파일이 포함되지 않도록 할 수 있다.

 

TypeScript

타입스크립트로 작성된 코드는 컴파일 단계에 자바스크립트로 변환되기 때문에 타입스크립트로 작성된 라이브러리는 자바스크립트로 작성된 코드에서 자연스럽게 라이브러리를 사용 할 수 있다.

타입스크립트로 작성된 라이브러리를 npm에 배포하기 위해서는 tsconfig.json 파일을 수정해줘야 한다.

tsconfig.json

"noEmit": false

noEmit 옵션이 true로 설정되면 TypeScript 컴파일러가 출력을 생성하지 않는다.

npm 배포를 위해서는 컴파일된 파일들이 필요하므로, 이 옵션을 false로 설정해야한다.

"declaration": true

이 옵션이 true로 설정되면, TypeScript는 .d.ts 파일(타입 선언 파일)을 생성한다.

라이브러리를 TypeScript로 작성할 때, 다른 프로젝트에서 타입 정보를 사용할 수 있도록 하기 위해 이 옵션을 true로 설정해야한다.

"outDir": "./dist"

이 옵션은 TypeScript 컴파일러가 컴파일된 파일들을 저장할 디렉토리를 지정한다.

dist 폴더에 컴파일된 파일들을 두기 위해 이 옵션을 설정한다.

우리는 src 폴더 내의 lib 폴더에서 개발할 것이므로, 아래와 같이 작성한다.

"include": ["./src/lib/**/*.tsx", "./src/lib/**/*.ts"]

.npmignore

.npmignore 파일은 .gitignore 파일과 유사하다. 배포할 때 포함하지 않을 파일이나 폴더를 지정하는 데 사용된다.

node_modules
src
build
public
.gitignore
.eslintrc.js
*.config.js
*.config.json
tsconfig.json

package.json

타입스크립트 설정은 끝났고 이제 npm에 배포하기위한 라이브러리의 정보를 수정, 추가해줘야한다.

"name"

"name": "your-library-name"

중복된 이름은 되지 않으므로 npm사이트에서 검색을 해보고 하기를 추천!!

"version"

"version": "0.0.1"

버전은 크게 3가지로 분류 된다.

Major.Minor.Patch

Major : 이전 버전과 호환성이 보장되지 않는 업데이트이며 주로 대규모 업데이트가 일어났을 때 메이저 버전이 변경

Minor : 이전 버전과 호환 되면서 일부 새로운 기능이 추가되거나 수정되는 업데이트가 일어났을 때 마이너 버전이 변경

Patch : 버그 수정 및 성능 개선과 관련된 업데이트가 일어났을 때 패치 버전이 변경

🚨주의
코드수정을 하고 다시 배포를할땐 반드시 version을 올려서 배포를 해야함

 

"private"

"private": false

npm 유료 이용자인 경우에는 private 으로 배포를 할 수 있지만 무료 이용자인 경우에는 false로 바꾸어 npm 중앙 저장소에 배포한다.

"main"

"main": "dist/index.js"

우리 라이브러리의 진입점 파일을 명시해주는 곳

우리는 dist 폴더로 생성해서 배포할 것이기 때문에 dist 폴더에 있는 index.js 파일로 명시해야한다.

(TypeScript 파일은 tsc 명령어를 통해서 JavaScript로 변환)

"types"

"types": "dist/index.d.ts"

 

추가적으로, TypeScript를 사용하는 경우, types 필드도 설정하여 TypeScript 정의 파일을 지정해주는 것이 좋다.

"browser"

"browser": "./browser/specific/main.js"

main 필드는 Node.js나 CommonJS 환경에서의 진입점을 명시합니다.

browser 필드는 브라우저 환경에서의 진입점을 명시합니다.

브라우저와 Node.js 환경 모두에서 라이브러리가 제대로 작동하도록 하기 위해 두 필드를 모두 설정합니다.

"scripts"

"scripts": {
	```
    
    
	"prepare": "rm -rf dist && mkdir dist && tsc",
	
    
    ```
},

prepare 스크립트 추가를 한다.

"files"

"files": [
	"dist",
	"README.md"
]

files 필드는 배열 형태로, 배포할 파일이나 폴더의 경로를 포함한다.

files 필드가 없으면, .npmignore 파일이나 .gitignore 파일의 설정을 참고하여 배포 파일을 결정한다. 이러한 파일들이 없으면 프로젝트의 대부분의 파일이 포함될 수 있다.

README.md를 포함한 이유는 Github의 README.md와 같은 역할을 한다.

외에 적으면 좋은 것들은

"description"

라이브러리에 대한 설명

"description": "Hello World.",

 

"keywords"

라이브러리 키워드

	"keywords": [
		"react",
		"typescript",
        "flexible",
	],

해당 필드들을 작성하면 검색을할때 함께 노출이된다.

 

"repository"

라이브러리의 소스 코드를 저장한 저장소

"repository" : {
	"type": "git",
 	"url" : "https://github.com/your/repo"
 },

"homepage"

라이브러리의 홈페이지 주소

"homepage": "https://your-hompage",

"contributors"

프로젝트를 함께 진행한 사람

"contributors" : ["park", "kim"],

 

 

참고1

리액트 컴포넌트 NPM 배포하기 (with TypeScript)

참고2

package.json 의 버전 표기법 (npm)