Rollup.js plugin 목록 정리

추후 계속해서 추가 예정입니다.

- Core plugin

1. alias

import 별칭을 생략해줄수 있습니다.

import batman from '../../../batman';
// 를 
import batman from 'batman';

2. babel

babel과의 원활한 통합을 해줍니다.

import { babel } from '@rollup/plugin-babel';

const config = {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'es'
  },
  plugins: [babel({ babelHelpers: 'bundled' })]
};

export default config;

3. buble

Buble 을 사용한 트랜스파일링

import buble from '@rollup/plugin-buble';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [buble()]
};

4. commonjs

CommonJS 모듈을 ES6으로 변환하여 롤업 번들에 포함할 수 있는 롤업 플러그인입니다.

import commonjs from '@rollup/plugin-commonjs';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [commonjs()]
};

5. dsv

CSV 와 TSV 파일들을 자바스크립트 모듈로 변환해줍니다. (쉼표로 구분된 파일, 데이터 파일이라고 보면 될것 같습니다.)

import dsv from '@rollup/plugin-dsv';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [dsv()]
};

6. eslint

모든 진입점 파일들을 lint를 적용시키고, 모든 import 된 파일들도 ESLint 를 적용시킵니다.

import eslint from '@rollup/plugin-eslint';

export default {
  input: 'main.js',
  plugins: [
    eslint({
      /* your options */
    })
  ]
};

7. html

Rollup 번들을 제공하기 위한 HTML 파일을 생성합니다.

const html = require('@rollup/plugin-html');

module.exports = {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [html()]
};

8. image

JPG, PNG, GIF 나 SVG 파일들을 import 해옵니다.

import image from '@rollup/plugin-image';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [image()]
};

9. inject

전역변수를 스캔하고, import 구문들을 주입합니다.

import inject from '@rollup/plugin-inject';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [
    inject({
      Promise: ['es6-promise', 'Promise']
    })
  ]
};

10. json

JSON 파일들을 ES 모듈로 변환합니다.

import json from '@rollup/plugin-json';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [json()]
};

11. legacy

일반 스크립트 문에 내보내기 모듈을 추가합니다.

import legacy from '@rollup/plugin-legacy';

export default {
  entry: 'src/main.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [legacy({ 'vendor/some-library.js': 'someLibrary' })]
};

12. multi-entry

여러개의 진입점이 필요할때 사용합니다.

만약 각각 분리되어서 export를 해주는 3개의 파일이 있다고 생각해봅시다.

// batman.js
export const belt = 'utility';
// robin.js
export const tights = 'tight';
// joker.js
export const color = 'purple';

그리고, rollup.config.js 파일을 만들어서 플러그인을 임포트 하면 됩니다.

import multi from '@rollup/plugin-multi-entry';

export default {
  input: ['batman.js', 'robin.js', 'joker.js'],
  output: {
    dir: 'output'
  },
  plugins: [multi()]
};

13. node-resolve

노드 resolution 알고리즘을 사용하여, Rollup에서 Node.js 모듈 해결 메커니즘을 사용할 수 있게 해주는 도구입니다.

즉 Rollup이 프로젝트의 의존성을 해석하고 번들링할 때 Node.js 방식을 따르도록 합니다.

import { nodeResolve } from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [nodeResolve()]
};

14. replace

번들링하는 동안 파일의 대상 문자열을 대체해주는 플러그인입니다.

import replace from '@rollup/plugin-replace';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [
    replace({
      'process.env.NODE_ENV': JSON.stringify('production'),
      __buildDate__: () => JSON.stringify(new Date()),
      __buildVersion: 15
    })
  ]
};

15. run

번들을 빌드한 후 Node에서 번들을 실행하는 롤업 플러그인입니다.

이 플러그인을 사용하면 nodemon으로 수행하는 작업에 비해 훨씬 빠른 결과를 얻을 수 있습니다.

import run from '@rollup/plugin-run';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/index.js',
    format: 'cjs'
  },
  plugins: [run()]
};

16. strip

코드에서 Assert.equal 및 console.log와 같은 디버깅 함수를 제거하는 롤업 플러그인입니다.

import strip from '@rollup/plugin-strip';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [
    strip({
      labels: ['unittest']
    })
  ]
};

17. scurase

TypeScript, Flow, JSX 등을 컴파일하는 롤업 플러그인입니다.

import sucrase from '@rollup/plugin-sucrase';
import resolve from '@rollup/plugin-node-resolve';

export default {
  input: 'src/index.ts',
  output: {
    file: 'dist/bundle.js',
    format: 'cjs'
  },
  plugins: [
    resolve({
      extensions: ['.js', '.ts']
    }),
    sucrase({
      exclude: ['node_modules/**'],
      transforms: ['typescript']
    })
  ]
};

18. typescript

Rollup과 Typescript 간의 원활한 통합을 위한 Rollup 플러그인입니다.

// rollup.config.js
import typescript from '@rollup/plugin-typescript';

export default {
  input: 'src/index.ts',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [typescript()]
};

19. url

파일을 데이터 URI 또는 ES 모듈로 가져오는 롤업 플러그인입니다.

import url from '@rollup/plugin-url';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [url()]
};

20. virtual

메모리에서 가상 모듈을 로드하는 롤업 플러그인입니다.

src/entry.js 경로에 이러한 파일들을 포함한다고 가정해봅시다. 그리고 src/robin.js과 batman을 import 해오도록 시도해봅시다.

// src/entry.js
import batman from 'batman';
import robin from './robin.js';

console.log(batman, robin);

그리고 rollup.config.js를 이렇게 설정해주면 됩니다.

import virtual from '@rollup/plugin-virtual';

export default {
  input: 'src/entry.js',
  // ...
  plugins: [
    virtual({
      batman: `export default 'na na na na na'`,
      'src/robin.js': `export default 'batmannnnn'`
    })
  ]
};

21. wasm

WebAssembly 모듈을 가져오고 번들링할 수 있는 롤업입니다.

WebAssembly 모듈은 base64 문자열로 비동기식으로 가져옵니다.

작은 모듈을 동기식으로 가져올 수 있습니다.

import { wasm } from '@rollup/plugin-wasm';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [wasm()]
};

22. yaml

YAML 파일을 ES6 모듈로 변환하는 롤업 플러그인입니다.

import yaml from '@rollup/plugin-yaml';

export default {
  input: 'src/index.js',
  output: {
    dir: 'output',
    format: 'cjs'
  },
  plugins: [yaml()]
};