롤업 Cheatsheet¶
롤업 - 차세대 ES 모듈 번들러
Rollup은 라이브러리 또는 응용 프로그램과 같은 더 크고 더 복잡한 코드의 작은 조각을 컴파일하는 JavaScript 용 모듈 번들러입니다. 그것은 JavaScript의 ES6 개정에 포함 된 코드 모듈에 대한 새로운 표준화 된 형식을 사용합니다.
본문 바로가기¶
- 설치
- 기본 설정
- 입력 옵션
- 출력 옵션
- 펄진
- 외부 종점
- 트리 쉐이킹
- 코드 분할
- 워치 모드
- 개발 대 생산
- TypeScript 통합
- CSS 및 자산
- Library 개발
- 고급 구성
- 기능 최적화
- 트랙블링
- 모범 사례
설치하기¶
글로벌 설치¶
카지노사이트
로컬 설치 (추천)¶
카지노사이트
Package.json 스크립트¶
카지노사이트
기본 설정¶
최소 롤업.config.js¶
카지노사이트
Basic 구성¶
카지노사이트
다중 구성¶
카지노사이트
환경 기반 구성¶
카지노사이트
입력 옵션¶
단 하나 입장 점¶
카지노사이트
다수 입장 점¶
카지노사이트
동적 입력점¶
카지노사이트
외부 Dependencies를 가진 입장¶
ο 회원 관리
산출 선택권¶
산출 체재¶
카지노사이트
다수 산출 체재¶
카지노사이트
출력 디렉토리¶
카지노사이트
소스 맵¶
카지노사이트
플러그인¶
필수 플러그인¶
카지노사이트
Node Resolve 플러그인¶
카지노사이트
CommonJS 플러그인¶
카지노사이트
Babel 플러그인¶
카지노사이트
Terser 플러그인 (최소화)¶
오프화이트
플러그인¶
카지노사이트
구글 맵 다운로드¶
오프화이트
URL 플러그인 (Assets)¶
카지노사이트
외부 Dependencies¶
Basic 외부 구성¶
카지노사이트
동적인 외부 기능¶
카지노사이트
외부의 Peer Dependencies¶
카지노사이트
트리 쉐이킹¶
Enabling 트리 Shaking¶
카지노사이트
Tree Shaking 와 사이드 효과¶
카지노사이트
편의 용품¶
javascript
export default {
input: 'src/main.js',
output: {
file: 'dist/bundle.js',
format: 'es'
},
treeshake: {
moduleSideEffects: false, // Assume no side effects
// moduleSideEffects: (id) => id.includes('polyfill')
}
};의 경우
트리 쉐이킹 예제¶
```javascript // utils.js export function add(a, b) { return a + b; }
export function subtract(a, b) { return a - b; }
export function multiply(a, b) { console.log('This has a side effect!'); return a * b; }
// main.js import { add } from './utils.js'; // Only 'add' will be included
console.log(add(2, 3)); ```에 대하여
코드 분할¶
동적 수입¶
```javascript // main.js async function loadModule() { const module = await import('./heavy-module.js'); return module.default(); }
// Rollup config export default { input: 'src/main.js', output: { dir: 'dist', format: 'es', chunkFileNames: '[name]-[hash].js' } }; ```의 경우
수동 Chunks¶
javascript
export default {
input: 'src/main.js',
output: {
dir: 'dist',
format: 'es',
manualChunks: {
vendor: ['lodash', 'react'],
utils: ['src/utils/helpers.js', 'src/utils/constants.js']
}
}
};에 대하여
동적 매뉴얼 주 메뉴¶
javascript
export default {
input: 'src/main.js',
output: {
dir: 'dist',
format: 'es',
manualChunks: (id) => {
if (id.includes('node_modules')) {
return 'vendor';
}
if (id.includes('src/utils')) {
return 'utils';
}
}
}
};의 경우
입력 포인트 분할¶
카지노사이트
시계 형태¶
Basic Watch 모드¶
카지노사이트
설정 보기¶
카지노사이트
플러그인 보기¶
카지노사이트
개발 vs 생산¶
환경 기반 구성¶
카지노사이트
Config 파일 분리¶
카지노사이트
Package.json 스크립트¶
json
{
"scripts": {
"dev": "rollup -c rollup.config.dev.js -w",
"build": "NODE_ENV=production rollup -c rollup.config.prod.js"
}
}의 경우
TypeScript 통합¶
TypeScript 플러그인¶
```bash
Install TypeScript plugin¶
npm install --save-dev @rollup/plugin-typescript typescript ```의 경우
카지노사이트
TypeScript 구성¶
json
// tsconfig.json
{
"compilerOptions": {
"target": "es2018",
"module": "esnext",
"lib": ["dom", "dom.iterable", "es6"],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": false,
"declaration": true,
"outDir": "dist"
},
"include": [
"src"
]
}의 경우
TypeScript 와 Babel¶
```javascript import typescript from '@rollup/plugin-typescript'; import babel from '@rollup/plugin-babel';
export default { input: 'src/main.ts', output: { file: 'dist/bundle.js', format: 'iife' }, plugins: [ typescript(), babel({ babelHelpers: 'bundled', extensions: ['.js', '.ts'] }) ] }; ```를 호출합니다.
CSS 및 자산¶
포스트CSS 다운로드¶
```bash
Install PostCSS plugin¶
npm install --save-dev rollup-plugin-postcss ```의 경우
```javascript import postcss from 'rollup-plugin-postcss';
export default { input: 'src/main.js', output: { file: 'dist/bundle.js', format: 'iife' }, plugins: [ postcss({ extract: true, // Extract to separate CSS file minimize: true, // Minify CSS sourceMap: true }) ] }; ```로
SCSS/Sass 지원¶
카지노사이트
자산 처리¶
오프화이트
도서관 개발¶
Library 구성¶
카지노사이트
도서관용 Package.json¶
__CODE_BLOCK_49_로그
유형Script 관련 기사¶
카지노사이트
고급 구성¶
사용자 정의 플러그인¶
``javascript
function myPlugin() {
return {
name: 'my-plugin',
buildStart(opts) {
console.log('Build started');
},
transform(code, id) {
if (id.endsWith('.special')) {
returnexport default ${JSON.stringify(code)}`;
}
},
generateBundle(opts, bundle) {
console.log('Bundle generated');
}
};
}
export default { input: 'src/main.js', output: { file: 'dist/bundle.js', format: 'iife' }, plugins: [ myPlugin() ] }; ```를 호출합니다.
상태 구축¶
```javascript import resolve from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; import { terser } from 'rollup-plugin-terser';
const configs = [];
// Development build if (process.env.NODE_ENV !== 'production') { configs.push({ input: 'src/main.js', output: { file: 'dist/bundle.dev.js', format: 'iife', sourcemap: true }, plugins: [resolve(), commonjs()] }); }
// Production build if (process.env.NODE_ENV === 'production') { configs.push({ input: 'src/main.js', output: { file: 'dist/bundle.min.js', format: 'iife' }, plugins: [resolve(), commonjs(), terser()] }); }
export default configs; ```의 경우
Multi-entry 와 Shared Dependencies¶
카지노사이트
성능 최적화¶
번들 분석¶
카지노사이트
연락처¶
```javascript import resolve from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs';
export default { input: 'src/main.js', output: { file: 'dist/bundle.js', format: 'iife' }, plugins: [ resolve({ preferBuiltins: false, browser: true }), commonjs({ include: 'node_modules/**' }) ] }; ```로
Minimize 번들 크기¶
카지노사이트
문제 해결¶
일반적인 문제 및 솔루션¶
연락처¶
카지노사이트
외부 Dependencies 이름 *¶
카지노사이트
CommonJS 모듈 문제¶
```javascript import commonjs from '@rollup/plugin-commonjs';
export default { input: 'src/main.js', output: { file: 'dist/bundle.js', format: 'iife' }, plugins: [ commonjs({ include: 'node_modules/**', transformMixedEsModules: true }) ] }; ```에
메모리 문제¶
```bash
Increase Node.js memory limit¶
node --max-old-space-size=4096 node_modules/.bin/rollup -c ```의 경우
Debug 구성¶
카지노사이트
최고의 연습¶
구성 조직¶
카지노사이트
성과 모범 사례¶
- ** ES 모듈 사용 ** 더 나은 나무 쉐이킹
- ** Mark 외부 의존성 ** 번들 크기를 줄이기 위해
- ** 큰 응용 프로그램에 대한 코드 분할 **
- ** 생산 분화에 대한 terser** 사용
- **Analyze 번들 ** 최적화 기회를 식별
개발 모범 사례¶
- ** 개발용 시계 모드**
- 소스 맵 디버깅
- ** 더 나은 DX를 위해 라이브 재로드 ** 설정
- ** ESLint로 설정 **
- ** TypeScript 사용 ** 더 나은 유형 안전
도서관 개발 최고의 연습¶
- ** 여러 형식 ** (ES, CJS, UMD)
- ** TypeScript 선언**
- ** 마크 피어 의존 ** 외부
- ** semantic versioning 사용 ** 출시
- **테스트 빌드 ** 게시하기 전에
제품정보¶
Rollup은 라이브러리 및 애플리케이션에 최적화된 번들을 생성하는 강력한 모듈 번들러입니다. 주요 특징은 다음을 포함합니다:
- ES Module First: 우수한 나무 쉐이킹과 ES 모듈의 기본 지원
- ** 다중 출력 형식 ** : ES, CJS, UMD, IIFE, AMD 및 SystemJS 지원
- ** 플러그인 **: 다양한 변화에 대한 플러그인의 풍부한 생태계
- ** 코드 분할 **: 고급 코드 분할 기능
- **Tree Shaking **: 자동 죽은 코드 제거
- TypeScript 지원: 일류 TypeScript 통합
- Library Friendly: 건물 및 배포 라이브러리
Rollup의 강점을 활용하고 최고의 관행을 통해 라이브러리 개발 및 응용 프로그램 건물에 완벽하게 최적화된 번들을 만들 수 있습니다.
<문서> 기능 copyToClipboard () 이름 * const 명령어 = document.querySelectorAll('code'); let allCommands = ''; 명령. forEach(cmd =>의 경우 모든Commands +=cmd.textContent + navigator.clipboard.write텍스(allCommands); alert('모든 명령은 클립보드에 복사!'); 이름 *
함수 생성PDF() { 창. 인쇄 (); 이름 *