npm 라이브러리 배포하기

react npm 라이브러리 제작 방법입니다.

작업 할 폴더로 이동하여

npm init

npm i -D typescript react react-dom @types/react @types/react-dom

먼저 위 기본 패키지를 설치하여 줍니다.

package.json
{
  "name": "moduleName",
  "version": "version",
  "description": "",
  "main": "dist/index.js",
  "private": false,
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rm -rf ./dist && tsc",
    "prepare": "yarn build"
    //prepare는 npm publish 작동 시 자동으로 실행됩니다.
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/react": "^18.0.21",
    "@types/react-dom": "^18.0.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "typescript": "^4.8.4"
  },
  "dependencies": {
    "testing012030": "^1.0.0"
  }
}

tsconfig
{
 "compilerOptions": {
   "outDir": "./dist", 
   //outDir : 컴파일 결과물이 담길 폴더 주소
   "module": "commonjs", 
   //module : 빌드시 모듈 방식을 무엇으로 할 것인지 지정한다
   "target": "es5",
   //target: 빌드의 결과물 es 버전. 해당 버전으로 트랜스파일링 된다
   "lib": ["es6", "dom", "es2016", "es2017"],
   //lib: 컴파일에 포함될 라이브러리 파일 목록
   "jsx": "react",
   //jsx: tsx파일에서 jsx 코드 생성 설정 // preserve, react-native, react
   "sourceMap": true,
   //sourceMap: .map 파일 생성 여부
   "declaration": true,
   //declaration: .d.ts 파일 생성 여부
   "esModuleInterop": true,
   //esModuleInterop: 모든 imports에 대한 namespace 생성, commonjs와 상호운용 여부, allowSyntheticDefaultImports를 암묵적으로 승인한다.
   "strictNullChecks": true,
   //strictNullChecks: 엄격한 null 체크 여부
   "noImplicitAny": true,
   //noImplicitAny: any 타입 허용 여부
   "removeComments": true,
   //removeComments: 주석 삭제 여부
   "typeRoots": ["./src/type.d.ts", "node_modules/@types"]
   //typeRoots: 타입 정의를 포함할 폴더 목록
   //declaration을 true로 해야 d.ts파일이 생성된다! 또한 esModuleInterop을 true로 설정해야한다.
   //나 같은 경우 allowSyntheticDefaultImports만 true로 하고 컴파일했더니 react_1.default가 undefined라서 craeteElement가 없다는 에러가 발생했다.
 },
 "include": ["./src/**/*.tsx", "./src/**/*.ts"],
 "exclude": ["node_modules"],
}

이렇게 설정하면 끝이 난다..