wordpress 스크립트에 반응 (webpack의) 번들 경로를 삽입하는 방법

Question

나는 olympos theme template을 사용하여 WordPress 테마를 만들고 애플리케이션보기를 완료하기 위해 프런트 엔드 도구로 반응합니다 (create-react-app와 함께).

문제 Wordpress에 스크립트를로드 할 때 React bundle 경로가 필요하므로 두 빌드에서 앱을 더 잘 사용할 수 있습니다. Development &.

개발 함께 첫 번째 문제는 반작용 번들의 경로를 얻을 수있는 직접적인 방법이 없습니다 빌드 (또는 적어도 나는 1, 웹팩 멍청한 놈를 찾을 수 없습니다).

둘째 내가 생산이 그들 사이의 ID'ish 찾고 문자열을 가진 유지 경로를 구축하기 위해 yarn build를 실행 이 무작위로 생성 된 ID마다 내가 빌드를 만드는 것이 변화 유지하기 위해 나를 강제로.

예 :

path/to/wp-theme/build/static/js/main.i3i391.js 

path/to/wp-theme/build/static/css/styles.91k1j2.css 

목표

변화를 못해 다음 빌드 (생산 가능한 경우) 그렇게 할 때 내 워드 프레스의 기능에 배치 개발에 사용할 경로를하게하려면 Webpack의 뜨거운 리로드 경험은 내 Wordpress 구성에서 발생합니다. 일종의 이런

: 이미 내 웹팩을 보여

npm run eject 

을 수행 장면 구성 뒤에 다른 있지만, 그것이 한 나는, 내 웹팩 구성을 구성 할 준비가

function theme_register_scripts() { 
    wp_enqueue_style('styles', get_stylesheet_uri() . 'build/static/css/styles.css'); 
    wp_enqueue_script('scripts', esc_url(trailingslashit(get_template_directory_uri()) . 'build/static/js/main.js'), NULL, '1.0', true); 
} 

언론에 어떤 단추를 피하고 무엇을 피하는 지 아는 것이 꽤 혼란 스럽다.

Answer 1

좀 더 읽고 나면, 나는 나의 오해를 이해하고 다른 사람들을 돕기위한 답을 게시해야한다고 생각했습니다.

Wordpress 4.7 이상은 Rest API 기능과 통합되어 있으므로 플러그인 설치가 필요 없습니다.

그냥

http://localhost/wp-json/ 

에 워드 프레스 빠른 히트를 시작한 후 당신에게 다음

http://localhost/binladen/?rest_route=/ 

할 것인가하지 않을 경우 json으로 몸을 줄 것이다.

반응 테마 개발을 위해 create-react-app (또는 Webpack)을 사용하고 있고 매번 번들을 만들지 않고도 반응 프런트 엔드를 작성할 때 HMR을 유지하려면 걱정하지 마십시오. Wordpress에 관하여. 하나의 탭과 프론트 엔드에 안전하게 머무를 수 있습니다.

WP Rest API를 사용하면 React의 논리에서 Wordpress 리소스를 요청할 수 있으며 프런트 엔드가 끝나거나 Wordpress 번들에 포함하고 Wordpress를 출하 할 때까지 만족할 것입니다. 그 React 테마를 가진 사이트.

npm run build 

(생성 - 반응 - 응용 프로그램과 함께) 프런트 엔드 생산 번들을 구축하고, 워드 프레스 테마 기능 파일에 위의 코드에 의해 생성 된 번들은 반응 생성 포함.

function theme_register_scripts() { 
    wp_enqueue_style('styles', get_stylesheet_uri() . 'build/static/css/styles.1k9s92.css'); 
    wp_enqueue_script('scripts', esc_url(trailingslashit(get_template_directory_uri()) . 'build/static/js/bundle.i1929a.js'), NULL, '1.0', true); 
} 

소스.

만들-반응 - 응용 프로그램 : Source

여러 WP 나머지의 API & 통합 소스를 & 기사 반작용 : WP 나머지 API에 Source

여러 경로 : Source

Olypos WP 템플릿 테마 : Source

를