JavaScript Bundlers 및 WordPress

WordPress에서 JavaScript Bundlers의 역할

WordPress는 전통적으로`wp_enqueue_script` 및`wp_enqueue_style`과 같은 PHP 기능을 사용하여 JavaScript 파일 및 기타 자산을로드합니다. 그러나 WordPress 프로젝트가 더욱 복잡해지면서, 특히 최신 JavaScript 프레임 워크 (React 또는 VUE와 같은) 및 모듈 식 코드를 사용할 때 많은 개별 파일을 수동으로 관리하는 것이 비효율적이고 오류가 발생합니다. Bundlers는 개발자가 모듈 식 자바 스크립트 및 CSS를 작성할 수있게함으로써 솔루션을 제공합니다. Bundler는 WordPress에서 쉽게 큐를 잡을 수있는 최적화 된 단일 또는 다중 다발로 처리합니다.

WordPress와 함께 사용되는 인기있는 JavaScript Bundlers

몇몇 JavaScript 번들러는 일반적으로 WordPress 개발에 사용됩니다.

-Webpack : 이것은 유연성과 광범위한 플러그인 및 로더 에코 시스템으로 유명한 가장 인기 있고 널리 사용되는 JavaScript Bundler입니다. Webpack builds a dependency graph starting from entry points and bundles all dependencies into output files. 코드 분할, 트리 흔들림 및 자바 스크립트 파일의 로더와 같은 고급 기능을 지원합니다. WebPack은 필요에 따라 기능을 변환하고 폴리 칠을하여 현대식 및 기존 브라우저와 호환되는 번들을 생산할 수 있습니다.

-ESBUILD : 극도의 속도로 유명한 Esbuild는 최신 JavaScript 기능을 지원하여 JavaScript 및 TypeScript를 빠르게 번들로 묶을 수 있습니다. 최적화 된 출력을 생성하며 최신 브라우저를 대상으로 빠른 빌드 프로세스가 필요한 WordPress 프로젝트에 적합합니다.

-Browserify : Webpack 및 Esbuild보다 오래된 Browserify를 사용하면 개발자가 브라우저의 Node.js 스타일 모듈 식 코드를 작성할 수 있습니다. 간단하지만 다중 자산 지원이 부족하고 일부 고급 최적화가 부족합니다. 여전히 더 간단한 WordPress 프로젝트에 사용될 수 있습니다.

- 소포 : 상자에서 잘 작동하는 제로 구성 번더. 소포는 종속성 및 프로세스 JavaScript, CSS 및 기타 자산 유형을 자동으로 감지합니다. 이는 최소한의 설정 복잡성을 원하는 개발자에게 매력적일 수 있습니다.

WP Bundler : WordPress 특유의 번들러

WP Bundler는 WordPress Frontend 자산을 위해 특별히 맞춤화 된 Bundler입니다. Esbuild 주변의 얇은 래퍼 역할을하며 번역 처리 및 WordPress 환경에 최적화 된 자산로드와 같은 WordPress 관련 요구에 대한 내장 지원이 포함되어 있습니다. WP Bundler 지원 :

- 반응 호환성이있는 JavaScript 및 TypeScript.
-CSS 및 CSS 모듈.
- 이미지 및 글꼴과 같은 정적 자산 처리.
- 출력 현대 및 레거시 브라우저에 최적화 된 별도의 번들.
- WordPress 글로벌 종속성의 자동 감지 및 제외 (`@WordPress/*`패키지, 반응, 반응, jQuery)는 여러 번 번들되어 있지 않고 WordPress를 통해 올바르게 큐를 제공합니다.

WP Bundler는 또한 PHP 자산 로더 클래스를 제공하여 WordPress의 Enqueuing 시스템과 원활하게 통합하여 최소한의 구성으로 스크립트, 스타일 및 블록 편집기 자산을 올바르게 적용 할 수 있습니다. 이 로더는 종속성을 처리하고 환경 또는 브라우저 호환성을 기반으로 적절한 버전의 자산을 사용하도록합니다.

통합 및 워크 플로

WordPress에서 JavaScript Bundlers를 통합 할 때 개발자는 일반적으로 다음 워크 플로를 채택합니다.

1. 프로젝트 설정 : 패키지 관리를 위해 NPM 또는 원사를 초기화하고 Bundler 및 관련 빌드 도구를 설치하십시오.

2. 모듈화 개발 : ES6 모듈 또는 React와 같은 프레임 워크를 사용하여 모듈 식 파일에서 JavaScript 코드를 개발합니다. 필요에 따라 CSS 및 기타 정적 자산을 수입하십시오.

3. 구성 : 번들의 진입 지점 및 출력 경로를 구성합니다. 일부 번들러는 광범위한 구성 (예 : 웹 팩)이 필요하지만 소포와 같은 다른 구성에는 최소한의 설정이 필요합니다.

4. 빌드 프로세스 : 번들러를 실행하여 최적화 된 번들을 생성하십시오. 이 단계에는 변환 (예 : 바벨), 미니 화, 코드 분할 및 기타 최적화가 포함될 수 있습니다.

