번들러(Rollup, Parcel, Esbuild ... )는 다수의 파일을 하나의 파일로 묶어주는 역할을 합니다.
번들링은 번들러를 이용해서 결과 파일을 만드는 행위를 말합니다.
Tree-shaking은 번들링할때 실제로 쓰지 않는 코드들을 제외한다는 의미입니다.
1. Rollup 개요: Rollup은 라이브러리를 번들링하는 도구로, webpack과 비슷한 역할을 합니다. 하지만 ES Module 형태로 번들을 생성하는 데 더 적합하며, Tree-shaking을 지원합니다.
2. 패키지 설치: 먼저 Rollup을 사용하기 위해 필요한 패키지를 설치합니다.
yarn add --dev rollup
또는 npm을 사용하는 경우:
npm install --save-dev rollup
3. 명령어 라인에서 사용해보기
◦ src/main.js
◦ src/lib/mod1.js
◦ src/index.html
import {sum, draw_div} from './lib/mod1.js';
const startup = ()=>{
const {a, b} = { a:11, b:242 };
console.log(`${a}+${b}=${sum(a,b)}`);
const str=`${a}+${b}=${sum(a,b)}`;
draw_div(str);
}
startup();
export const sum = (a, b) =>{
return a+b;
}
export const draw_div = (str)=>{
const div = document.createElement('div');
div.style.width = "100px";
div.style.height = "200px";
div.style.border = "solid 1px green";
div.innerHTML = str;
const output = document.getElementById('output');
console.log(output);
output.appendChild(div);
}
<html>
<body>
<div id="output">x</div>
<script type="module" src="./dist/index.js">
</script>
</body>
< /html>
> npx rollup .\src\main.js --file ./dist/index.js
src/main.js와 관련된 파일을들 하나로 묶어(번들링) ./dist/index.js 파일을 생성합니다.
4. package.json에 포함하기
"type":"module",
"scripts": {
"build": "rollup ./src/main.js --file ./dist/index.js",
"dev": "npm run build && http-server",
> npm run build
cli에서 했던것과 동일한 결과가 나옵니다.
rollup 설정 파일을 이용하기
./src/rollup.config.js 추가, package.json 변경
export default {
input: "src/main.js",
output: {
file: "./dist/index.js"
},
};
package.json
"type":"module",
"scripts": {
"build": "rollup --config",
"dev": "npm run build && http-server",
> npm run build
cli에서 했던것과 동일한 결과가 나옵니다.
Tree-shaking 을 확인해 보기 위해
import {sum, draw_div} from './lib/mod1.js';
const startup = ()=>{
const {a, b} = { a:11, b:242 };
console.log(`${a}+${b}=${sum(a,b)}`);
const str=`${a}+${b}=${sum(a,b)}`;
}
startup();
src/main.js 에서 draw_div(str) 부분을 주석후 npm run build를 수행한 후에
./dist/index.js 파일을 확인해 보시면 draw_div 함수가 포함되지 않은것을 확인할수 있습니다.
