Rollup.js JavaScript Bundler 소개

rollup.js : 차세대 JavaScript 모듈 Bundler

Rich Harris (Svelte의 저자)가 만든 Rollup.js는 여러 소스 파일을 단일 최적화 된 번들로 컴파일하는 데 탁월한 최신 JavaScript 모듈 Bundler입니다. 일부 올인원 번들과 달리 롤업은 주로 JavaScript에 중점을 두어 속도 및 사용자 정의 이점을 제공합니다. 주요 기능과 효과적으로 사용하는 방법을 살펴 보겠습니다.

rollup.js를 사용하는 장점 :

단순화 된 개발 : 더 작고 자 급식 소스 파일 관리 개발 워크 플로우를 크게 향상시킵니다.

강화 코드 품질 : 빌드 프로세스 중에 Linters, Formatter 및 구문 검사기와 완벽하게 통합됩니다. 트리 쉐이킹 최적화 : 지능적으로 사용되지 않은 코드를 제거하여 더 작고 빠른 번들이 생성됩니다. 뒤로 호환성 :

최신 JavaScript (ES6)를 ES5로 변환하여 더 넓은 브라우저 지원을 보장합니다. 유연한 출력 :

다양한 프로젝트 요구에 맞게 여러 출력 형식 (ES5, ES6 모듈, CommonJS)을 생성합니다.
• 성능 : 일반적으로 다른 번들보다 더 빠르고 사용자 정의 할 수 있습니다. 특히 복잡한 구성으로.
설치 : rollup.js에는 node.js v8.0.0 이상이 필요합니다. 전역으로 설치할 수 있습니다 :
• Node.js 프로젝트에서 작업하는 대규모 팀의 경우 버전 일관성을 위해서는 로컬 설치가 권장됩니다. 로컬 설치 후 를 사용하여 명령을 실행하십시오. 또는 스크립트 내에서 롤업 명령을 정의하십시오 이 스크립트는 또는 를 사용하여 실행할 수 있습니다. 이 튜토리얼은 주로 더 넓은 호환성을 위해
를 사용합니다 간단한 예 :
• 롤업의 기능을 설명하기 위해 기본 디지털 시계 예제를 작성하겠습니다. github에서 예제 파일을 다운로드하거나 수동으로 만들 수 있습니다. src/main.js : (메인 진입 점)
• src/lib/dom.js : (돔 유틸리티 라이브러리)
• src/lib/time.js : (시간 형식 함수)
• index.html : (시계를 표시하려면 html)

빠른 시작 :

코드를 묶으려면 프로젝트의 루트 디렉토리 에서이 명령을 실행하십시오. 이것은 를 만듭니다. 사용하지 않는 기능은 나무 흔들림을 통해 제거됩니다. 이 번들 파일을 참조하십시오 키 롤업 .js 구성 옵션 :

또는 : 출력 파일 이름을 지정합니다 또는

: 출력 형식을 정의합니다 (,

,
• , --file, -o).
: 더 쉬운 디버깅을위한 소스 맵을 생성합니다 (인라인 소스 맵의 경우
• 사용). 또는 --format : 파일 변경 및 자동으로 재 구축되는 시계. 또는 -f : 구성 파일을 사용합니다 (예 : ) iife 구성 파일 (Rollup.config.js) : es 구성 파일은 여러 옵션 및 플러그인 관리를 단순화합니다. 예는 다음과 같습니다. cjs run 플러그인 : umd 롤업의 확장 성은 플러그인 시스템에서 비롯됩니다. 일반적인 플러그인은 다음과 같습니다 amd : node.js 모듈 해상도를 처리합니다 system : commonJS 모듈을 ES 모듈로 변환합니다 : 빌드 프로세스 중에 코드의 토큰을 대체합니다. : ES6 코드를 ES5로 변환합니다 (최신 브라우저 지원을위한 대안 고려).
: 출력 코드를 최소화합니다
• 를 사용하여 플러그인을 설치해야합니다. . 내의 배열에 포함시킵니다 고급 기술 : --sourcemap --sourcemap inline
환경 변수 :
• 환경 변수를 사용하여 (예 : ) 빌드 프로세스 (개발 대 생산)를 조건부로 수정합니다. 다중 번들 : --watch 다른 진입 지점에서 여러 번들을 생성하도록 롤업을 구성합니다. 코드 분할 : -w 주문에 적재 된 작은 청크로 코드를 분할하여 응용 프로그램을 추가로 최적화하십시오.
Rollup.js는 JavaScript 모듈을 묶는 강력하고 유연한 방법을 제공합니다. 핵심 기능과 플러그인 생태계를 이해함으로써 최적화되고 유지 관리 가능한 JavaScript 응용 프로그램을 만들 수 있습니다. 최신 정보 및 포괄적 인 플러그인 목록에 대한 공식 Rollup.js 문서에 문의하십시오.

위 내용은 Rollup.js JavaScript Bundler 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!