在 WordPress 插件中使用 "Create React App"

Question

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

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

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

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

import logo from "./logo.jpg";

function App() {
  return <img src={logo} alt="" />;
}

export default App;

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

我已经看到了一些解决方案，但是 none 可以满足我的需求：

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，因为这会导致我不想处理的其他麻烦...:)

Answer 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 提供的 link，仅处理 JavaScript 文件） .

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

完成！以防万一，您可能想要选择 __PUBLIC_URL__ 以外的选项。

Answer 2

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

.env 文件：

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

.env.local 文件:

REACT_APP_ASSETS=资产/

然后这样使用：

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

在 WordPress 插件中使用 "Create React App"

Use "Create React App" inside a WordPress plugin

reactjs

wordpress

webpack

embed

create-react-app