如何将React(Webpack)捆绑路径注入WordPress脚本功能

我正在使用olympos主题模板构建WordPress主题, 并作为前端工具做出反应(使用create-react-app), 以完成应用程序视图。

问题是当加载脚本时, 我需要一个React包路径来提供给Wordpress, 这样我才能在开发和生产版本中更好地使用该应用程序。

第一个问题是开发构建没有直接方法可以通往React包(或者至少我找不到Webpack noob)。

其次, 当我运行yarn构建以使用路径构建生产构建时, 它们之间始终保持一个ID’sish字符串, 这迫使我每次构建时都要不断更改该随机生成的ID。

例子：

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

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

要拥有一条不会改变的路径, 然后将其放在我的Wordpress函数中, 并在开发版本(如果可能的话, 在生产环境中使用)中使用它, 因此当我遇到Webpack的热重装时, 它发生在我的Wordpress配置中。

有点像这样：

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);
}

我已经完成了配置Webpack配置的准备

npm run eject

来展示我的webpack和其他幕后配置, 但是知道要按下什么按钮以及避免什么是相当令人困惑的。

#1

经过一番阅读之后, 我理解了我的误解, 并认为我应该发布答案以帮助他人。

WordPress 4.7及更高版本与Rest API功能集成在一起, 因此无需安装插件。

在启动Wordpress之后, 快速点击

http://localhost/wp-json/

如果没有的话会给你json主体

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

会做。

如果你正在使用create-react-app(或Webpack)进行React主题开发, 并且希望在编写React前端时保持HMR而不必每次都创建捆绑包, 那么不必担心Wordpress。它可以安全地保留在一个选项卡上, 而前端则保留在另一个选项卡上。

你将使用WP Rest API根据React的逻辑调用Wordpress资源, 直到你的前端完成或对此感到满意为止, 然后才能将其包含在Wordpress捆绑包中并随同该React一起交付Wordpress网站主题。

构建你的前端生产包(使用create-react-app)

npm run build

并在Wordpress主题函数文件中包含了由以上代码生成的已创建的React包。

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);
}

资料来源。

create-react-app：来源

多个WP Rest API和React集成来源和文章：来源

到WP Rest API的多条路线：来源

Olypos WP模板主题：来源