5. 자산 queuing : WordPress 함수를 사용하여 번들 스크립트와 스타일을 흡수합니다. WP Bundler와 같은 도구를 사용할 때 자산 로더는이를 자동으로 처리하여 프로세스를 단순화합니다.

6. 개발 모드 : 일부 번들러가 제공하는 소스 맵 및 핫로드 기능을 사용하여 개발자 경험을 향상시킵니다.

WordPress 의존성 처리

WordPress에는 React, ReactDom 및 블록 편집기에 사용되는 다양한`@WordPress` 패키지를 포함하여 여러 JavaScript 라이브러리가 제공됩니다. 효율적인 번들링에는 이러한 라이브러리를 외부 종속성으로 인식하여 번들에 복제되지 않고 WordPress를 통해로드됩니다. 예를 들어, WP Bundler는 이러한 핵심 종속성을 자동으로 제외하고 WordPress가 충돌과 중복을 피하기 위해 로딩을 관리 할 수 ​​있습니다.

도전 및 모범 사례

-JQuery 및 Conflicts : WordPress는 역사적으로 jQuery를 포함하지만, 스크립트가 불일치 모드에서 작동하는 jQuery로 인해 Dollar Sign` $`를 사용하는 경우 충돌이 발생합니다. 개발자는`$` '대신`jQuery'를 사용하거나 불일치없는 래퍼에서 코드를 랩핑해야합니다.

- 레거시 브라우저 지원 : 구형 브라우저와의 호환성을 보장하려면 변환 된 폴리 채식 다발을 생성해야합니다. Webpack 및 WP Bundler와 같은 Bundlers는 현대 및 레거시 버전의 스크립트를 모두 출력합니다.

- 자산 버전화 : 캐싱 문제를 방지하기 위해 고유 버전 문자열 또는 해시가 자산 URL에 추가됩니다. 번들러는 종종 파일 이름의 컨텐츠 해싱을 통해이를 용이하게합니다.

- 성능 : 묶음 분할 묶음을 페이지 당 필요한 코드 또는 기능 만로드하면 성능이 향상 될 수 있습니다. 코드 분할은 Webpack 및 기타 Bundlers에서 지원합니다.

- 자동화 구축 : NPM 스크립트를 통해 번들러를 자동으로 실행하거나 Gulp 또는 Grunt와 같은 도구를 빌드하면 개발 워크 플로를 간소화 할 수 있습니다.

WordPress에서 Bundler 사용의 예

- 테마 또는 플러그인에는 React를 사용하여 JavaScript 파일이있는`SRC` 폴더가있을 수 있습니다. WebPack은 진입 점으로 구성되며 번들 JavaScript 파일을 테마의`assets/js '폴더에 출력합니다. 테마의`functions.php`는 번들 스크립트를 흡수하여 React와 같은 종속성을 외부로 표시합니다.

-WP Bundler를 사용하여 개발자는 WordPress 플러그인 안에 CSS 모듈이있는 최신 JavaScript 또는 TypeScript를 작성합니다. Bundler는 최신 및 레거시 번들을 출력하며 포함 된 PHP 자산 부하는 페이지로드 또는 블록 편집기 렌더링 중에 스크립트와 스타일을 자동으로 처리합니다.

- 더 간단한 설정을 위해 개발자는 Parcel을 사용하여 구성 자산을 구성하지 않고 전면 자산을 묶은 다음 WordPress에서 결과 번들을 흡수 할 수 있습니다.

Bundler의 요약

-Webpack : 구성 가능성이 높으며 React 및 Code Splitting을 포함한 모든 최신 JavaScript 워크 플로우를 지원하며 복잡한 프로젝트에 이상적입니다.
-WP Bundler : WordPress 용으로 특별히 설계되었으며, Esbuild를 번역 및 자산 관리를위한 WordPress 친화적 인 기능으로 랩핑합니다.
-ESBUILD : 최신 JavaScript 및 TypeScript 지원 기능을 갖춘 빠른 ​​번더 및 트랜스 필러, 성능 크리티컬 빌드에 적합합니다.
-Browserify : 브라우저 용 간단한 노드 스타일 모듈 번들링이지만 다중 자산 및 최적화 기능이 부족합니다.
-Accel : 여러 자산 유형을 지원하는 제로 콘피드 번더는 시작하기 쉽지만 고급 사용자 정의 가능성이 부족할 수 있습니다.

결론

JavaScript Bundlers는 프론트 엔드 자산을 최적화하고 간단한 스크립트 포함을 넘어 기능을 확장하기위한 현대 WordPress 개발의 필수 도구입니다. 이를 통해 개발자는 모듈 식, 유지 관리 가능하며 효율적인 JavaScript 및 CSS를 작성하여 최신 프레임 워크 및 개발 관행을 활용할 수 있습니다. WP Bundler와 같은 WordPress 별 솔루션은 WordPress Core 스크립트 및 번역을 인식하여 원활한 통합을 제공합니다. WordPress 사이트가 복잡한 정면 엔드를 점점 채택함에 따라 Bundlers를 활용하면 유지 가능한 코드베이스와 성능 향상을 보장합니다.