[TIL] rollup 학습 1
TIL
입사 전 추가 공부
번들러
Rollup
Rollup이란?
빌드툴 / 번들러이다.
수 많은 js 코드 조각을 라이브러리나 응용 프로그램으로 더 크고 복잡한 결과로 컴파일해주는 Javascript용 모듈 번들러이다.
장점은 나무 흔들기 기법 (Tree shaking)을 활용하여 라이브러리의 필요한 부분만 가져올 수 있다.
그러니 실제로 사용하지 않는 코드는 빌드 단에서 제거하여 빌드 크기를 효율적으로 줄일 수 있다.
따라서 라이브러리 제작 용도에 특화되어 있다.
[출처] https://wormwlrm.github.io/2021/11/07/Rollup-React-TypeScript.html
구현
코드 조각 1
연산 함수를 모아둔 파일.
// src/math.js
export const add = (a, b) => a + b;
export const substract = (a, b) => a - b;
코드 조각 2
연산 함수를 import 하여 실제로 사용하는 파일.
// src/index.js
import { add, substract } from "./math";
const sum = add(3, 4);
export { sum }; // 이 모듈을 사용할 때 외부에서는 이 sum 값을 사용하게 되는 것이다.
module화하여 내보내기
./node_modules/.bin/rollup src/index.js -d lib
위 명령어를 통해 lib 폴더에 번들 결과물 index.js 생성했다.
// lib/index.js
const add = (a, b) => a + b;
const sum = add(3, 4);
export { sum };
src index.js에서 substract를 import 했지만 모듈에서는 나오지 않는 것을 확인할 수 있다.
export 값에 사용이 되지 않았기 때문이다.
const a = 4;
src index.js에 뜬금없이 이 코드를 추가해도 번들 이후 나오지 않는 것을 확인할 수 있다.
이를 나무흔들기(tree shaking)라고 한다.
rollup config
rollup 번들러 설정.
보통 json 말고 js로 사용한다.
const config = {
input: "src/index.js",
output: {
file: "lib/index.js",
format: "iife", // iife // immedietly invokable function expression // 즉시 호출 가능한 함수 표현
name: "RollupTest", // 외부에서 참조할 이름 필요
},
};
export default config;
이렇게 설정하고 config 설정으로 번들링 하라는 명령어
./node_modules/.bin/rollup -c
를 하면 다음과 같이 번들링이 된다.
var RollupTest = (function (exports) {
"use strict";
const add = (a, b) => a + b;
const sum = add(3, 4);
exports.sum = sum;
Object.defineProperty(exports, "__esModule", { value: true });
return exports;
})({});
이런 식으로 RollupTest라는 이름으로 즉시 함수 표현이 만들어지고,
외부에서는 RollupTest라는 함수를 사용할 수 있도록 번들링된다.
esm으로 번들링하면
const config = {
input: "src/index.js",
output: {
file: "lib/index.js",
format: "esm",
name: "RollupTest",
},
};
export default config;
다음과 같이 번들링이 된다.
const add = (a, b) => a + b;
const sum = add(3, 4);
export { sum };
babel transpiling
작성한 코드를 소스 그대로 번들링하는 것 보다는
보통 바벨을 이용하여 트랜스파일링하고 그 트랜스파일된 코드를 번들링하게 된다.
바벨 설치
yarn add -D @babel/core @babel/cli @babel/preset-env @babel/preset-react
바벨 설정
바벨 설정은 다음과 같이 package.json에서 간단하게 추가할 수 있다. (babelrc 파일 굳이 따로 안만들어도 됨)
{
"name": "rollup-test",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"devDependencies": {
"@babel/cli": "^7.17.6",
"@babel/core": "^7.17.8",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"rollup": "^2.70.1"
},
"babel": {
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
}
바벨 트랜스파일링
작성한 코드를 트랜스파일링하여 dist 파일안에 넣음
$ babel src -d dist
bash: babel: command not found
깨알로 babel이 cli가 먹히지 않았다.
검색 결과 babel 명령어는 다음의 줄임어였다.
$ ./node_modules/.bin/babel src -d dist
위와 같이 작성하니 트랜스파일링이 성공적으로 되었다. (src 폴더의 모든 js 파일이 트랜스파일링되어 dist 폴더 안에 저장)
// dist/index.js
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true,
});
exports.sum = void 0;
var _math = require("./math");
var sum = (0, _math.add)(3, 4);
exports.sum = sum;
rollup plugin
하지만, 이렇게 바벨 트랜스파일링 하고 또 롤업 번들링하면 귀찮다.
따라서 rollup에서 plugin을 제공한다.
yarn add -D @rollup/plugin-babel
바벨 플러그인을 설치한 후 플러그인을 설정해준다.
이제 이 롤업은 실제 작성한 코드 src/index의 파일을 번들링할 때 바벨 트랜스파일링을 거쳐서 lib에 index.js로 번들링하여 나타내줄 것이다.
import babel from "@rollup/plugin-babel";
const config = {
input: "src/index.js",
output: {
file: "lib/index.js",
format: "esm",
},
plugins: [babel()],
};
export default config;
번들링 후
var add = function add(a, b) {
return a + b;
};
var sum = add(3, 4);
// 이 모듈을 사용할 때 외부에서는 이 sum 값을 사용하게 되는 것이다.
export { sum };
[출처] https://www.youtube.com/watch?v=6cG4GDi4Ee4&list=LL&index=2&t=291s
회고 (TIL)
2022.04.01 Daily 회고
✏오늘 한 일
- 입사 전 추가 공부
- rollup
⁉느낀 점
입사하게 될 회사에서 공통 모듈로 rollup을 사용한다고 했기 때문에 rollup에 대해서 좀 더 공부해보았다.
느낌적인 느낌으로 webpack보다 간단한? 느낌이 든다..
아직 왜 사용하는 지에 대한 개념이 없다보니 눈에 안들어오는 것 같다.
실제 사용하고 있는 모듈을 한번 봐야겠다.
🎃현재 나의 상태
피곤쓰..
댓글남기기