Rollup.js - 번들링, 파일을 하나로 합쳐보자,
Rollup 사용하기,
Rollup을 사용하여 디자인 시스템 번들 후, npm 라이브러리로 배포하기
을 참고하였습니다
서론
dev 브랜치는 그냥 remote까지 지워버려도 돼요. 굳이 최신 프로젝트 브랜치와 머지할 필요 없이 그냥 새로 만들면 dev 서버를 쓸 수 있는 거에요. 우리가 쓰는 github action으로 "dev"라는 이름의 브랜치를 S3에 연결해뒀으니까, dev라는 이름으로 만들기만 하면 자동으로 배포 됩니다
S3 서버? dev 서버? remote는 지우면 큰일나는 거 아니었나? 무슨 말인지 모르겠다 ! ! ! !
최근 앨런 울먼 저자의 <코드와 살아가기>라는 책을 읽었다.
그 중 가장 기억에 남는 문장이 두 개 있는데...
[
주위의 모든 환경이 코드를 들춰보는 수고를 하지 말라고 말하는 듯했다.
몰라도 되는 것의 유혹은 강렬하다
]
이전 회사에서는 프로젝트가 완료된 적이 없었고...
이번 프로젝트에서는 이미 완벽하게 구축되어있는 CI/CD 파이프라인이 편안하게 나를 유혹했다.
원리 같은 건 몰라도 돼, 몰라도 잘 돌아가잖아!
하지만 이렇게 스노우볼이 되어 나를 때렸다. 👊👊
배포와 마찬가지로 열심히 유혹하는 자료구조와 알고리즘도 언젠간 내 발목을 잡겠지!
맨날 차려진 밥상 떠먹지만 말고 직접 차려보자 🍽
번들링(Bundling)
번들링이란?
모듈들의 의존성 관계를 파악하여 그룹화시켜주는 작업.
분리된 파일들(모듈)을 하나로 합쳐주는 작업이 번들링이다.
번들링은 왜 필요한가?
HTTP 통신의 특성 때문.
HTTP 통신은 단발적으로 리소스를 요청하기 때문에, 요청할 파일이 많으면 그만큼 요청을 많이 보내야해서 비효율적.
그래서 우리는 번들러를 이용한다. 대표적으로 Webpack, Rollup 등이 있음.
모듈 번들러 비교
Webpack
webpack은 es 모듈로 번들을 할 수 없음, 오직 commonJS 형태로 번들링 진행 가능
code spliting이 필요하거나 static asset이 많은 경우, 안정성을 추구해야되는 경우 혹은 CommonJS 종속성이 많은 무언가를 번들링 할 경우 webpack을 사용하는것이 좋다.Rollup
webpack과 다르게 코드들을 동일한 수준으로 호이스팅 한 후 한 번에 번들링을 진행하기 때문에 속도에서는 webpack보다 빠르고 결과물도 훨씬 가볍다.
es 모듈 형태로 빌드를 할 수 있어 라이브러리나 패키지를 작업하는데 활용할 수 있다.
es 모듈이며 라이브러리를 만들고 있는 경우 Rollup을 활용하는 것이 좋다.
최초 진입점인 .js 파일을 읽어서, 그 파일이 참조 하고 있는 다른 여러 형식들의 파일들을 하나로 묶어 최종적으로 js, css, jpg, png로 만든다.
중요한 것은 최초 진입점이 될 파일 1개를 선택한다는 것
번들링을 안하면 어떻게 될까?
배포를 위해 하는 번들링을 안했다면? 그냥 통째로 배포가 된다 🥶
배포한 패키지를 사용하려고 내 프로젝트에 설치했을 때!
node_modules 안에 들어있는 해당 패키지 폴더를 보면 번들링이 왜 필요한지 바로 알 수 있다.
1. 번들링하고 배포했을 경우
아주 깔끔하게 index.js 파일 하나 안에 모든 게 다 들어가있다!
2. 번들링 안하고 배포했을 경우
나는 해당 패키지를 CRA로 만든데다가 (근데 그러면 안된다 그게 무슨 패키지야),
번들링마저 안한 덕분에 이렇게 통째로 들어가있다.
번들링을 하고 안하고는 이렇게 큰 차이가 있다!
Webpack vs Rollup
- Webpack
Webpack은 ES Module 형태로 번들을 할 수 없다
webpack을 사용 할 때에는 일반적으로 commonjs 형태로 번들링을 하게 되는데,
commonjs로 번들링한 라이브러리를 나중에 다른 프로젝트에서 사용할 땐Tree-shaking이 지원되지 않는다.
Tree-shaking이란?
나무를 흔들어서 죽은 나뭇잎들을 떨어뜨린다. 코드를 빌드할 때도 실제로 쓰지 않는 코드들을 제외한다는 뜻
- Rollup
Webpack과 동일하지만 Tree-shaking을 지원한다.
따라서 Webpack은 웹 어플리케이션, Rollup은 웹 라이브러리 제작 시 사용한다.
Rollup으로 번들링해보기
간편한 rollup으로 번들링을 해보자.
나는 Rollup.js - 번들링, 파일을 하나로 합쳐보자 글을 따라했다.
( 다만 faker 패키지가 이상해 @faker-js/faker를 사용했다.)
Setup
새로운 디렉토리를 만들고,
project라는 폴더를 만들어주자.
project 폴더 안에서 yarn init으로 초기 세팅을 한다.
그럼 package.json이 생성됨
{
"name": "project",
"version": "1.0.0",
"main": "index.js",
"license": "MIT"
}
파일 구조를 아래와 같이 세팅
//faker.js
import { faker } from "@faker-js/faker"
export const GenerateName = () => {
return faker.name.fullName()
}
export const Test = () => {
return 'Some string'
}
//main.js
import { GenerateName, Test } from './faker';
function Init() {
const name = GenerateName()
console.log(`Your random name is : ${name}`)
}
Init()그럼 project 폴더 안에 두 개의 파일이 있을 것이다.
우리의 목표는? 번들링!
faker.js와 main.js 두 개의 파일이 번들링 된 뒤에는 1개의 파일이 되어야 한다.
CLI(Command Line Interface)를 이용해서 간단히 번들링하기 위해 build 명령어를 script에 추가한다
{
// ...
"scripts": {
"build": "rollup src/main.js --file dist/main.js"
}
}
- src/main.js
진입점이 될 파일명 - dist/main.js
번들링된 결과 파일명
yarn build➜ project git:(main) ✗ yarn build
yarn run v1.22.19
$ rollup src/main.js --file dist/main.js
src/main.js → dist/main.js...
(!) Unresolved dependencies
https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
faker (imported by "src/faker.js")
created dist/main.js in 53ms
✨ Done in 0.86s.그럼 입력했던대로 dist 폴더가 생기고,
이렇게 성공적으로 하나로 번들링 되었다!
번들링을 성공했으니 이제 이 페이지를 실행시켜보자.
package.json에
"scripts": {
"build": "rollup src/main.js --file dist/main.js --format cjs",
"start": "node dist/main.js"
}
그런데 yarn start를 하니 이런 오류가 뜬다.
Cannot find module 'faker/index.js'. ease verify tha tthe pachage.json has a valid "main" entry.
시작점인 “main”을 못찾고있는 것 같은데… 문제는 faker였다.
혹시나하는 마음에 열어본 node_modules/faker 내부에 index.js 파일이 없었다! 잘못된 라이브러리를 설치해서 일어난 일.
npm 주간 다운로드 수가 십만을 넘어가서 다운로드한 패키지였는데... 내가 설치를 잘못한 건지는 모르겠지만, 이 문제로 한참동안 헤맨 나는 너무 슬펐다 😭
이 포스트에 나와있는 faker 대신 @faker-js/faker를 설치해서 사용하면 된다.
이렇게 하면 npm start도, npm build도 성공적으로 된다!
이렇게 번들링 테스트 완료.
