요즘 많이 사용하는 Vite 플러그인(vite plugin)은 롤업 플러그인의 슈퍼셋입니다.
Rollup.js 플러그인의 아키텍처와 작성방법을 알면 Vite 플러그인에 대해 깊히 이해할 수 있습습니다.
Vite 플러그인은 몇 가지 추가 Vite 관련 옵션으로 Rollup의 잘 설계된 플러그인 인터페이스를 확장합니다.
rollupj.s 공식문서의 튜토리얼을 정리한 글입니다.
해당 튜토리얼을 통해 rollup.js의 매우 기본적인 기능들을 파악할 수 있습니다.
(파일을 입력으로 받아, 출력 파일로 번들링, 트리 셰이킹, 코드 스플리팅, js 이외의 파일 처리하기)
번들 만들어보기
npm install rollup --global
# or `npm i rollup -g` for shortrollup인수가 전달되지 않았기 때문에 Rollup은 사용 지침을 인쇄합니다.
이는 rollup --help 또는 rollup -h를 실행하는 것과 동일합니다.
mkdir -p my-rollup-project/src
cd my-rollup-project먼저 프로젝트 진입점이 필요합니다. 이것을 src/main.js라는 새 파일에 복사 / 붙여넣기 합니다.
// src/main.js
import foo from './foo.js';
export default function () {
console.log(foo);
}
// src/foo.js
export default 'hello world!';rollup src/main.js -f cjs'use strict';
const foo = 'hello world!';
const main = function () {
console.log(foo);
};
module.exports = main;rollup src/main.js -o bundle.js -f cjs
(rollup src/main.js -f cjs > bundle.js를 수행할 수도 있지만
나중에 살펴보겠지만 소스맵을 생성하는 경우 유연성이 떨어집니다.) 코드를 실행해 보세요.
node
> var myBundle = require('./bundle.js');
> myBundle();
'hello world!'설정 파일 사용하기
더 많은 옵션을 추가하기 시작하면 cli를 사용하는 것이 성가신 일이 됩니다.
필요한 모든 옵션을 포함하며 반복해서 사용할 수 있는 설정 파일을 만들 수 있습니다.
설정 파일은 JavaScript로 작성되며 CLI보다 더 유연합니다.
// rollup.config.js
export default {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'cjs'
}
};(CJS 모듈을 사용할 수 있으므로 module.exports = {/* config */})
설정 파일을 사용하려면 --config 또는 -c 플래그를 사용합니다.
rm bundle.js # so we can check the command works!
rollup -crollup -c -o bundle-2.js # `-o` is equivalent to `--file` (formerly "output")
rollup --config rollup.config.dev.js
rollup --config rollup.config.prod.js프로젝트 의존성으로 롤업 설치
npm install rollup --save-devnpx rollup --config{
"scripts": {
"build": "rollup --config"
}
}참고: 로컬 설치 시 패키지 스크립트에서 호출될 때
NPM과 Yarn 모두 종속성의 bin 파일을 확인하고 Rollup을 실행합니다.
플러그인 사용하기
{
"name": "rollup-tutorial",
"version": "1.0.0",
"scripts": {
"build": "rollup -c"
}
}npm install --save-dev @rollup/plugin-json// src/main.js
import { version } from '../package.json';
export default function () {
console.log('version ' + version);
}// rollup.config.js
import json from '@rollup/plugin-json';
export default {
input: 'src/main.js',
output: {
file: 'bundle.js',
format: 'cjs'
},
plugins: [json()]
};'use strict';
var version = '1.0.0';
function main() {
console.log('version ' + version);
}
module.exports = main;참고: 실제로 필요한 데이터만 가져옵니다. name 및 devDependencies와 package.json의 다른 부분은 무시합니다.
이를 트리 셰이킹이라 합니다.
출력 플러그인 사용하기
이전 예제를 확장하여 축소(minify)되지 않은 빌드와 함께 축소된 빌드를 제공하겠습니다.
이를 위해 @rollup/plugin-terser를 설치합니다.
npm install --save-dev @rollup/plugin-terser// rollup.config.js
import json from '@rollup/plugin-json';
import terser from '@rollup/plugin-terser';
export default {
input: 'src/main.js',
output: [
{
file: 'bundle.js',
format: 'cjs'
},
{
file: 'bundle.min.js',
format: 'iife',
name: 'version',
plugins: [terser()]
}
],
plugins: [json()]
};
var version = (function () {
'use strict';
var n = '1.0.0';
return function () {
console.log('version ' + n);
};
})();코드 스플리팅
- 롤업이 다이나믹 로딩 또는 멀티 엔트리와 같이 자동으로 코드를 청크로 분할하는 경우가 있으며
- output.manualChunks 옵션을 통해 어떤 모듈을 별도의 청크로 분할할지 롤업에 명시적으로 알리는 방법이 있습니다.
// src/main.js
export default function () {
import('./foo.js').then(({ default: foo }) => console.log(foo));
}롤업은 동적 임포트를 사용하여 요청 시에만 로드되는 별도의 청크를 생성합니다.
Rollup이 두 번째 청크를 배치할 위치를 알기 위해 --file 옵션을 전달하는 대신 --dir 옵션을 사용하여 출력할 폴더를 설정합니다.
rollup src/main.js -f cjs -d dist
이 명령어는 두 개의 파일, main.js 및 chunk-[hash].js를 포함하는 dist 폴더를 생성합니다.
여기서 [hash]는 콘텐츠 기반 해시 문자열입니다.
output.chunkFileNames 및 output.entryFileNames 옵션을 지정하여 고유한 이름 지정 패턴을 제공할 수 있습니다.
./foo.js의 로드 및 구문 분석은 처음으로 내보낸 함수를 호출한 후에만 시작되기 때문에 조금 더 느리지만
이전과 마찬가지로 동일한 출력으로 코드를 실행할 수 있습니다
node -e "require('./dist/main.js')()"//→ main.js:
'use strict';
function main() {
Promise.resolve(require('./chunk-b8774ea3.js')).then(({ default: foo }) => console.log(foo));
}
module.exports = main;
//→ chunk-b8774ea3.js:
('use strict');
var foo = 'hello world!';
exports.default = foo;// src/main2.js
import foo from './foo.js';
export default function () {
console.log(foo);
}rollup src/main.js src/main2.js -f cjs해당 명령어는 다음 출력을 생성합니다.
//→ main.js:
'use strict';
function main() {
Promise.resolve(require('./chunk-b8774ea3.js')).then(({ default: foo }) => console.log(foo));
}
module.exports = main;
//→ main2.js:
('use strict');
var foo_js = require('./chunk-b8774ea3.js');
function main2() {
console.log(foo_js.default);
}
module.exports = main2;
//→ chunk-b8774ea3.js:
('use strict');
var foo = 'hello world!';
exports.default = foo;두 진입점이 동일한 공유 청크를 어떻게 가져오는지 확인하세요
롤업은 코드를 복제하지 않으며 대신 필요한 최소한의 항목만 로드하기 위해 추가 청크를 생성합니다.
다시 --dir 옵션을 전달하면 파일이 디스크에 기록됩니다.
네이티브 ES 모듈, AMD 로더 또는 SystemJS를 통해 브라우저에 대해 동일한 코드를 빌드할 수 있습니다.
예를 들어 네이티브 모듈 포맷을 위해 -f es를 사용하면 다음과 같습니다.
rollup src/main.js src/main2.js -f es -d dist<!DOCTYPE html>
<script type="module">
import main2 from './dist/main2.js';
main2();
</script>rollup src/main.js src/main2.js -f system -d dist
npm install --save-dev systemjs
<!DOCTYPE html>
<script src="node_modules/systemjs/dist/s.min.js"></script>
<script>
System.import('./dist/main2.js').then(({ default: main }) => main());
</script>필요에 따라 SystemJS로 대체하여 지원하는 브라우저에서 기본 ES 모듈을 사용하는 웹 앱을 설정하는 방법에 대한 예제는
rollup-starter-code-splitting을 참조하세요.
'FrontEnd' 카테고리의 다른 글
| 멀티쓰레드 Javascript 1편 : SharedArrayBuffer (0) | 2023.01.23 |
|---|---|
| 자바스크립트 스킬 티어 리스트 (0) | 2023.01.22 |
| Content security policy[콘텐츠 보안 정책]에 대해 알아보기 (0) | 2023.01.21 |
| Vue3과 서버사이드 렌더링(SSR) (0) | 2023.01.19 |
| ECMAScript(ESM)의 module resolution(모듈 해석)에 대해 알아보자 (0) | 2023.01.16 |
