在 WordPress 插件中使用“创建 React 应用程序”

Posted 2023-03-13

【中文标题】在 WordPress 插件中使用“创建 React 应用程序”

【英文标题】：Use "Create React App" inside a WordPress plugin

【发布时间】：2021-03-15 11:22:04

【问题描述】：

我想开发一个插件，其中管理前端（例如 wp-admin 页面）使用 React 呈现。

我使用create-react-app 在子文件夹中开发应用程序。

为了将 React 应用程序加载到 WordPress 管理员中，我正在查看 build/asset-mainfest.json 中的 entrypoints 并确保以正确的顺序将它们排入队列。

React 应用程序启动良好，但所有相对路径都损坏了，例如以下不起作用（我知道这是Webpack feature）：

import logo from "./logo.jpg";

function App() 
  return <img src=logo  />;


export default App;

它崩溃的原因是，Webpack 假定 build 文件夹位于根目录。

我已经看到了一些解决方案，但没有一个能满足我的需求：

Here作者只是防止代码拆分，但仍然遇到与上述相同的问题。它只是不考虑其他资产。 Here作者在package.json中设置"homepage": "/wp-content/plugins/my-plugin/react-app/build"。但我认为如果 WordPress 托管在子目录本身（如 mywebsite.com/blog）中，这会中断 Here homepage 也设置为特定域，这使得插件不可分发。 还有一篇文章建议将 html base 属性添加到头部。但可能还有其他相关链接会因此而中断。 Setting the homepage to "." 也不起作用，因为我不提供 build 文件夹本身。

您知道我应该如何在此处使用create-react-app 导入资产吗？我希望插件可以工作，但是 WordPress 已设置。 我最好的猜测是将 React 的 URL 传递到资产文件夹并编写类似 <img src=props.assetsUrl + '/logo.jpg' /> 的内容，完全避免这些导入。 我想避免使用iframe，因为这会导致我不想处理的其他麻烦... :)

【参考方案1】：

我好像找到了遇到同样问题的其他人：https://dev.to/n1ru4l/configure-the-cra-public-url-post-build-with-node-js-and-express-4n8

您可以将 PUBLIC_URL 环境变量设置为占位符（在 package.json 中）"build": "cross-env PUBLIC_URL=__PUBLIC_URL_PLACEHOLDER__ react-scripts build && node scripts/patch-public-url.js"

...并调用脚本将所有占位符替换为window.__PUBLIC_URL__（请参阅提供的scripts/patch-public-url.js 链接，仅处理javascript 文件）。

然后你可以本地化脚本wp_localize_script( $handle, '__PUBLIC_URL__', $assets_url ); 其中$assets_url 是您的 React build 文件夹的 URL，动态确定。

完成！以防万一，您可能需要选择 __PUBLIC_URL__ 以外的其他内容。

【参考方案2】：

我最终创建了 .env 和 .env.local 文件。

.env 文件：

REACT_APP_ASSETS=.../wp-content/plugins/...插件名称.../build/assets/

.env.local 文件：

REACT_APP_ASSETS=assets/

然后这样使用：

<img src=process.env.REACT_APP_ASSETS + "logo.png" />