[rollup.js] 환경 설정하기(2) - 플러그인 정리하기

이 글은 이전에 삽질했던 기록을 바탕으로 많이 진행된 상태에서 작성하는 글이다.

삽질 기록 ⬇

2024.05.13 - [개발/Bundle] - [rollup.js] 환경 설정하기 - 오류(1)

[rollup.js] 환경 설정하기(1) - 오류 해결하기

개요

ES5,ES6,제이쿼리로 만들어진 프로젝트를 리액트 환경에서 실행될 수 있도록 지원하는 프로젝트를 사내에서 진행하고 있는데 UMD 예제를 지원할 수 있어야 했다. UMD가 뭐지? 란 의문이 생길 수 있기 때문에 UMD에대해서도 따로 글로 정리해서 남길 수 있도록 할 예정이다. UMD는 짧게 설명하면 Universal Module Definition의 약자로 JavaScript 모듈을 정의하는 방법 가운데 하나이다. 모듈 정의의 다른 방법은 CommomJS, AMD 등이 있는데 이 부분도 UMD를 정리할 때 같이 정리하도록 해야겠다.

 

그래서, UMD 예제를 지원하기 위해서 rollup.js 라는 번들러를 채택했고 어떻게 하면 적용할 수 있는지 알아보았다.

레퍼런스가 매우 적어서 우리의 친구 Chat GPT와 Copilot 에게 물어봤다.

 

rollup.js에서 환경설정

기본적으로 번들러를 사용하기 위해서는 그냥 rollup 이라는 플러그인을 다운받는다고 해서 사용할 수 있지 않다.

환경설정을 할 수 있는 config 같은 파일이 필요할 것이라고 생각했고 찾아본 결과 node_modules에서 외부 종속성 패키지를 가져오고 있기 때문에 rollup.config.mjs 라는 이름으로 환경설정 파일을 만들어야 했다.

 

rollup 환경설정 파일

rollup은 기본적으로 rollup.config.js 파일을 찾는다. 하지만 이 파일이 ES 모듈 형식이 아닌경우 오류가 발생할 수 있다.

따라서 ES 모듈 형식을 사용하는 설정 파일의 경우 .mjs 확장자를 사용하는 것이고 import와 export 와 같은 문법을 사용하여 모듈을 가져오거나 내보낼 수 있게 되는 것이다.

 

기본적으로 사용해야하는 rollup.js 플러그인

사실 기본이라는 말이 프로젝트마다 다르다고 생각이 든다. 내가 진행하고 있는 프로젝트에서 사용하고 있는 기술 스택을 생각 했을 때 기본으로 사용해야하는 플러그인들을 정리해봤다.

import babel from'@rollup/plugin-babel';
import { nodeResolve } from'@rollup/plugin-node-resolve';
import commonjs from'@rollup/plugin-commonjs';
import typescript from'@rollup/plugin-typescript';
import replace from'@rollup/plugin-replace';
import peerDepsExternalPlugin from'rollup-plugin-peer-deps-external';

@rollup/plugin-babel

-> Babel을 사용하여 코드를 변환하는 역할.

최신 JavaScript 문법을 브라우저에서 호환 가능한 문법으로 변환하는데 사용.

@rollup/plugin-node-resolve

->  Node.js 해석 알고리즘을 따르는 모듈을 해석하는 역할.

node_modules에서 패키지를 가져오거나, 사용자가 작성한 모듈을 상대 경로나 절대 경로로 가져올 수 있음 .

@rollup/plugin-commonjs

-> CommonJs 형식의 모듈을 ES6 모듈 형식으로 변환하는 역할.

Node.js 환경에서 작성된 모듈을 브라우저 환경에서도 사용할 수 있게 해준다.

@rollup/plugin-typescript

-> TypeScript 코드를 JavaScript 코드로 변환하는 역할.

이를 통해 TypeScript로 작성된 소스 코드를 일반 JavaScript 환경에서도 실행할 수 있게 해준다.

 

환경설정

이 부분은 자세히 작성하기가 애매해서 rollup의 튜토리얼 가이드를 가져왔다.

// rollup.config.mjs
import json from '@rollup/plugin-json';
import terser from '@rollup/plugin-terser';

export default {
    external : [/node_modules/]
    // 번들의 시작점 정의
	input: 'src/main.js',
    // 출력 설정을 정의
	output: [
		{
			file: 'bundle.js',
			format: 'cjs'
            	//commonjs 형식으로 번들을 출력
		},
		{
			file: 'bundle.min.js',
			format: 'iife',
			name: 'version',
			plugins: [terser()]
		}
	],
	plugins: [json()]
};

 

webpack의 설정과 크게 다를 것은 없지만, rollup에서는 ouput에서 번들의 이름과 어떤 형식으로 번들을 출력할 것인지 정할 수 있었다. 예를 들면 UMD 형식으로 번들을 출력하고 싶다면 아래와 같은 형태로 설정을 적용해주면 된다.

output : [
            {
                name : 'ProjectName',
                // UMD 형식으로 번들을 출력합니다.
                file : 'dist/index.umd.js',
                format : 'umd',
            }
        ]

 

plugins 부분에는 처음에 import 하여 선언한 플러그인들을 알맞게 적용하여 사용하면 된다.

rollup 플러그인 사용
plugins : [
	replace({ENVIROMENT : JSON.stringify('production')}),
    // 환경 변수를 'production'으로 설정합니다.
    nodeResolve({extension : extension}),
    // nodeResolve 플러그인을 사용하여 모듈 해석을 돕습니다.
    ....
]

 

추가로 필요한 설정은 rollup 공식 문서를 참조해보자.

 

마무리

webpack과 같은 번들러로써 사용되는 rollup에 대해서 환경설정을 설정하는 방법에 대해서 알아봤다.

rollup에 대해서 많은 것을 알지는 못하지만 지금 나에게 필요한 설정과 내용은 알고 넘어가는 것 같아서 다행이다.

처음에는 rollup에 대한 레퍼런스도 엄청 적고 현재 맡고 있는 프로젝트의 라이프 사이클이 욕나올 정도로 이상해서

리액트에서 지원을 할 수 있을까..? 라는 생각이 들며 진행이 더뎌졌는데 하나씩 해결해 나가고 rollup도 적용할 수 있는 단계로 와서 많이 발전했다고 생각한다. 

 

이 글이 부족한 rollup 환경 설정에 도움이 되길 빌며 잘못된 내용 또는 추가됐으면 하는 내용을 알려주시면 최대한 반영하도록 하겠다 !