在另一个站点上以开发模式嵌入 create-react-app

Question

我正在开发一个 Wordpress“小部件”，它将是一个小型反应应用程序。为此，我选择了create-react-app 。

现在我可以了解如何足够轻松地独立运行开发服务器，但我想在它位于 WordPress 网站内时对其进行开发。我创建了一个简单的“自定义 HTML”小部件：

<div id="root"></div>
<script type="text/javascript" src="http://localhost:8080/static/js/bundle.js"></script>

但这似乎不起作用......

注意：我是/static/js/bundle.js通过直接加载时查看网络选项卡中的请求来想到的http://localhost:8080，这是访问应用程序的开发版本的规定方式。

那么，当嵌入到我的本地版本的 WordPress 网站时，如何访问应用程序的开发版本（具有所有实时重新加载的优点）？

Answer 1

我今天在我正在开发的 PHP 应用程序中遇到了同样的问题。在开发模式中嵌入 create-react-app 是非常令人沮丧的，我不得不咨询很多不同的资源来学习如何做到这一点。这是我的发现的摘要。

使用 iframe

正如 @quickshiftin 所建议的那样，使用 iframe 嵌入 create-react-app 并不是一个坏主意，但如果您希望通过调用方法或在 Javascript 中设置全局变量来将配置传递给嵌入式 SPA，则它将不起作用* - - 正如 MDN 文档所述（https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#scripting），iframe受同源策略约束。

* （注意：在写完这个答案的大部分内容后，我发现确实有一种方法可以绕过同源策略。它被称为Window.postMessage()，并且在我上面链接的 MDN 文档部分中也提到了它。您可能想要考虑使用它。但如果您出于某种原因想避免使用 iframe，请继续阅读:)

Create-React-App文件结构；嵌入生产模式

您必须知道的第一件事是嵌入bundle.js是不够的 - create-react-app 构建了多个需要使用<script>标签以正确顺序嵌入的 JS 文件。Jeremiah Tabb 的这篇博客文章描述了捆绑代码的文件结构，并提出了一种将 create-react-app 嵌入生产中的方法： https: //betterprogramming.pub/how-to-embed-a-react-application-on -任意网站-1bee1d15617f

捆绑代码的文件名包含在每次构建时都会更改的哈希值。哈希无法禁用，它是 create-react-app 中的 WONTFIX ( https://github.com/facebook/create-react-app/issues/821 )。因此，要在 PHP 中获取生产版本的捆绑 js 文件名，您只需遍历目录并为找到的每个 .js 文件build/static/js输出一个标签即可。<script>（总是请求所有块可能很浪费，但我还没有花时间研究正确的方法。）

开发模式在错误路径下寻找块

但在开发模式下，这是你的实际问题，处理方式有点不同。开发服务器提供的index.html最初仅加载三个脚本：bundle.js、vendors~main.chunk.js和main.chunk.js。其他块是动态加载的。您可以尝试将这三个脚本嵌入到您的 Wordpress 页面上，但是您会发现在运行时，Webpack 生成的“引导”代码会在错误的 URL 中查找块，使用 eglocalhost代替localhost:3000，导致块加载错误。

PUBLIC_URL并且"homepage"不在开发模式下工作

根据 Create-React-App 文档和本网站上的各种其他答案，您应该能够使用环境变量PUBLIC_URL或 package.json 中的密钥"homepage"来覆盖提供 JS 代码的主机名和端口，以便块将加载，但这些设置在开发模式下不会执行任何操作。这是 create-react-app 中的一个未决问题：https ://github.com/facebook/create-react-app/issues/9001

解决方法使用npx patch-package

您可能认为您遇到了麻烦，并且必须自行弹出项目并修改 webpack 配置才能使其正常工作。但幸运的是，SergeyVolynkin 的评论中描述了一种解决方法，它可以解决问题而不弹出，使用npx patch-package修补react-dev-utils： https: //github.com/facebook/create-react-app/issues/9001#问题评论-838370686

yarnSergeyVolynkin 没有提到的是，在创建补丁并将其签入 VCS 后，您应该在 package.json 中设置 patch-package，以便在运行/时由 npm / yarn 应用补丁npm install。请参阅此处的补丁包文档：https ://github.com/ds300/patch-package#set-up

概括

应用 SergeyVolynkin 的补丁后，我能够将开发版本嵌入到我的 PHP 应用程序中。我在 package.json 中使用了以下脚本：

"scripts": { 
    "start": "PORT=1234 PUBLIC_URL=http://localhost:1234 WDS_SOCKET_PORT=1234 react-scripts start",
    "postinstall": "patch-package"
}

我在 PHP 应用程序提供的 HTML 中使用了以下几行：

  <script src="http://localhost:1234/static/js/bundle.js"></script>
  <script src="http://localhost:1234/static/js/vendors~main.chunk.js"></script>
  <script src="http://localhost:1234/static/js/main.chunk.js"></script>

通过这样做，我可以将在开发模式下创建的应用程序嵌入create-react-app到我的 PHP 应用程序中。