Esbuild Bundler에 대한 소개-JS 튜토리얼-php.cn

esbuild : 도구를 신속하게 구축하고 웹 팩 중복성에 작별 인사를하십시오!

esbuild는 JavaScript, TypeScript, JSX 및 CSS 코드를 신속하게 최적화 할 수있는 고성능 포장 도구입니다. 이 기사는 Esbuild를 빠르게 안내하고 추가 종속성없이 자신만의 빌드 시스템을 만드는 방법을 보여줍니다. An Introduction to the esbuild Bundler

코어 포인트 :

ESBUILD 효율 :

ESBUILD는 웹 팩 또는 롤업과 같은 기존 도구보다 훨씬 빠르며 JavaScript, TypeScript, JSX 및 CSS를 효율적으로 처리 할 수 있습니다. 포장 장점 :

esbuild 패키지를 사용하면 트리 쉐이킹, 구문 검사를 지원하고 단일 파일 출력을 생성하여로드 속도를 높이고 유지 보수를 단순화하기 때문에 성능을 향상시킬 수 있습니다.

esbuild는 로컬 개발 서버를 지원하고 핫 재 장전 기능을 가지고 있으며 수동 새로 고침없이 개발할 수 있습니다. 구성 유연성 : 는 다양한 개발 환경 및 워크 플로에 통합 될 수있는 CLI 및 API의 두 가지 구성 방법을 제공합니다.
제한 사항 및 참고 사항 : ESBUILD는 강력하지만 여전히 베타 단계에 있으며 TypeScript 유형 검사와 같은 일부 기능이 부족하며 이러한 작업을 완료하려면 다른 도구가 필요합니다.
Esbuild는 어떻게 작동합니까? Vite와 같은 프레임 워크는 Esbuild를 채택했지만 Esbuild를 자체 프로젝트에서 독립형 도구로 사용할 수도 있습니다.
esbuild 패키지 JavaScript 코드를 롤업과 같은 포장 도구와 유사한 방식으로 단일 파일로 만듭니다. 이것은 모듈을 구문 분석하고 구문 문제를보고하는 Esbuild의 주요 기능으로, "트리 쉐이킹"은 사용되지 않은 기능을 제거하고 로그 및 디버거 문을 삭제하고 코드를 압축하며 소스 매핑을 제공합니다. Esbuild 패키지 CSS 코드를 단일 파일로 코드합니다. SASS 또는 PostCSS와 같은 전 처리기를 완전히 대체하지는 않지만 Esbuild는 부분 코드, 구문 문제, 중첩, 인라인 리소스 인코딩, 소스 매핑, 자동 접두사 및 압축을 처리 할 수 있습니다. 이것은 충분할 수 있습니다. esbuild는 또한 자동 포장 및 핫 재 장전이있는 로컬 개발 서버를 제공하므로 수동 새로 고침이 필요하지 않습니다. BrowserSync가 제공하는 모든 기능이있는 것은 아니지만 대부분의 경우 충분합니다.
다음 코드는 프로젝트의 구성 기회를 더 연구 할 수 있도록 Esbuild의 개념을 이해하는 데 도움이됩니다. 왜 포장합니까?

코드를 단일 파일로 포장하는 데 몇 가지 이점이 있습니다.

는 더 작고 독립적 인 소스 파일을 개발하고 유지하기가 더 쉬울 수 있습니다.

코드 스타일 확인, 코드 형식 및 구문 검사는 포장 중에 수행 할 수 있습니다.

포장 도구는 사용되지 않은 기능을 삭제할 수 있습니다 -

트리 쉐이킹 .

동일한 코드의 다른 버전을 패키지하고 이전 브라우저, Node.js, Deno 등에 대한 대상을 생성 할 수 있습니다.

단일 파일은 여러 파일보다 빠르게로드되며 브라우저에는 ES 모듈 지원이 필요하지 않습니다. 생산 수준 포장은 코드를 압축하고 로그 및 디버그 문을 삭제하여 성능을 향상시킬 수 있습니다.

왜 Esbuild를 사용합니까?

JavaScript 패키징 도구와 달리 Esbuild는 많은 병렬 처리를 구현하는 컴파일 된 GO 실행 파일입니다. 롤업, 소포 또는 웹 팩보다 100 배 빠르고 빠릅니다. 프로젝트 수명주기 동안 몇 주 동안 개발 시간을 절약합니다.

또한 Esbuild도 다음을 제공합니다

