> For the complete documentation index, see [llms.txt](https://taewoongs-organization.gitbook.io/jtwjs-dev-wiki/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://taewoongs-organization.gitbook.io/jtwjs-dev-wiki/dev_note/mfa/transpiler-and-bundler/rollup.md).

# Rollup

## Rollup

* 표준 모듈 시스템 문법(esm)으로 작성된 여러 파일로 이루어진 코드를 한개 혹은 몇개로 묶어주는 역할
* 묶어주기 때문에 **번들러**라 함
* 묶어주는 동작을 하면서 여러가지 일들(Compile, Minify 등)을 함께 수행하기 위해 여러 플러그인을 활용
* **보통 라이브러리 제작을 위한 번들러로 많이 사용됨**
  * 오픈 소스에서 가장 많이 사용되는 번들러
* 롤업을 직접 사용할수도 있지만, 롤업을 사용하는 다른 도구에서 롤업을 사용하는 경우도 있어 사용방식이나 설정에 대한 학습이 중요
* Terser는 변수 이름을 작게 만들고, 공백과 주석 제거, 사용하지 않는 코드제거
  * 우리가 직접 Terser를 사용할 일은 적다. 어떤 역할을 하는지 명확하게 인지

{% hint style="info" %}
**cjs - commonjs (Node.js)**

* Node.js가 채택한 모듈관리 방식
* module.exports = \~\~\~
* const plusONe = require("경로")
  {% endhint %}

{% hint style="info" %}
**esm - es module (표준 스펙)**

* 최신 자바스크립트 버전에서 지원
* Node.js에서도 .mjs 확장자를 통해 지원
  {% endhint %}

#### rollup.config.js

* **번들링은 어떤 파일을 가지고 어디에다 출력할것인지 지정해주어야 한다.**
* 롤업은 기본적으로 node 환경에서 실행될거기 때문에 cjs룰을 따름

```javascript
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" })]
}
```

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

### Terser

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

* **mangler**: 망가뜨리는 사람, 고기를 써는 기계 
  * 코드를 실행 가능한 수준으로 망가뜨리다.
  * 사람이 이해하기 어렵지만 컴퓨터가 실행하기에 가능한 수준으로
* Terser는 자바스크립트 코드를 위한 업계 표준 **minifier**
* 변수 이름을 작게, 공백과 주석 제거, 사용하지 않는 코드 제거 등
* 커맨드라인 명령어 혹은 Node.js API로 사용 가능
* 보통 직접 사용하지 않고, 많은 다른 도구들에서 사용됨
  * Webpack, Parcel, angular

{% hint style="info" %}
커맨드라인

* terser \[input files] \[options]
* `pnpm exec terser input.js --compress --mangle --output dist/output`
  {% endhint %}

#### Rollup으로 번들링 할 때 terser 추가

```bash
pnpm add @rollup/plugin-terser -D
```

```javascript
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())]
}
```