rollup 롤업(rollup.js)

Rollup is a module bundler for JavaScript which compiles small pieces of code into something larger and more complex, such as a library or application
참조 : https://rollupjs.org/guide/en/

• 롤업은 작은 조각의 코드를 더 크고 복잡한 것으로 컴파일해주는 자바스크립트를 위한 모듈번들러
• 작은 조각을 가져 와서 하나의 코드베이스로 묶는다. 이를 위해 명령행 또는 특정 구성 파일(rollup.config.js)을 사용할 수 있음
• tree shaking(트리쉐이킹) 지원 -> 번들링할 때 사용하지 않는 코드를 제거하는 최적화 과정

설치

npm install --global rollup
npm i -g rollup

롤업 기본 사용

• 기본 값으로 루트 디렉토리의 rollup.config.js 파일을 읽어온다.
  (npm script 지정 가능. -c, --config ) -> rollup -c rollup.prod.config.js
• input, output, plugins 속성을 알아보자
  참조 : https://rollupjs.org/guide/en/#configuration-files

export default {
    input: './src/main.js',
    output: {
        file: './build/bundle.min.js',
        format: 'iife',
        name: 'bundle'
    },
    plugins: [],
}

- input : 파일을 읽어들이는 시작점
- output : 롤업 번들링 결과물의 위치 및 파일명 지정

  export default [
  {
  	input: 'main-a.js',
  	output: {
    	file: 'dist/bundle-a.js',
    	format: 'cjs'
  	}
  }, 
  {
  	input: 'main-b.js',
  	output: [
    	{
      	file: 'dist/bundle-b1.js',
      	format: 'cjs'
    	},
    	{
      	file: 'dist/bundle-b2.js',
      	format: 'esm'
    	}
  	]
  }
];
  
// 이런식으로도 작성 및 사용이 가능하다
  file : 결과물 파일명과 경로 지정 (dir 속성을 사용해도 됩니다 경로는)
  format : 출력형식(cjs, esm, iife, amd 등) -> 특정형식으로 번들링을 합니다
  name : iife/umd 형식으로 번들시 필수값이며, 전역변수 이름입니다.

export default {
...,
input: {
  a: 'src/main-a.js',
  'b/index': 'src/main-b.js'
},
output: {
  ...,
  entryFileNames: 'entry-[name].js'
}
};
// [name], [hash], [format]
// webpack 처럼 이름을 설정할 수 있습니다.
// 위에는 entry-a.js 가 생성됩니다.

- plugins : 롤업 플러그인은 웹팩에 로더와 비슷한 역할을 합니다. (번들로 결과물을 생성하기전에 어떤 부가적인 작업을 처리해줍니다)

// 해당 플러그인들을 npm i 했다고 가정합시다.
import babel from 'rollup-plugin-babel';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import postcss from 'rollup-plugin-postcss';
import { uglify } from 'rollup-plugin-uglify';

export default {
    input: './src/main.js',
    output: {
        file: './build/bundle.min.js',
        format: 'iife',
        name: 'bundle',
    },
    plugins: [
        babel({
            exclude: 'node_modules/**'
        }),
        postcss({
          extensions: ['.css']
        }),
        resolve(),
        commonjs(),
        uglify()
    ]
}
 

플러그인의 사용법이 은근히 간단합니다.

참조 : https://devhints.io/rollup
참조 : https://dev.to/proticm/how-to-setup-rollup-config-45mk
참조 : https://devinduct.com/cheatsheet/15/rollup