🤓☝️ 이번에는 라이브러리나 패키지를 만들 때 좋다는 Rollup에 대해 학습해보려고 한다!
🤔 번들러(Bundler)란?
개발자들은 다양한 이유(관심사의 분리, 유지보수, ···)로 파일을 여러 개로 나누어 개발을 진행한다.
➡️ 하지만 브라우저는 이렇게 나누어진 파일들을 각각 따로 다운로드 해야함..!
( ex) 파일이 10개라면 다운로드도 10번.. 만약 파일이 100개, 1000개라면? ☠️ )
번들러는 이 여러 개의 파일을 하나의 큰 파일로 합쳐주는 역할을 한다!!
💡 브라우저는 하나의 파일만 다운로드하면 되니까 훨씬 속도가 빨라짐💨
💡 코드를 필요한 순서대로 정리 및 사용하지 않는 코드는 제외하여 압축하여 파일 크기도 줄여줌!
📌 번들러의 종류
Webpack / Rollup / Vite / Parcel ··· 등 다양하지만 이 중 Rollup은 "라이브러리나 패키지를 만들 때" 특히 좋음
❓ 왜 Rollup이 라이브러리를 만들 때 좋을까?
1. 결과물이 깔끔!
- 불필요한 코드가 거의 없음
- 다른 번들러보다 가볍고 심플한 코드를 만들어줌
➡️ 번들링 과정에서 Webpack처럼 모듈과 관련된 코드를 추가하지 않고 합치기만 하기 때문에 불필요한 코드 없고 파일의 크기가 작아짐
2. Tree-shaking 효율이 좋음
🍃 Tree-Shaking이란?
사용하지 않는 코드(dead code)를 번들 파일에 포함하지 않도록 쳐내는 것
3. 다양한 버전을 동시에 만들 수 있음
예를 들어, 우리가 만들 디자인 시스템을 누군가는 Next.js를 사용하기에 ESM이 필요하고, Node.js 환경에서 실행을 해야하는 사용자를 위해서는 CommonJS를 지원해야 할 것이다.
이처럼 호환성을 위해 만들어야 하는 여러 모듈 포맷(Module Format)을 Rollup은 쉽게 만들어줌.
(rollup.config.js 파일에 output을 배열로 나열하면 Rollup이 한 번의 빌드로 작성 버전을 동시에 만들어주는 방식)
export default {
input: 'src/index.js',
output: [
{ file: 'dist/bundle.esm.js', format: 'esm' }, // ESM 버전
{ file: 'dist/bundle.cjs.js', format: 'cjs' }, // CommonJS 버전
{ file: 'dist/bundle.umd.js', format: 'umd' }, // UMD 버전
]
}🔎 rollup.config.js 분석
// rollup.config.js 기본 구조
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'esm',
},
plugins: [],
external: [],
};💡 input (시작점)
input: 'src/index.js'- 번들링을 시작할 파일.
- Rollup은 이 파일에서 부터 시작해서 이 파일이 뭘 import 하고 있는지, 그 파일은 또 어떤 것을 import 하는지··· ➡️ 연결된 파일을 모두 추적해서 번들링
💡 output (결과물 관련 설정)
output: {
file: 'dist/bundle.js', // 결과물 파일 경로
format: 'esm', // 모듈 포맷
sourcemap: true, // 소스맵 생성 여부
}- 저장하는 방식 2가지
- file : 하나의 파일로 만들 경우
- dir : 여러 파일로 나눌 경우 (코드 구조에 따라 Rollup이 알아서 나눠줌)
- format : 모듈 포맷
- sourcemap : 소스맵 생성 여부
- 번들링된 파일은 여러 파일이 합쳐진 상태 ➡️ 코드가 복잡해 보임 ➡️ 에러 발생 시 몇 번째 줄에서 오류가 났는지만 알려주면 찾기 어려움
- ✨ 소스맵이 있으면 어떤 파일의 몇 번째 줄에서 에러가 발생했는지 원본 파일의 위치를 알려줌👍
(배포할 때는 소스맵 파일에 원본 코드의 노출 가능성과 파일 크기 때문에false로 한다고도 하네요)
💡 plugins (플러그인)
Rollup은 기본적으로 순수 JavaScript 파일만 처리 할 수 있는데, 실제 프로젝트에서는 순수 JavaScript 말고도 처리해야할 파일도 많음.
필요한 기능만 골라서 플러그인 추가를 해주면 다양한 파일들을 처리할 수 있게 된다.
plugins: [
typescript(), // TypeScript 처리 가능하게
resolve(), // npm 패키지 import 가능하게
commonjs(), // CommonJS 패키지도 사용 가능하게
]📌 자주 사용하는 플러그인들
@rollup/plugin-node-resolve : npm 패키지를 찾을 수 있게 해줌
- Rollup은 기본적으로 상대 경로 파일만 찾을 수 있는데, 이 플러그인을 사용하면 이 부분이 보완된다.
@rollup/plugin-commonjs : CommonJS 패키지를 ESM으로 변환
- Rollup은 기본적으로 ESM 방식만 이해할 수 있기 때문에 이 부분을 보완.
@rollup/plugin-typescript : TypeScript를 JavaScript로 변환
rollup-plugin-peer-deps-external : React 같은 peer dependency를 번들에서 제외
package.json의peerDependencies에 적힌 패키지들을 자동으로 번들에서 제외시켜줌
(불필요한 패키지들이 중복으로 번들 파일에 포함될 수도 있기 때문에)
💡 external (번들에서 제외할 것들)
rollup-plugin-peer-deps-external 플러그인에서 했던 것처럼 번들에서 제외할 패키지들을 직접 수동으로 지정하는 옵션
export default {
input: 'src/index.js',
output: { ... },
external: ['react', 'react-dom'], // 이 패키지들은 번들에서 제외하겠다는 의미
}📌 그러면 플러그인을 사용하면 되는거 아닌가?
rollup-plugin-peer-deps-external은 peerDependencies를 읽어서 자동으로 제외시켜줌.
external은 직접 하나하나 지정해 주어야 하지만 더 세밀한 컨트롤이 가능하다고 한다.
ex) 플러그인으로 웬만하면 커버가 될 것 같지만 lodash처럼 사용자가 알아서 설치할 것 같아서 번들에 넣기는 싫지만 peerDependencies에 넣기엔 필수 의존성이 아니라 애매할 때 사용하는 경우가 있는 것 같다..!
Rollup이라는 녀석을 이번에 처음 알아본 거라서 AI한테 따져가며 하니 기본적인 개념은 가져간 것 같다..
이제 프로젝트 하면서 실습까지 하면 좋을 것 같다!
👉 Rollup.js 공식 문서 👈
