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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://taewoongs-organization.gitbook.io/jtwjs-dev-wiki/dev_note/mfa/transpiler-and-bundler/rollup.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.