[ NPM ] TypeScript + React로 제작한 Component Library 배포하기

TypeScript로 제작한 컴포넌트를 단순히 컴파일(tsc) 후에 배포한다면, 그저 JS파일을 배포하는 것과 다름 없다. 이 경우에는 JavaScript 사용자만 해당 컴포넌트를 import해서 사용할 수 있다.
TypeScript를 지원하기 위해서는 d.ts 파일을 같이 생성해서 배포해야한다.

배포한 라이브러리를 TypeScript사용자가 사용할 수 있도록 하는 방법을 알아보자.

준비물

• TypeScript로 제작한 .tsx 파일

환경 설정

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

기본적으로 필요한 모듈을 다운 받자. 이 외에 개인적으로 사용하는 모듈 또한 설치한다. (styled-components, react-icons 등..)

tsconfig.json

• TypeScript가 프로젝트를 컴파일 할 때 필요한 루트 파일, 컴파일러 옵션 등을 지정한다.

• tsc를 호출하면 컴파일러는 현재 디렉토리부터 tsconfig.json을 검색하고, 이 파일이 존재하는 디렉토리를 TypeScript 프로젝트 루트 폴더로 인식한다.

{
  "compilerOptions": {
    "outDir": "./dist", 
    "module": "commonjs", 
    "target": "es5",
    "lib": ["es6", "dom", "es2016", "es2017"],
    "jsx": "react",
    "sourceMap": true,
    "declaration": true,
    "esModuleInterop": true,
    "strictNullChecks": true,
    "noImplicitAny": true,
    "removeComments": true,
    "typeRoots": ["index.d.ts", "node_modules/@types"]
  },
  "include": ["./src/**/*.tsx", "./src/**/*.ts"],
  "exclude": ["node_modules"]
}

compilerOptions

• outDir : 컴파일 결과물이 담길 폴더 주소

• module : 빌드시 모듈 방식을 무엇으로 할 것인지 지정한다

• target: 빌드의 결과물 es 버전. 해당 버전으로 트랜스파일링 된다

• lib: 컴파일에 포함될 라이브러리 파일 목록

• jsx: tsx파일에서 jsx 코드 생성 설정 // preserve, react-native, react

• sourceMap: .map 파일 생성 여부

• declaration: .d.ts 파일 생성 여부

• esModuleInterop: 모든 imports에 대한 namespace 생성, commonjs와 상호운용 여부, allowSyntheticDefaultImports를 암묵적으로 승인한다.

• strictNullChecks: 엄격한 null 체크 여부

• noImplicitAny: any 타입 허용 여부

• removeComments: 주석 삭제 여부

• typeRoots: 타입 정의를 포함할 폴더 목록

• declaration을 true로 해야 d.ts파일이 생성된다! 또한 esModuleInterop을 true로 설정해야한다.

• 나 같은 경우 allowSyntheticDefaultImports만 true로 하고 컴파일했더니 react_1.default가 undefined라서 craeteElement가 없다는 에러가 발생했다.

package.json

{
  "name" : "",
  "main" : "dist/index.js", 
  "scripts" : {
  	"build" : "rm -rf ./dist && tsc",
    "prepare" : "yarn build"
  },
  "private" : 'false" // 또는 삭제. true만 아니면 된다. 
  ... 
}

• name을 지정할 때 앞에 @를 붙인다면 자신의 npm 아이디와 동일해야한다.
• main은 라이브러리 사용자가 import할 때 접근하는 entry 포인트.
• prepare는 "npm pulish" 명령어 사용시 자동으로 먼저 실행된다. scripts를 이렇게 설정해두면 publish 명령시
  • prepare가 build script 실행
  • 기존 dist 폴더 삭제,
  • tsc 명령어 실행
  • tsc가 완료되면 publish

.npmignore

# npm
node_modules/

# dev
src
.gitignore
tsconfig.json

# GIT
.git

배포시 불필요한 파일, 폴더를 지정한다

배포하기

• npm login으로 로그인. (아이디, 비밀번호, 이메일 입력)
• npm version major/minor/patch 를 통해 버전업
• npm publish --access public 으로 배포.

추가

package.json에서 dependencies와 devDependencies를 잘 구분하자.

• 컴파일 단계, 즉 빌드시에만 필요한 외부 라이브러리를 devDependencies에, 빌드 이후 런타임에도 필요한 외부 라이브러리는 dependencies에 설치해야한다.

• production으로 빌드시 devDependencies 패키지들은 제외된다.