빌드 설정 파일(rollup.config.cjs) 파헤치기

지금 진행하고있는 오픈소스 라이브러리 프로젝트에서는 nx로 모노레포 방식을 구현하고, 

배포할 @aicody-ui/react 라이브러리는 React와 Tailwind CSS, 그리고 빌드 도구로 rollup을 선택해서 구성했다.

 

그러고나니 aicody-ui/libs/react 폴더에 rollup.config.cjs라는 파일이 생겼다.

const { withNx } = require('@nx/rollup/with-nx');
const url = require('@rollup/plugin-url');
const svg = require('@svgr/rollup');

module.exports = withNx(
  {
    main: './src/index.ts',
    outputPath: './dist',
    tsConfig: './tsconfig.lib.json',
    compiler: 'babel',
    external: ['react', 'react-dom', 'react/jsx-runtime'],
    format: ['esm'],
    assets: [{ input: '.', output: '.', glob: 'README.md' }],
  },
  {
    plugins: [
      svg({
        svgo: false,
        titleProp: true,
        ref: true,
      }),
      url({
        limit: 10000, // 10kB
      }),
    ],
  }
);

 

각각 무슨 의미를 지니고 있는지 궁금해서 찾아보고 정리해보았다.

 

첫 번째 라인에서 withNx가 나오는데, NX가 제공하는 withNx 함수는 두 개의 객체(옵션 집합)을 인자로 받고,

이 둘을 합쳐서 최종 Rollup 설정을 만들어내는 고차 함수 형태로 동작한다.

이 두 개의 객체는 각각 NX 기본 설정과 사용자가 전달한 옵션으로, 아래와 같이 호출하면 된다.

withNx(nxOptions, rollupOptions);

 

NX 기본 설정

NX가 제공하는 Rollup 래퍼(@nx/rollup/with-nx)에서 인식하는 NX 전용 옵션들이 들어간다.

https://nx.dev/nx-api/rollup/generators/configuration#rollupconfig

@nx/rollup:configuration | Nx

 

main

라이브러리 빌드 시 진입점(entryFile) 경로를 지정한다.

Rollup은 이 파일을 시작으로 import 그래프를 순회해서 전체 코드를 번들링한다.

 

outputPath

최종 번들 파일이 생성될 폴더(출력 경로)다.

 

tsConfig

TypeScript 설정 파일의 경로를 지정한다.

Rollup이 TypeScript를 처리할 때 이 설정을 참조한다.

 

compiler

NX에서 제공하는 컴파일러 옵션을 지정한다.

선택할 수 있는 값으로는 babel, swc, tsc가 있고, default는 babel이다.

 

external

번들 결과물에 포함시키지 않고, 외부(External) 모듈로 처리할 라이브러리 목록이다.

라이브러리를 사용하게 될 사용자 측에서 React와 같은 라이브러리들을 직접 설치해서 사용하게 할 것이기 때문에 여기에 포함된다.

 

format

빌드 결과물의 모듈 포맷을 지정한다.

['cjs', 'esm']과 같이 여러 포맷으로 지정할 수도 있다.

 

assets

빌드할 때 특정 asset을 복사하는 설정이다.

input은 소스 경로, output은 최종 출력 위치, glob는 어떤 파일을 매칭할 지 결정한다.

 

이 외에도 공식문서에 나와있는 것처럼, project, buildTarget, importPath 등의 옵션도 있다.

일단 나는 기본 설정으로 되어있는 상태고, 이후 사용여부에 따라 많이 달라질 예정이다.

 

사용자 확장 Rollup 설정

일반적인 Rollup 설정(plugins, output, 등)을 확장하거나 오버라이드할 때 사용하는 객체다.

딱히 다른 조작 없이 기본적으로 @rollup/plugin-url과 @svgr/rollup이 지정되어있다.

 

@rollup/plugin-url

Rollup에서 이미지나 폰트 등 파일을 가져왔을 때, 일정 크기 이하의 파일은 data URL(인라인)로 변환하고, 일정 크기 이상은 별도의 파일로 복사해주는 플러그인이다.

아래에서 limit: 10000의 의미는 10KB를 의미한다.

즉, 10KB 이하의 파일은 Base64-encoded data URL로 변환되고, 10KB 보다 큰 파일은 별도의 파일로 생성한다는 의미다.

 

@svgr/rollup

SVG 파일을 React 컴포넌트로 변환해주는 플러그인이다.

svgo는 SVG 최적화 도구(svgo) 사용 여부를 말하고, titleProp은 React 컴포넌트에 title 속성의 형태를 사용할 수 있게할 것인지 여부를 나타내며, ref는 컴포넌트가 ref를 사용할 수 있게할 것인지의 여부를 나타낸다.

// 예를 들어
import Logo from './logo.svg'
// 이렇게 하면 Logo가 React 컴포넌트가 되어 아래처럼 사용 가능
<Logo />

 

앞으로 컴포넌트 생성 구조가 자리잡히고 사용할 플러그인이 늘어나면 이 파일의 코드도 늘어날것이다.

어느 정도 완성이 된 후에 다시 한 번 정리해보려고 한다!