웹 프런트엔드 패키징 도구란 무엇입니까?

웹 프런트엔드 패키징 도구에는 다음이 포함됩니다. 1. 서로 다른 모듈의 파일을 패키징하고 통합할 수 있는 모듈식 관리 도구이자 패키징 도구인 Webpack, 이들 간의 참조가 정확하고 순서대로 실행되는지 확인합니다. Grunt, 프런트엔드 패키징 및 구축 도구 3. Gulp, 코드로 패키징 스크립트 작성 4. Rollup, ES6 모듈식 패키징 도구 5. Parcel, 구성이 전혀 필요 없는 매우 빠른 웹 애플리케이션 패키저 JS 파일 및 모듈 로더.

이 튜토리얼의 운영 환경: Windows 7 시스템, Dell G3 컴퓨터.

웹 프론트엔드 패키징 도구

1. Webpack

Webpack: 모든 정적 리소스를 패키징할 수 있는 모듈형 관리 도구입니다. 다양한 모듈의 파일을 패키징하고 통합할 수 있으며, 파일 간의 참조가 정확하고 순서대로 실행되는지 확인할 수 있습니다. webpack은 애플리케이션을 처리할 때 내부적으로 종속성 그래프를 작성하고, 프로젝트에 필요한 모든 모듈을 매핑하고, 하나 이상의 번들을 생성합니다.

로더 변환을 통해 CommonJs 모듈, AMD 모듈, ES6 모듈, CSS, 이미지 등 모든 형태의 리소스를 모듈로 간주할 수 있습니다. 종속성 및 규칙에 따라 프로덕션 환경 배포에 적합한 프런트엔드 리소스로 많은 느슨한 모듈을 패키징할 수 있습니다. 또한 요청 시 로드되는 모듈의 코드를 분리하고 실제로 필요할 때 비동기적으로 로드할 수도 있습니다. Gulp/Grunt는 빌드 도구인 반면 모듈 패키저로 위치합니다. Webpack은 Gulp/Grunt의 일부 기능을 대체할 수 있지만 기능적인 도구는 아니며 함께 사용할 수 있습니다.

Webpack은 널리 사용되는 모든 모듈 옵션을 지원하며 React 개발의 동의어가 되었습니다. Webpack은 모듈 번들러라고 주장하지만 이미 범용 작업 실행기로 사용될 수 있습니다.

2. Grunt

Grunt: 가장 오래된 패키징 도구로, 구성 아이디어를 사용하여 패키징 스크립트를 작성합니다. 모든 것이 구성되므로 옵션, src, dest 등과 같은 구성 항목이 더 많아집니다. . 또한 다양한 플러그인에는 자체 확장 필드가 있을 수 있으므로 이를 사용할 때 다양한 플러그인의 구성 규칙을 이해해야 합니다.

3. Gulp

Gulp: 코드를 사용하여 패키징 스크립트를 작성하며 코드는 gulp.src, gulp.pipe, gulp.dest, gulp.watch 인터페이스만 추상화합니다. 응용 프로그램은 매우 간단합니다. 배우고 사용하기가 더 쉽고, gulp를 사용하는 코드의 양도 grunt에 비해 절반 정도 줄일 수 있습니다. (PS: 이 소개는 gulp3용이며 gulp4에서는 사용할 수 없습니다.)

4. Rollup

Rollup: 차세대 ES6 모듈식 도구의 가장 큰 특징은 ES6 모듈 설계 및 트리 쉐이킹을 사용하여 생성한다는 것입니다. 더 간단하고 효율적인 Simple code. 일반적으로 애플리케이션에는 Webpack을 사용하고 클래스 라이브러리에는 Rollup을 사용합니다. 코드 분할(코드 분할)이 필요하거나 많은 정적 리소스를 처리해야 하거나 빌드된 프로젝트에 많은 CommonJS 모듈 종속성을 도입해야 하는 경우 webpack을 사용합니다. 코드 베이스는 ES6 모듈을 기반으로 하고 있으며 Rollup을 사용하여 다른 사람이 코드를 직접 사용할 수 있도록 하고 싶습니다.

5. Parcel

Parcel은 "매우 빠르고 구성이 필요 없는 웹 애플리케이션 패키저"입니다. 웹 프론트 엔드 교육에서는 이론적 지식이든 실제 프로젝트 운영이든 모듈 패키징 도구에 대해 학습하므로 실제로 프론트 엔드 도구 사용법을 배울 수 있습니다.

Parcel에는 다음 기능이 있습니다.

• 빠르게

• 프로젝트의 모든 자산을 번들로 묶습니다.

• 코드 분할이 구성되지 않습니다.

6. browserify

ify는 CommonJS를 사용하는 Node.js를 지원합니다. 모든 모듈을 단일 브라우저 호환 파일로 컴파일하는 모듈입니다. 흐름 아이디어를 기반으로 설계되었으며 명령줄이나 API를 통해 사용할 수 있습니다. JavaScript 모듈화의 역과정만 다루지만 모듈화의 더 나은 개발을 촉진합니다.

7. RequireJS

RequireJS는 JavaScript 파일 및 모듈 로더입니다. 브라우저 내 사용에 최적화되어 있지만 Rhino, Node.js 등 다른 JavaScript 환경에서도 사용할 수 있습니다. RequireJS와 같은 모듈식 스크립트 로더를 사용하면 코드 속도와 품질이 향상됩니다.

이러한 프런트엔드 모듈형 도구의 사용을 익히면 작업이 더 쉽고 효과적으로 수행됩니다. 모듈화는 현대 프런트엔드 엔지니어에게 필수적인 기술이 되었습니다.

(학습 영상 공유: 웹 프론트엔드)

위 내용은 웹 프런트엔드 패키징 도구란 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!