롤업JS(Rollup.js) 완벽 마스터: 쉽고 빠른 자바스크립트 번들링 가이드

롤업JS(Rollup.js) 마스터하기: 깊이 있는 탐구

롤업JS(Rollup.js) 기본 사용법 소개

롤업JS(Rollup.js)는 자바스크립트(JavaScript) 번들링(bundling) 도구입니다.

이 글에서는 롤업JS(Rollup.js)의 기본적인 사용법을 자세히 소개하고자 합니다.

1. 소개

번들링 도구의 역할

번들링 도구(Bundling tools)는 여러 개의 자바스크립트(JavaScript) 스크립트(script) 파일을 하나로 합쳐서 브라우저(browser)에서 사용할 수 있도록 만들어 줍니다.

브라우저(browser) 환경에서 스크립트(script) 번들링(bundling)이 필요한 주된 이유는 크게 세 가지입니다.

초기 브라우저의 모듈 지원 문제

초기 브라우저(browser)들은 모듈(module) 시스템을 지원하지 않았습니다.

따라서 대규모 웹 프로젝트에서는 여러 스크립트(script) 파일을 실행 전에 하나의 파일로 합쳐야만 했습니다.

모듈 메커니즘 호환성

노드JS(Node.js)의 모듈(module) 메커니즘(mechanism)(CommonJS)은 브라우저(browser)와 호환되지 않습니다.

따라서 번들링 도구(bundling tool)를 통해 처리해야만 브라우저(browser)에서 정상적으로 사용할 수 있습니다.

성능 최적화

성능 관점에서 볼 때, 브라우저(browser)가 여러 개의 작은 스크립트(script) 파일을 로드(load)하는 것보다 하나의 큰 스크립트(script) 파일을 로드(load)하는 것이 더 효율적입니다.

HTTP 요청 횟수를 줄여 로딩 효율을 높일 수 있기 때문입니다.

현재 가장 널리 사용되는 번들링 도구(bundling tool)는 웹팩(Webpack)입니다.

웹팩(Webpack)은 기능이 강력하여 거의 모든 종류의 복잡한 번들링(bundling) 요구사항을 만족시킬 수 있습니다.

하지만 설정이 복잡하고 학습 비용이 높아 사용하기 비교적 번거롭다는 점 때문에 개발자들로부터 항상 비판을 받아왔습니다.

롤업JS(Rollup.js)는 사용하기 쉬운 ES 모듈(ES module) 번들링 도구(bundling tool)를 만들자는 초기 목표를 가지고 개발되었습니다.

사용자는 복잡한 설정 없이 바로 사용할 수 있습니다.

이런 측면에서 롤업JS(Rollup.js)는 정말 훌륭한 성과를 보여주었습니다.

지속적인 발전을 통해 롤업JS(Rollup.js)는 커먼JS(CommonJS) 모듈(module)을 번들링(bundling)하는 능력도 갖추게 되었습니다.

하지만 커먼JS(CommonJS) 모듈(module)을 번들링(bundling)할 때는 복잡한 설정이 필요합니다.

이 경우에는 사실 웹팩(Webpack)보다 훨씬 간단하다고 말하기는 어렵습니다.

따라서 롤업JS(Rollup.js)의 장점을 최대한 활용하려면 ES 모듈(ES module) 번들링(bundling)에만 사용하는 것을 권장합니다.

아래 내용은 롤업JS(Rollup.js)를 사용하여 ES 모듈(ES module)을 번들링(bundling)하는 것이 얼마나 간단한지 보여줄 것입니다.

만약 여러분의 프로젝트가 커먼JS(CommonJS) 모듈(module)을 사용한다면, 롤업JS(Rollup.js)의 장점이 크게 두드러지지 않으므로 적극적으로 추천하기는 어렵습니다.

ES 모듈(ES module)과 커먼JS(CommonJS) 모듈(module)의 차이점에 대해 잘 모른다면, ES6 튜토리얼(tutorial)을 참고할 수 있습니다.

2. 설치

이 글에서는 롤업JS(Rollup.js)를 전역(global)으로 설치하는 방식을 사용합니다.

명령어는 다음과 같습니다.

$ npm install --global rollup

 

하지만 설치 없이 사용할 수도 있습니다.

모든 명령어에서 rollup 대신 npx rollup을 사용하면 됩니다.

처음 사용할 때는 다음 명령어를 실행하여 도움말 정보를 확인할 수 있습니다.

$ rollup --help
# 또는
$ npx rollup --help

 

3. 예제

다음으로, 롤업JS(Rollup.js)를 사용하여 두 개의 간단한 스크립트(script)를 번들링(bundling)해 보겠습니다.

라이브러리(library) 파일인 add.js와 진입점 스크립트(entry script)인 main.js입니다.

add.js

const PI = 3.14;
const E = 2.718;

export function addPi(x) {
  return x + PI;
}

export function addE(x) {
  return x + E;
}

 

위 코드에서 add.js 모듈(module)은 addPi()와 addE()라는 두 개의 유틸리티 함수(utility function)를 내보냅니다(export).

main.js

import { addPi } from './add.js';

