React로 라이브러리 만들어보기

사용기술

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을 많이 사용하는 듯하다.

 

패키지에 타입을 포함하고 싶을 때 두 가지 방법으로 처리하는 것 같다

1. 각 파일에 대한 타입을 만들어서 빌드 시에 타입을 전부 합치는 방법 사용(dts 플러그인 사용)
2. 타입 파일을 따로 만들어서 그대로 빌드 파일에 올리는 방법 사용

이중에 나는 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 버전에서와 의 오류가 났다.

 

해결법

1. node를 17 버전으로 올려서 확장자명을. mjs로 변경
2. rollup을 2 버전대로 내리기

node 17을 사용하면 스토리북 에러와 json파일을 불러오지 못해 rollup을 2 버전대로 내려서 작업하였다.

https://github.com/rollup/rollup/issues/4446

Cannot use import statement outside a module rollup.config.js:1 · Issue #4446 · rollup/rollup

수정후

// 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

GitHub - 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