Rollup

Rollup

• 표준 모듈 시스템 문법(esm)으로 작성된 여러 파일로 이루어진 코드를 한개 혹은 몇개로 묶어주는 역할

• 묶어주기 때문에 번들러라 함

• 묶어주는 동작을 하면서 여러가지 일들(Compile, Minify 등)을 함께 수행하기 위해 여러 플러그인을 활용

• 보통 라이브러리 제작을 위한 번들러로 많이 사용됨

  • 오픈 소스에서 가장 많이 사용되는 번들러

• 롤업을 직접 사용할수도 있지만, 롤업을 사용하는 다른 도구에서 롤업을 사용하는 경우도 있어 사용방식이나 설정에 대한 학습이 중요

• Terser는 변수 이름을 작게 만들고, 공백과 주석 제거, 사용하지 않는 코드제거

  • 우리가 직접 Terser를 사용할 일은 적다. 어떤 역할을 하는지 명확하게 인지

cjs - commonjs (Node.js)

• Node.js가 채택한 모듈관리 방식

• module.exports = ~~~

• const plusONe = require("경로")

esm - es module (표준 스펙)

• 최신 자바스크립트 버전에서 지원

• Node.js에서도 .mjs 확장자를 통해 지원

rollup.config.js

• 번들링은 어떤 파일을 가지고 어디에다 출력할것인지 지정해주어야 한다.

• 롤업은 기본적으로 node 환경에서 실행될거기 때문에 cjs룰을 따름

module.exports = {
  input: 'src/main.js'
  output: [{
    file: 'dist/bundle.js',
    format: 'cjs'
  },{
    file: 'dist/bundle.mjs",
    format: "es", //esm
  },
  ],
  plugins: [commonjs(), babel({ babelHelpers: "bundled" })]
}

"scripts": {
  "build": "rollup -c"
}

Terser

Javascript mangler and compressor toolkit "자바스크립트 mangler 및 압축기 도구"

• mangler: 망가뜨리는 사람, 고기를 써는 기계

  • 코드를 실행 가능한 수준으로 망가뜨리다.

  • 사람이 이해하기 어렵지만 컴퓨터가 실행하기에 가능한 수준으로

• Terser는 자바스크립트 코드를 위한 업계 표준 minifier

• 변수 이름을 작게, 공백과 주석 제거, 사용하지 않는 코드 제거 등

• 커맨드라인 명령어 혹은 Node.js API로 사용 가능

• 보통 직접 사용하지 않고, 많은 다른 도구들에서 사용됨

  • Webpack, Parcel, angular

커맨드라인

• terser [input files] [options]

• pnpm exec terser input.js --compress --mangle --output dist/output

Rollup으로 번들링 할 때 terser 추가

pnpm add @rollup/plugin-terser -D

const terser = require("@rollup/plugin-terser");

module.exports = {
  input: 'src/main.js'
  output: [{
    file: 'dist/bundle.js',
    format: 'cjs'
  },{
    file: 'dist/bundle.mjs",
    format: "es", //esm
  },
  ],
  plugins: [commonjs(), babel({ babelHelpers: "bundled" }, terser())]
}