console.log(addPi(10));

 

이 코드에서 진입점 스크립트(entry script) main.js는 add.js로부터 유틸리티 함수(utility function) addPi()를 불러옵니다(import).

번들링 작업

롤업JS(Rollup.js)를 사용하여 번들링(bundling)합니다.

명령어는 다음과 같습니다.

$ rollup main.js

 

번들링(bundling)할 때는 진입점 스크립트(entry script)인 main.js만 지정하면, 롤업(Rollup)이 의존성(dependency)을 자동으로 함께 번들링(bundling)합니다.

번들링(bundling) 결과는 기본적으로 화면에 출력되며, 내용은 다음과 같습니다.

const PI = 3.14;

function addPi(x) {
  return x + PI;
}

console.log(addPi(10));

 

import와 export 구문이 사라지고 원래 코드로 대체된 것을 볼 수 있습니다.

또한, addE() 함수는 main.js에서 사용되지 않았기 때문에 번들링(bundling) 결과에 포함되지 않았습니다.

이 기능을 트리 쉐이킹(tree-shaking)이라고 부르며, 즉 번들링(bundling) 과정에서 사용되지 않는 코드를 자동으로 제거하는 기능입니다.

위 두 가지 특징 때문에, 롤업(Rollup)이 출력하는 코드는 매우 깔끔하고 다른 번들링 도구(bundling tool)들의 결과보다 크기가 작습니다.

만약 번들링(bundling) 결과를 특정 파일에 저장하고 싶다면, --file [파일명] 파라미터(parameter)를 사용하면 됩니다.

명령어는 다음과 같습니다.

$ rollup main.js --file bundle.js

 

위 명령어는 번들링(bundling) 결과를 bundle.js 파일에 저장합니다.

4. 사용 시 주의사항

여러 개의 진입점 스크립트 (Multiple Entry Scripts)

만약 진입점 스크립트(entry script)가 여러 개 있다면, 해당 파일 이름들을 순서대로 입력하고 --dir 파라미터(parameter)를 사용하여 출력 디렉토리(directory)를 지정해야 합니다.

예를 들면 다음과 같습니다.

$ rollup m1.js m2.js --dir dist

 

위 명령어는 dist 디렉토리(directory) 안에 m1.js, m2.js 그리고 이들의 공통 의존성(dependency)(만약 있다면)을 포함한 여러 개의 번들링된 파일을 생성합니다.

자동 실행 함수 래핑 (IIFE)

--format iife 파라미터(parameter)를 사용하면 번들링(bundling) 결과를 즉시 실행 함수 표현식(immediately-invoked function expression, IIFE) 안에 넣습니다.

명령어는 다음과 같습니다.

$ rollup main.js --format iife

 

코드 최소화 (Minification)

번들링(bundling) 후 코드를 최소화하고 싶다면, --compact 파라미터(parameter)를 사용할 수 있습니다.

명령어는 다음과 같습니다.

$ rollup main.js --compact

 
또한, 코드 최소화를 위해 전문적인 도구를 사용할 수도 있습니다.

예를 들면 다음과 같습니다.

$ rollup main.js | uglifyjs --output bundle.js

 

위 명령어는 두 단계로 실행됩니다.

첫 번째 단계는 롤업(Rollup)으로 번들링(bundling)하고, 두 번째 단계는 어글리파이JS(uglifyjs)를 사용하여 코드를 최소화합니다.

마지막으로 결과를 bundle.js 파일에 저장합니다.

설정 파일 (Configuration File)

롤업(Rollup)은 설정 파일(rollup.config.js) 사용을 지원하며, 모든 파라미터(parameter)를 이 파일 안에 작성할 수 있습니다.

예시는 다음과 같습니다.

// rollup.config.js
export default {
  input: 'main.js', // 입력 파일
  output: {
    file: 'bundle.js', // 출력 파일
    format: 'es' // 출력 포맷 (ES 모듈)
  }
};

 

-c 파라미터(parameter)를 사용하여 설정 파일을 활성화합니다.

명령어는 다음과 같습니다.

$ rollup -c

 
하지만 저는 개인적으로 설정 파일을 사용하는 것을 추천하지 않습니다.

추가적인 복잡성을 더하기 때문입니다.

기본 시나리오에서는 커맨드 라인(command-line) 파라미터(parameter)만으로 충분하며, 커맨드 라인(command-line) 파라미터(parameter)의 표현이 읽기에도 더 쉽습니다.

5. 커먼JS(CommonJS) 모듈로 변환하기

마지막으로, 롤업(Rollup)은 ES 모듈(ES module)을 커먼JS(CommonJS) 모듈(module)로 변환하는 것도 지원합니다.

--format cjs 파라미터(parameter)를 사용하기만 하면 됩니다.

명령어는 다음과 같습니다.

$ rollup add.js --format cjs

 
변환된 커먼JS(CommonJS) 모듈(module) 코드는 다음과 같습니다.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const PI = 3.14;
const E = 2.718;

function addPi(x) {
  return x + PI;
}

function addE(x) {
  return x + E;
}

exports.addE = addE;
exports.addPi = addPi;

---