rollup | Notion

webpack과 비슷하게 모듈 번들링 수행한다.

typescript 번들링할 땐 rollup-plugin-typescript2 사용하면 된다.

npm i -D typescript rollup rollup-plugin-typescript2

// rollup.config.js

import typescript from 'rollup-plugin-typescript2';

export default {
  input: './src/app.ts',
  output: {
    file: './dist/bundle.js',
    format: 'iife'
  },
  plugins: [
    typescript({
      tsconfig: 'tsconfig.json'
    })
  ]
}

package.json

"scripts": {
    "dev": "rollup --config rollup.config.dev.js",
    "build": "rollup --config rollup.config.dist.js",
    "watch": "rollup --watch --config rollup.config.dev.js"
},

webpack과의 차이

webpack은 ES Module 번들이 불가능하다.
- 그래서 각 파일을 변환해줘야 한다.
- rollup은 여러 모듈을 하나의 ESM 형태로 번들링 해준다.
webpack은 중복 코드를 제거하지 못한다.
- import은 __webpack_require__ 로 바뀌고 export은 exports 오브잭트로 변환된다.
- 상수는 uglify되지 않기에 코드가 더 길어 질 수 있다.

참고