如何将反应（webpack 的）包路径注入到 wordpress 脚本函数中

Question

我正在使用 olympos theme template 构建一个 WordPress 主题并将 react（使用 create-react-app）作为我的前端工具来完成应用程序视图。

问题是我需要一个 React 包路径来提供给 Wordpress，因为它加载了我的脚本，这样我就可以在两个构建中更好地使用应用程序 Development & Production.

第一个问题是开发构建没有直接的方法来获取 React 包的路径（或者至少我找不到，Webpack菜鸟).

Second 当我运行 yarn build 使用路径进行生产构建时，它们之间一直有一个 ID'ish 外观字符串，这迫使我每次构建时都不断更改随机生成的 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 和其他幕后配置，但要知道要按什么按钮以及要避免什么是相当混乱的。

Answer 1

经过更多阅读，我了解了自己的误解，并认为我应该 post 一个帮助他人的答案。

Wordpress 4.7 及更高版本集成了 Rest API 功能，因此无需安装插件。

启动 Wordpress 后快速点击

http://localhost/wp-json/

会给你 json 正文，如果没有则

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

会的。

如果你正在使用 create-react-app（或 Webpack）来开发你的 React 主题，并且你想在编写 React 前端时保留你的 HMR 而不是每次都创建 bundle 那么不要担心 Wordpress。它可以安全地留在一个选项卡上，而您的前端位于另一个选项卡上。

您将使用 WP Rest API 在您的 React 逻辑上调用 Wordpress 资源，直到您的前端完成或您对它感到满意时，您才可以将它包含在您的 Wordpress 中将您的 Wordpress 网站与该 React 主题捆绑在一起并发布。

构建您的前端生产包（使用 create-react-app）

npm run build

并将上述代码生成的 React 包包含在 Wordpress 主题函数文件中。

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 Rest API & React 集成源和文章：Source

通往 WP Rest 的多条路线 API：Source

Olypos WP 模板主题：Source

如何将反应（webpack 的）包路径注入到 wordpress 脚本函数中

How to inject react (webpack's) bundle path into wordpress scripts functions

wordpress

wordpress-theming

reactjs

webpack

create-react-app

瞄准