tsconfig의 설정까지 끝냈다면 이제 컴포넌트를 만들고, 번들링을 해보자.
우선 프로젝트에 리액트를 설치하고, 기본적인 파일들을 생성해 준다.
npm i --save-dev react react-dom @types/react
본 글에서는 버튼 라이브러리를 만들 예정이므로 컴포넌트 생성 후, src/components/Button/index.tsx와 src/index.ts에서 각각 default를 export 해주었다.
이제 프로젝트 번들링 및 배포를 위한 번들러를 설치해야 한다.
아래와 같이 롤업 플러그인을 설치해주자.
npm i --save-dev tslib @rollup/plugin-node-resolve @rollup/plugin-typescript @rollup/plugin-commonjs rollup-plugin-dts rollup-plugin-postcss
| tslib | typescript 런타임 라이브러리 |
| rollup | rollup 파일 |
| @rollup/plugin-node-resolve | node_modules에서 서드파티 모듈을 사용할 수 있게 해주는 플러그인 |
| @rollup/plugin-typescript | typescript 번들링 플러그인 |
| @rollup/plugin-commonjs | commonJs 형태의 모듈을 es형태로 변환해주는 플러그인 |
| rollup-plugin-dts | typescript 번들링 플러그인 (.d.ts 파일도 가능) |
| rollup-plugin-postcss | postcss 도구 지원 플러그인 |
@rollup/plugin-typescript vs rollup-plugin-typescript2
타입스크립트용 롤업 플러그인에는 위와 같은 두 종류가 있는데, 각각의 차이는 아래와 같다.
@rollup/plugin-typescript
- ts2보다 속도가 빠르다
- rollup 공식 지원 라이브러리
rollup-plugin-typescript2
- 타입 추론 지원
이제 rollup 설정파일을 작성해 보자. 프로젝트 최상위 폴더에 설정파일 생성 후, 아래 내용을 작성해 준다.
rollup.config.mjs
import resolve from "@rollup/plugin-node-resolve";
import typescript from "@rollup/plugin-typescript";
import commonjs from "@rollup/plugin-commonjs";
import dts from "rollup-plugin-dts";
import postcss from "rollup-plugin-postcss";
import packageJson from "./package.json" assert { type: "json" };
export default [
{
input: "src/index.ts", // 라이브러리의 접근 경로
output: [ // 결과물 저장 경로, 포맷
{
file: packageJson.main,
format: "cjs", // commonJs, ES6 이하 버전 사용 시 참조
sourcemap: true, // tsconfig에서 소스맵을 true로 설정했다면 같이해주기
},
{
file: packageJson.module,
format: "esm", // es module, ES6 사용 시 참조
sourcemap: true,
},
],
plugins: [
resolve(),
commonjs(),
typescript({
tsconfig: "./tsconfig.json",
}),
postcss({
extensions: [".css"],
inject: true, // css를 <head> 안으로 inject
modules: true,
minimize: true,
sourceMap: true,
}),
],
external: ["react", "react-dom", "react/jsx-runtime"], // 외부 라이브러리
},
{ // 타입 정의 파일 저장 경로
input: "dist/esm/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
plugins: [dts()],
external: [/\.css$/],
},
];
package.json
{
...
"main": "dist/cjs/index.js", // cjs 저장 경로
"module": "dist/esm/index.js", // esm 저장 경로
"scripts": {
"build": "rollup -c",
"dev": "rollup -c -w"
},
...
}
그리고 rollup 파일을 실행하면 dist 폴더 안에 아래와 같은 파일들이 생성되어 있는 것을 볼 수 있다.
jest / storybook / babel을 통해 라이브러리 테스팅하기
라이브러리를 배포하기 전, 내가 만든 컴포넌트가 정상 동작 하는 지 확인하기 위해 테스팅 라이브러리를 이용할 수 있다.
아래 명령어들을 통해 라이브러리를 설치 후 테스팅을 진행하자.
npx storybook@latest init
npm i -D jest @testing-library/jest-dom @testing-library/react jest-environment-jsdom
package.json
...
"jest": {
"testEnvironment": "jsdom"
},
...
위와 같이 jest만 설정 후 테스트코드를 실행해 보면 아래와 같은 오류 메세지를 받을 수 있다.
jest는 babel을 통해 typescript를 지원하기 때문이다. 따라서 jest 사용 시 babel도 함께 설정해 줘야 한다.
pnpm i -D @babel/preset-env @babel/preset-react @babel/preset-typescript
package.json
...
"babel": {
"sourceType": "unambiguous", // import/export문이 있으면 module, 없으면 script 취급
"presets": [
"@babel/preset-env", // 최신 문법을 컴파일해주는 프리셋
"@babel/preset-typescript", // 타입스크립트 프리셋
[
"@babel/preset-react", // 리액트 프리셋
{
"runtime": "automatic"
}
]
]
},
...
설정을 마치면 성공적으로 테스팅이 진행되는 것을 볼 수 있다.
컴포넌트 작성이 완료되었다면 라이브러리를 npm에 배포해 보자.
다음 시간에 계속
'공부 > React' 카테고리의 다른 글
| React+typescript 컴포넌트 라이브러리 생성하기 ④라이브러리 배포 (0) | 2024.07.02 |
|---|---|
| React+typescript 컴포넌트 라이브러리 생성하기 ②typescript 설치 (0) | 2024.06.27 |
| React+typescript 컴포넌트 라이브러리 생성하기 ①번들러 (0) | 2024.06.24 |
