사용기술
prettier, eslint, rollup, ts, storybook
기존 기술 스택에 babel도 포함되어 있었으나 생각을 해보면 웹페이지로 띄우는 게 아니고 react에서 사용하는 ui라이브러리 이기 때문에 하위 호환성을 생각해서 변환해줄 필요가 없다.
Pacakge.json
패키지를 만들때 기본적인 정보와 설정 내용을 package.json파일에 적어둔다
{
"private": false,
// 배포를 하기위해서는 false로 설정되어야 한다.
"main": "dist/cjs/index.js",
// 기본적인 진입경로를 설정한 파일이다. 번들이 된 파일을 지정한다. 여기서는 commonJs파일의 진입 파일을 설정한 것이다.
"module": "dist/esm/index.js",
// 기본적인 진입경로를 설정한 파일이다. 번들이 된 파일을 지정한다. 여기서는 es모듈 파일의 진입 파일을 설정한 것이다.
"types": "dist/index.d.ts",
// 타입스크립트를 사용할시 타입들을 지정해놓은 파일을 설정해 둔것이다.
"files": [
"/dist"
],
// files 값을 명시하면 여기에서 지정한 경로만 패키지에 포함이 됨.
}
Rollup
번들링 시스템은 webpack도 있다 처음에 시도해봤으나 es모듈을 만드는 게 어려워서 그냥 Rollup을 사용했다. 패키지를 만들 때는 Rollup을 많이 사용하는 듯하다.
패키지에 타입을 포함하고 싶을 때 두 가지 방법으로 처리하는 것 같다
- 각 파일에 대한 타입을 만들어서 빌드 시에 타입을 전부 합치는 방법 사용(dts 플러그인 사용)
- 타입 파일을 따로 만들어서 그대로 빌드 파일에 올리는 방법 사용
이중에 나는 2번을 사용해서 타입 폴더를 따로 만들었다.
- Rollup시 모듈을 읽을 수 없는 에러
꼼수) 인터넷 예시처럼 import구문을 사용하려 하였지만 터미널에서 자꾸 cjs로 인식해서 그냥 cjs로 작성했다.
const resolve = require('@rollup/plugin-node-resolve');
const commonjs = require('@rollup/plugin-commonjs');
const typescript = require('rollup-plugin-typescript2');
const dts = require('rollup-plugin-dts');
//타입스크립트 번들링 플러그인이다 타입만 번들링할 수도 있다.
const packageJson = require('./package.json');
module.exports = [
{
input: 'src/index.ts', // 어느 파일로 진입할 것인지 설정한다.
output: [
{
file: packageJson.main, // 패키지에서 적었던 main경로로 output을 만든다.
format: 'cjs', //출력 형식
sourcemap: true, // 소스맵을 켜놔서 디버깅을 쉽게 만들자
},
{
file: packageJson.module,
format: 'esm',
sourcemap: true,
},
],
plugins: [resolve(), commonjs(), typescript({ tsconfig: './tsconfig.json' })],
},
{
input: 'dist/esm/index.d.ts',
//위의 파일이 완성이 되면 esm파일에서 타입만 번들링 하기위해서 타입의 진입점을 지정한다.
output: [{ file: 'dist/index.d.ts', format: 'esm' }],
//
plugins: [dts.default()],
},
];
정석)
에러가 나는 이유는 버전 차이 때문에 그랬다 롤업 3 버전에서와 의 오류가 났다.
해결법
- node를 17 버전으로 올려서 확장자명을. mjs로 변경
- rollup을 2 버전대로 내리기
node 17을 사용하면 스토리북 에러와 json파일을 불러오지 못해 rollup을 2 버전대로 내려서 작업하였다.
https://github.com/rollup/rollup/issues/4446
수정후
// rollup.config.js
import { default as resolve } from '@rollup/plugin-node-resolve';
import { default as commonjs } from '@rollup/plugin-commonjs';
import { default as typescript } from 'rollup-plugin-typescript2';
import packageJSON from './package.json';
export default [
{
input: 'src/social-buttons/index.ts',
output: [
{
file: packageJSON.main,
format: 'cjs',
sourcemap: true,
},
{
file: packageJSON.module,
format: 'esm',
sourcemap: true,
},
],
plugins: [resolve(), commonjs(), typescript({ useTsconfigDeclarationDir: true, tsconfig: './tsconfig.json' })],
},
];
패키지 파일에 명령어를 추가해서 사용할 수 있다.
// package.json
{
// ...
"scripts": {
"build": "rollup -c",
}
}
c(config): 프로젝트 루트 디렉터리에 별도 설정 파일(rollup.config.js)을 사용하겠다는 뜻입니다.
w(watch): 변경 사항을 감지하여 자동 빌드를 수행합니다.
tsconfig.json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "@emotion/react",
"target": "es2016",
"module": "ES2015",
"moduleResolution": "node",
"declaration": true,
"declarationDir": "./dist/types",
"sourceMap": true,
"outDir": "./dist",
"noEmit": false,
"esModuleInterop": true,
"strict": true,
"skipLibCheck": true,
"baseUrl": "./src/social-buttons",
},
"include": ["src"],
"exclude": ["**/*.stories.tsx"]
}
배포
yarn publish
다음 명령어로 npm에 배포할 수 있다 (계정 필요)
완성품
https://github.com/Yoon-Hae-Min/react-social-buttons-kr
후기
짧은 토이 프로젝트로 진행한 거여서 많은 것을 경험하기는 힘들었지만 타입 스크립트로 간단한 라이브러리를 만들면서 실제 라이브러리들이 어떻게 구성이 되어있는지 알게 되는 계기가 되었다.
참고자료
How to Create and Publish a React Component Library
Rollup 기반 라이브러리 개발 환경 구성하기 - 재그지그의 개발 블로그
rollup으로 라이브러리 npm에 배포하기 - chanyeong
https://github.com/velopert/velo-ui
'구 게시글 > 라이브러리 소개' 카테고리의 다른 글
react-countdown-circle-timer 소개 (0) | 2022.05.28 |
---|