TypeScript React component Create NPM

TypeScript React component Create NPM

타입스크립트 리액트 컴포넌트 NPM 배포 작업 기록

1. 리액트 타입스크립트 프로젝트 생성 npx create-react-app [프로젝트 명] --template typescript
2. 컴포넌트 생성
3. index.js 에 npm에 배포할 컴포넌트 설정
4. tsconfig.json 에 npm 배포전 환경 설정

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

4-1. 해당 tsconfig.json에서 현재 프로젝트에서 사용되는 부분을 추가해야됨 -> (예시) 스타일드 컴포넌트 라이브러리를 사용중이면 해당 타입스크립트 환경 설정을 해주어야함)
4-2. 중요 옵션 설명

• "noEmit" : fasle
noEmit 옵션은 출력을 내보내지 않는다는 설정입니다.
  npm 배포를 하기 위해서는 우리가 만든 컴포넌트 혹은 파일이 출력으로 나와야 합니다.

• "declaration" : true
.d.ts 파일을 생성할 것인지에 대한 옵션입니다.
  라이브러리가 타입스크립트를 지원하기 위해서는 해당 옵션을 true로 주어야 합니다.

• "outDir" : "./dist"
tsc 명령어로 컴파일된 파일들이 어디에 위치할 것인지에 대한 옵션입니다.
  dist 폴더에 두기 위해서 위와 같이 작성합니다.

• "include" 속성
  tsc 명령어로 컴파일 할 파일이 어디에 위치하는지를 명시해주는 옵션입니다.
  우리는 라이브러리를 개발할 위치를 src 폴더에서 lib 폴더를 생성해서 그 안에서 개발을 할 겁니다. 그래서 아래와 같이 작성을 합니다.

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

• 이 외의 옵션들은 선택적 사항이며 설명한 옵션들은 라이브러리를 배포하기 위한 최소한의 설정들을 설명한 것이다.

5.package.json

{
  "name": "react-hyeonsu-component",
  "version": "0.0.1",
  "private": false,
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "browser": "./browser/specific/main.js",
  "dependencies": {
    "@emotion/react": "^11.8.1",
    "@emotion/styled": "^11.8.1",
    "@types/node": "^16.11.26",
    "@types/react": "^17.0.39",
    "@types/react-dom": "^17.0.11",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "5.0.0",
    "typescript": "^4.5.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prepare": "rm -rf dist && mkdir dist && tsc"
  },
  "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"
    ]
  }
}

• npm에 배포를 하기 위해서는 package.json에 배포할 라이브러리의 정보를 적어주어야하고, 배포할 파일들의 앤드포인트를 적어주어야 한다.

-필수적으로 변경해야 하는 부분

1. "name"
"name" : "react-bowstring-component"

• 라이브러리의 이름이며 사용자들이 해당 라이브러리를 사용할때 검색 및 다운을 하기위해서 사용하는 이름이며, name을 정하기전에 항상 npm사이트에서 내가 사용할려는 이름이 있는지 검색해보는게 좋다.

2. "version"
"version" : "0.0.1"

• 배포할 라이브러리의 버전을 명시하는 곳이며 보통 major | minor | patch 순으로 적는다.
• 새롭게 npm에 배포할 떄는 버전을 무조건 올려서 배포해야된다 -> 안할경우 403 에러가 뜸

3. "private"
"private" : false

• 중앙 저장소인 npm에 배포하기 위해서 private 옵션을 false 로 변경해 주어야한다.
• 없는 경우에 그냥 없이 나두면됨

4. "main"
"main" : "dist/index.js"

• 만든 라이브러리의 진입점 파일을 명시해주는 설정이다.
• dist 폴더를 생성해서 배포할 것이기 때문에 dist 폴더에 있는 index.js 파일로 명시한다.
• dist 폴더가 아닌 다른 폴더로 생성하여 배포할 경우 해당 폴더의 이름과 배포할 파일을 명시해 주면 된다.

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

• 타입스크립트로 리액트 프로젝트를 생성하고 해당 프로젝트에서 만든 컴포넌트를 라이브화시켜 배포하기 위해서 타입 추론을 도와주는 진입점 파일을 명시해주는 설정이다.
• 주의할점으로는 package.json이"files" 프로퍼티를 포함하고 있으면 "types" 프로퍼티는 무시된다. 이 경우에는 메인 선언 파일을 "files" 프로퍼티에 전달해야 된다.

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

• 브라우저에서 구동되는 라이브러리를 제공할때 browser 필드도 설정을 해주어야 된다.
• 클라이언트(client-side) 사용을 위하는 경우 자바스크립트 번들러 또는 구성 요소 도구에 대한 힌트로 제공하기 위해 main 옵션(field) 대신에 사용해야 된다.
• main 필드와 browser 필드 둘다 존재해야 정상적으로 작동한다.

7. "scripts"

"scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "prepare": "rm -rf dist && mkdir dist && tsc"
  },

• prepare 스크립트를 추가해놓아야 한다.
  7-1. rm -rf dist 명령어로 dist 폴더를 삭제
  7-2. mkdir dist 명령어로 다시 dist 폴더 만들기
  7-3. 다시 만들어진 폴더에 tsc 명령어로 컴파일을 진행해서 나온 파일들을 dist 폴더에 넣는 과정이다.

. 컴파일이란 사람이 이해하는 언어를 컴퓨터가 이해할 수 있는 언어로 바꾸어 주는 과정이다.
. 해당 컴포넌트를 컴파일 시키는 이유에 대해서는 추가적으로 수정이 필요할 것 같다.
. 이해는 지식의 확장의 기반이 된다는걸 잊지말자

8. .npmignore

• 해당 파일에는 npm에 배포하지 않을 파일을 명시해준다.
• 컴파일을진행한후 src, public, tsconfig 폴더 등은 배포할 라이브러리에 포함시켜서 라이브러리 크기를 키울 필요없으므로 .npmignore 에 명시하여 라이브러리에 배포되지 않도록 해준다.
• ex)

node_modules/
src/
public/
tsconfig.json

9. 개발진행

• 이제 배포할 라이브러리를 제작하는 단계이다.

10. index.js

• 기존의 index.js에는 react-dom-router를 사용할 경우 를 또는 UI에 보여질 컴포넌트를 작성한다.
• 하지만 우리가 할건 라이브러리를 배포하는 작업이므로, 창조한 컴포넌트를 export 를 시켜주어야한다.
• 그 이유는 잘생각해보면 우리가 사용하는 라이브러리들은 import 라이브러리 from '라이브러리명칭'
  와 같은 형식으로 import 시켜서 사용한다.
• 이러한 이유로 배포할 라이브러리를 export 시켜주는것이다.
• 예시)

export {default} from './내가만든 컴포넌트의 경로'

와 같은 형식으로 index.js에 작성해 주면 된다.

11. 빌드 및 npm 배포

• npm publish 명령어를 입력해서 배포를 진행하면 된다.
• 해당 명령어로 배포를 진행하게 되면 dist 폴더를 생성하고, 빌드해서 자동적으로 배포가 진행되게 된다.
  텍스트

리액트 스켈레톤 라이브러리를 만들고 npm에 배포하는 작업을하면서 기록을 위해 작성한 블로그 글입니다.
해당 블로그 글은 해당 블로그를 참조하여 만든 글이며 혹시 원작자분께서 이글을 읽게 된다면 무한의 감사를 표합니다.