내장 JavaScript, TypeScript, JSX 및 CSS 포장 및 컴파일 기능.

명령 줄, JavaScript 및 GO 구성 API.

는 ES 모듈 및 commonjs를 지원합니다.

모니터링 모드 및 실시간 재 장전이있는 로컬 개발 서버.

더 많은 기능을 추가하기위한 플러그인. 완전한 문서 및 온라인 실험 도구.

왜 Esbuild를 사용하지 않습니까?

글을 쓰는 시점에서 Esbuild는 버전 0.18에 도달했습니다. 신뢰할 수 있지만 여전히 베타 제품입니다.

esbuild는 자주 업데이트되며 다른 버전간에 옵션이 변경 될 수 있습니다. 문서는 특정 버전을 고수 할 것을 권장합니다. 업데이트 할 수는 있지만 구성 파일을 마이그레이션하고 새 문서를 파서 주요 변경 사항을 발견해야 할 수도 있습니다.

또한 Esbuild는 TypeScript 유형 확인을 수행하지 않으므로 여전히

필요한 경우 를 사용하여 새 node.js 프로젝트를 만들고 개발 종속성으로 로컬로로드를 설치하십시오.

설치는 약 9MB가 걸립니다. 설치된 버전을 보려면 다음 명령을 실행하여 작동하는지 확인하십시오.

CLI 도움말을 보려면 다음 명령을 실행하십시오.

CLI API를 사용하여 입력 스크립트 (myApp.js)와 가져온 모든 모듈을 Billdle.js라는 단일 파일로 패키지하십시오. esbuild는 기본값, 브라우저 지향, 인스턴트 콜 함수 express (iife) 형식을 사용하여 파일을 출력합니다.
node.js를 사용하지 않는 경우 다른 방식으로 esbuild를 설치할 수 있습니다.

샘플 프로젝트 : github에서 샘플 파일과 esbuild 구성을 다운로드하십시오. 이것은 node.js 프로젝트이므로 다음 명령을 사용하여 단일 Esbuild 종속성을 설치하십시오.
SRC의 소스 파일을 빌드 디렉토리로 빌드하고 다음 명령으로 개발 서버를 시작하십시오.
이제 브라우저에서 LocalHost : 8000으로 이동하여 라이브 시계를 표시하는 웹 페이지를보십시오. SRC/CSS/또는 SRC/CSS/PARTIALS에서 CSS 파일을 업데이트하면 Esbuild는 코드를 다시 포장하고 스타일을 실시간으로 다시로드합니다.

를 누르십시오 ctrl | cmd c > 서버를 중지하십시오. 다음 명령을 사용하여 배포를위한 프로덕션 버전 생성 : ~~빌드 디렉토리의 CSS 및 JavaScript 파일을 확인하여 소스 맵이없는 압축 버전을 확인하십시오.~~

(그러한 내용, 공간 제한으로 인해 원본 텍스트를 참조하거나 원본 텍스트를 기반으로 직접 요약하십시오. 다음은 원본 텍스트의 후속 부분에 대한 주제 요약입니다. 키를 추출 할 수 있습니다. 이 주제를 기반으로 원본 텍스트의 정보와 의사 원리를 만드십시오.
npm install esbuild --save-dev --save-exact
로그인 후 복사
프로젝트 개요
(프로젝트 개요) : 프로젝트 구조 및 스크립트 설명.
esbuild 구성 (Esbuild 구성) : 포장 대상, JavaScript 패키징, CSS 포장 등을 포함한 파일에 대한 자세한 설명. javaScript 입력 및 출력 파일 (JavaScript 입력 및 출력 파일) : , , 등을 포함한 샘플 코드 분석 등
CSS 포장 (CSS 번들링) : CSS 포장 구성 및 샘플 코드 분석, , 등을 포함한 샘플 코드 분석. package.json
모니터링, 재건 및 서비스 (시청, 재건 및 서빙) : 개발 서버 및 핫 재 장전 구현. 요약 (요약) : Esbuild의 장점과 단점 요약. esbuild.config.js FAQS (Esbuild에 대한 자주 묻는 질문 (FAQ)) : Esbuild에 대한 FAQ.
의사 원리의 과정에서 문장 구조를 조정하고 동의어를 대체하는 등이 필요하므로 기사는 원래 의미를 변경하지 않고 다른 표현을 제시하도록해야합니다. 원본 텍스트를주의 깊게 읽고 재 작성에 대한 위의 주제 요약을 기반으로 주요 정보를 추출하십시오.

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