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 비교
Bundler는 의존성이 있는 모듈 코드를 하나 혹은 여러개의 파일로 만들어주는 도구 입니다. 웹팩 외에 다른 번들러인 Parcel, Rollup를 간단히 소개하고 비교 해봅시다.
velog.io
https://github.com/rollup/rollup
GitHub - rollup/rollup: Next-generation ES module bundler
Next-generation ES module bundler. Contribute to rollup/rollup development by creating an account on GitHub.
github.com
'웹_프론트엔드 > 로드맵 챌린지' 카테고리의 다른 글
빌드 도구 - Code Formatter, Prettier (0) | 2022.02.04 |
---|---|
빌드 도구 - 모듈 번들러, Parcel (0) | 2022.02.03 |
빌드 도구 - 모듈 번들러, webpack (0) | 2022.01.26 |
빌드 도구 - 태스크 러너, npm scripts (0) | 2022.01.25 |
CSS 후처리기 - PostCSS (0) | 2022.01.24 |