[rollup.js]Introduction

Overview

Rollup은 라이브러리나 어플리케이션과 같이 좀 더 크고 복잡하게 작은 조각의 코드들을 컴파일하는 자바스크립트를 위한 모듈 번들러이다. Rollup은 이전에 기묘한 방식의 솔루션이었던 CommonJS나 AMD 대신에 자바스크립트의 ES6 개정판을 적용한 코드 모듈 포맷 표준을 사용한다. ES modules는 당신이 선호하는 라이브러리들에서 가장 편리하고 독립적인 함수들을 자유롭고 정교하게 혼합하도록 도와준다. 이건 결국 미래에는 자연스럽게 가능해질 기능이지만, Rollup은 지금하게 해준다.

 

Installation

npm install --global rollup

이 커맨드는 Rolup을 전역적인 커맨드라인 툴로 사용가능하도록 만들어준다. 또한 local로 인스톨할 수도 있다. Rollup을 local로 인스톨하는 섹션을 보라.

 

Creating Your First Bundle

시작하기 전에, NPM을 사용하기위해 Node.js가 설치되어 있어야 한다. 또한 어떻게 커맨드 라인에 접근하는지를 알고있어야 한다.

 

Rollup을 사용하는 가장 손쉬운 방법은 커맨드 라인 인터페이스 (CLI)를 사용하는 것이다. 현재, 우리는 전역적으로 설치할 것이다.(나중에 빌드 프로세스가 이동가능하도록 프로젝트에 지역적으로 설치하는 방법을 배울것이다. 하지만 지금은 크게 신경쓰지 않아도 된다.) 커맨드라인에 다음을 입력하라 :

npm install rollup --global
# or `npm i rollup -g` for short

이제 rollup커맨드를 실행할 수있다. 한번 해봐라!

rollup

왜냐하면, 아무런 아규먼트를 넘기지 않으면, Rollup은 사용법을 프린트한다. 이건 rollup --help 나 rollup -h와 똑같이 동작한다.

 

이제 간단한 프로젝트를 생성해보자 :

mkdir -p my-rollup-project/src
cd my-rollup-project

우선, 우리는 엔트리 포인트가 필요하다. src/main.js 라는 새로운 파일에 다음을 붙여넣어라:

// src/main.js
import foo from './foo.js';
export default function() {
  console.log(foo);
}

그 다음, 우리 엔트리 포인트에서 imports하는 foo.js 모듈을 만들자:

// src/foo.js
export default 'hello world!';

이제 우리는 번들을 만들 준비가 됐다:

rollup src/main.js -f cjs

-f 옵션(--format의 축약어)는 어떤 종류의 번들을 만들것인지 특정한다. 이 경우에는 (Node.js에서 실행할 수 있는)CommonJS이다. 왜냐하면, 우리는 아웃풋 파일을 특정하지 않았다. stdout으로 곧바로 프린트 될 것이다.

'use strict';
const foo = 'hello world!';

const main = function() {
  console.log(foo);
};

module.exports = main;

다음처럼 파일로서 번들을 저장할 수 있다:

rollup src/main.js -o bundle.js -f cjs

코드를 실행해보라:

node
> var myBundle = require('./bundle.js');
> myBundle();
'hello world!'

축하한다! 이제 Rolup을 사용해서 당신의 첫번째 번들을 만들어보았다!

 

 

--configPlugin <plugin>

이 커맨드는 설정 파일의 파싱을 변경하거나 제어하기 위한 롤업 플러그인을 특정할 수 있다. 이 커맨드의 주요 이점은 자바스크립트가 아닌 설정파일도 사용할 수 있게 해준다. 다음 예제는 @rollup/plugin-typescript 을 제공해주면, 타입스크립트로 설정파일을 작성할 수 있게 해준다.

rollup --config rollup.config.ts --configPlugin @rollup/plugin-typescript

주의: tsconfig.json 파일에 rollup.config.ts 경로를 "include"에 추가해야 한다. 

// tsconfig.json
"include": ["src/**/*", "rollup.config.ts"],