Rollup.js 기본 사용법 소개

Rollup.js는 JavaScript 번들링 도구입니다. 이 글에서는 기본적인 사용법을 자세히 소개합니다.

I. 서론

번들링 도구의 역할

번들링 도구는 여러 JavaScript 스크립트를 하나의 스크립트로 결합하여 브라우저에서 사용할 수 있게 합니다. 브라우저에 스크립트 번들링이 필요한 주된 이유는 세 가지입니다.

초기 브라우저 모듈 지원 문제: 초기 브라우저는 모듈을 지원하지 않았습니다. 대규모 웹 프로젝트의 경우 여러 스크립트를 실행하기 전에 단일 스크립트로 결합해야 했습니다.
모듈 메커니즘 호환성: Node.js의 모듈 메커니즘은 브라우저와 호환되지 않습니다. 브라우저에서 제대로 사용하려면 번들링 도구를 통해 처리해야 합니다.
성능 최적화: 성능 관점에서 볼 때 브라우저가 여러 개의 작은 스크립트보다 하나의 큰 스크립트를 로드하는 것이 좋습니다. 이렇게 하면 HTTP 요청 수를 줄여 로딩 효율성을 높일 수 있습니다.

현재 가장 일반적으로 사용되는 번들링 도구는 Webpack입니다. 강력하며 거의 모든 종류의 복잡한 번들링 요구 사항을 충족할 수 있습니다. 그러나 구성이 복잡하고 학습 비용이 높으며 사용하기가 상대적으로 번거로워 개발자들에게 항상 비판을 받아왔습니다.

Rollup.js는 사용하기 쉬운 ES 모듈 번들링 도구를 만들려는 원래 의도로 개발되었습니다. 사용자는 복잡한 구성 없이 직접 사용할 수 있습니다. 이 점에서 정말 잘 해냈습니다. 지속적인 개발을 통해 Rollup.js는 CommonJS 모듈을 번들링하는 기능도 얻었습니다. 그러나 CommonJS 모듈을 번들링할 때는 복잡한 구성이 필요합니다. 이 경우 Webpack보다 실제로 훨씬 간단하지 않습니다.

따라서 Rollup.js는 ES 모듈을 번들링하는 데만 사용하여 장점을 최대한 활용하는 것이 좋습니다. 다음 내용에서는 Rollup.js를 사용하여 ES 모듈을 번들링하는 것이 얼마나 간단한지 보여줍니다. 프로젝트에서 CommonJS 모듈을 사용하는 경우 Rollup.js는 장점이 뚜렷하지 않으므로 적극적으로 권장하지 않습니다. ES 모듈과 CommonJS 모듈의 차이점에 대해 잘 모르는 경우 ES6 튜토리얼을 참조할 수 있습니다.

II. 설치

이 글에서는 Rollup.js가 전역적으로 설치됩니다. 명령어는 다음과 같습니다.

$ npm install --global rollup

그러나 설치 없이도 사용할 수 있습니다. 방법은 모든 명령어에서 rollup을 npx rollup으로 바꾸는 것입니다.

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

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

III. 예시

다음으로 Rollup.js를 사용하여 두 개의 간단한 스크립트인 라이브러리 파일 add.js와 엔트리 스크립트 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는 두 개의 유틸리티 함수 addPi()와 addE()를 내보냅니다.

main.js

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

console.log(addPi(10));

이 코드에서 엔트리 스크립트 main.js는 add.js에서 유틸리티 함수 addPi()를 로드합니다.

번들링 작업

Rollup.js를 사용하여 번들링합니다. 명령어는 다음과 같습니다.

$ rollup main.js

번들링할 때는 엔트리 스크립트 main.js만 지정하면 Rollup이 자동으로 종속성을 번들링합니다. 번들링 결과는 기본적으로 화면에 출력되며 내용은 다음과 같습니다.

const PI = 3.14;

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

console.log(addPi(10));

import 및 export 문이 사라지고 원래 코드로 대체된 것을 볼 수 있습니다. 또한 함수 addE()는 main.js에서 사용되지 않았기 때문에 번들링되지 않았습니다. 이 기능을 트리 쉐이킹이라고 하며, 번들링 중에 사용되지 않는 코드를 자동으로 삭제하는 것입니다. 위 두 가지 사항 때문에 Rollup에서 출력하는 코드는 다른 번들링 도구보다 매우 깔끔하고 크기가 작습니다.

번들링 결과를 지정된 파일에 저장하려면 --file [FILENAME] 파라미터를 사용할 수 있습니다. 명령어는 다음과 같습니다.

$ rollup main.js --file bundle.js

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

IV. 사용 시 주의사항

여러 엔트리 스크립트

여러 개의 엔트리 스크립트가 있는 경우 파일 이름을 순서대로 채우고 --dir 파라미터를 사용하여 출력 디렉토리를 지정해야 합니다. 예를 들어:

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

위 명령어는 dist 디렉토리에 m1.js, m2.js 및 해당 공통 종속성(있는 경우)을 포함하여 여러 파일을 번들링하고 생성합니다.

자동 실행 함수 래핑

--format iife 파라미터를 사용하면 번들링 결과가 즉시 호출되는 함수 표현식 내부에 배치됩니다. 명령어는 다음과 같습니다.

$ rollup main.js --format iife

코드 최소화

번들링 후 코드를 최소화하려면 --compact 파라미터를 사용할 수 있습니다. 명령어는 다음과 같습니다.

$ rollup main.js --compact

또한 특수 도구를 사용하여 코드 최소화를 달성할 수도 있습니다. 예를 들어:

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

위 명령어는 두 단계로 실행됩니다. 첫 번째 단계는 Rollup으로 번들링하는 것이고 두 번째 단계는 uglifyjs를 사용하여 코드를 최소화하는 것입니다. 마지막으로 결과가 bundle.js 파일에 기록됩니다.

구성 파일

Rollup은 모든 파라미터가 작성된 구성 파일(rollup.config.js) 사용을 지원합니다. 다음은 예입니다.

// rollup.config.js
export default {
  input: 'main.js',
  output: {
    file: 'bundle.js',
    format: 'es'
  }
};

-c 파라미터를 사용하여 구성 파일을 활성화합니다. 명령어는 다음과 같습니다.

$ rollup -c

그러나 추가적인 복잡성이 추가되기 때문에 구성 파일 사용은 권장하지 않습니다. 기본 시나리오에서는 명령줄 파라미터로 충분하며 명령줄 파라미터의 표현식도 읽기가 더 쉽습니다.

V. CommonJS 모듈로의 변환

마지막으로 Rollup은 ES 모듈을 CommonJS 모듈로 변환하는 기능도 지원합니다. --format cjs 파라미터를 사용하기만 하면 됩니다. 명령어는 다음과 같습니다.

$ rollup add.js --format cjs

변환된 CommonJS 모듈 코드는 다음과 같습니다.

'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;