빌드 도구 - 모듈 번들러, Rollup

Rollup.js

Rollup은 webpack이나 parcel과 같이, 크고 복잡한 코드의 모듈(파일)을 라이브러리나 애플리케이션으로 만들어주는 ES6 환경 기반의 모듈 번들러다.

webpack에 비해 속도가 빠르고 번들링된 결과물이 가볍다. ES6 모듈 형태로 빌드 결과물을 출력할 수 있으므로, 이를 라이브러리나 패키지에 활용할 수 있다. 하지만 webpack이 제공하는 개발 서버가 다른 번들러에 비해 뛰어나고, 성능 또한 안정적이다. 거대한 애플리케이션을 만들 것이라면 webpack을 추천하지만, 남들이 사용할 라이브러리를 구축할 것이라면 Rollup이 좋다고 한다.

 

 

사용 방법

Rollup은 JavaScript API 또는 CLI로 이용할 수 있다.

 

JavaScript API로 사용하기

$ npm install -g rollup

var rollup = require( 'rollup' );

var cache;
rollup.rollup({
  entry: 'main.js',
  cache: cache
}).then( function ( bundle ) {
  var result = bundle.generate({
    format: 'cjs'
  });
  cache = bundle;
  fs.writeFileSync( 'bundle.js', result.code );

  bundle.write({
    format: 'cjs',
    dest: 'bundle.js'
  });
});

 

CLI (Command Line Interface)로 사용하기

$ rollup -h  # help (사용법)
$ rollup -c  # config (설정 파일 지정)

// rollup.config.js
import buble from 'rollup-plugin-buble';
export default {
  entry: 'src/main.js',
  dest: 'dist/bundle.js',
  format: 'umd',
  plugins: [ buble() ]
};

 

 

참고할 자료

https://velog.io/@subin1224/Parcel-vs-Rollup-vs-Webpack-%EB%B9%84%EA%B5%90

Parcel vs Rollup vs Webpack 비교

 

https://github.com/rollup/rollup

GitHub - rollup/rollup: Next-generation ES module bundler