Rollup - 소개 및 설치 (1)

이번 포스트부터는 빌드툴중의 하나인 Rollup 에 대해 다뤄볼까 합니다.

빌드툴 하면 다들 Webpack을 먼저 떠올리실 겁니다. 하지만 현재 Webpack 말고도 다양한 빌드툴들이 존재합니다. 그중 최근 몇년간 인기를 얻고있는 Rollup 이란 빌드툴이 있는데 저 또한 Rollup을 주로 사용하진 않았습니다.

하지만 간단한 라이브러리성 빌드와 관련된 작업을 몇개 진행하면서 Webpack 이 아닌 Rollup을 사용하게 되었고, 지금도 만족스럽게 이 Rollup을 사용하고 있습니다.

이번 포스트에서 아직 Rollup에 대해 잘 모르시는 분들을 위해 간단하게 소개 및 설치, 그리고 config 설정에 필요한 필수 정보에 대해서 알아보는 시간을 갖도록 하겠습니다. 또한 Rollup의 API 레퍼런스에 대해서 자세히 설명하기 보다는 간단하게 프로젝트에서 Rollup을 설치하고 자신의 소스를 최종 빌드할 수 있는 config 환경 설정 위주로 소개를 해볼까 합니다.

Rollup 이란?

Rollup은 작은 코드 조각을 라이브러리 나 응용 프로그램과 같이 더 크고 복잡한 것으로 컴파일하는 JavaScript 용 모듈 번들러입니다.

CommonJS 및 AMD와 같은 이전의 고유 한 솔루션 대신 JavaScript의 ES6 개정판에 포함된 코드 모듈에 대해 새로운 표준화 된 형식을 사용합니다. ES 모듈을 사용하면 자주 사용하는 라이브러리에서 가장 유용한 개별 기능을 자유롭게 완벽하게 결합 할 수 있습니다.

ES 모듈을 사용하는 것 외에도 Rollup은 가져온 코드를 정적으로 분석하며 실제로 사용되지 않는 것은 제외합니다. 따라서 추가 종속성을 추가하거나 프로젝트 크기를 늘리지 않고도 기존 도구 및 모듈을 기반으로 구축 할 수 있습니다.

Rollup에는 최소값이 포함되어 있기 때문에 더 가볍고 빠르며 덜 복잡한 라이브러리 및 응용 프로그램을 만들 수 있습니다. 이 방법은 명시 적 import및 export명령문을 사용할 수 있으므로 자동화 된 minifier를 실행하여 컴파일된 출력 코드에서 사용되지 않는 변수를 감지하는 것보다 효과적입니다.

CommonJS 가져 오기

롤업은 플러그인을 통해 기존 CommonJS 모듈 을 가져올 수 있습니다 .

ES 모듈 퍼블리싱

Node.js 및 Webpack과 같은 CommonJS와 함께 작동하는 도구로 ES 모듈을 즉시 사용할 수 있도록하기 위해 Rollup을 사용하여 UMD 또는 CommonJS 형식으로 컴파일한 다음, package.json 파일의 main특성을 사용하여 해당 컴파일 된 버전을 가리킬 수 있습니다.

설치하기

먼저 글로벌에 Rollup 을 설치합니다. 또는 프로젝트 내부에만 Rollup을 설치할 수 있습니다.

$ npm install -g rollup

또는 바로 프로젝트 내부에서

$ cd myRollupTest
$ npm init 
# 프로젝트 package.json이 없다면 설치합니다.

$ npm install rollup

그리고 rollup 설정 파일을 생성하여 작성합니다.

$ vi rollup.config.js

// rollup.config.js

export default {
  input: './src/index.js',
  output: {
    file: './dist/bundle.js',
    format: 'umd'
  }
};

그리고 input에 해당하는 index.js 의 파일을 생성하고 간단한 테스트 코드를 작성해봅니다.

$ vi src/index.js

// src/index.js

const test = 'hello world';

console.log(test);

그리고 빌드를 위한 package.json 설정을 진행합니다.

// package.json
...
"main": "src/index.js",
"scripts": {
    "build": "rollup -c -w"
}
...

그리고 터미널에서 빌드 명령어로 빌드를 진행합니다.

$ npm run build
# package.json 의 script 의 build 가 실행됩니다.

디렉터리를 확인해 보면 dist 폴더가 생성되어 있고 그안에 bundle.js 가 생성된걸 확인하셨다면 네! 성공입니다.

간단하게 설치 및 index.js 에 테스트 코드를 작성하고 가볍게 빌드를 진행해 보았습니다. 하지만 이게 Rollup의 전부는 아닙니다. 다음 편에서 Rollup의 빌드를 더욱도 완벽하게 완성해줄 각종 Plugin 들의 소개와 설치 및 설정에 대해서 알아보도록 하겠습니다.