在另一个站点上嵌入开发模式下的创建-react app

Question

我正在开发一个Wordpress“小部件”，这将是一个小的反应应用程序。为此，我选择了创建反应-应用程序。

现在我可以看到如何独立地运行开发服务器，但是我想在Wordpress网站中开发它。我创建了一个微不足道的“自定义HTML”小部件：

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

但这似乎行不通.

注意，我在直接加载/static/js/bundle.js时查看了网络选项卡中的请求，这是访问应用程序的开发版本的既定方法。

那么，当我嵌入到Wordpress站点的本地版本时，如何访问应用程序的开发版本(所有的实时重载功能)？

Answer 1

今天，在我开发的PHP应用程序中，我也遇到了同样的问题。在开发模式中嵌入一个创建-反应-应用程序是非常令人沮丧的，我不得不咨询许多不同的资源来学习如何做到这一点。以下是我的调查结果摘要。

使用iframe

使用iframe嵌入create应用程序(如@quickshiftin所示)并不是个坏主意，但如果您希望通过调用Javascript中的方法或设置全局变量将配置传递给嵌入式SPA，它将无法工作--正如MDN文档(https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#scripting)所述，iframes受相同的原产地策略的约束。

*(注:我写完大部分答案后发现，确实有办法绕过同一来源的政策。它被称为Window.postMessage()__，我在上面链接的MDN文档中也提到了它。你可以考虑使用它。但是，如果您想避免出于任何原因使用iframe，请继续阅读:)

创建-React App文件结构；嵌入到生产模式中

首先，您必须知道嵌入bundle.js是不够的--创建-反应-应用程序构建多个JS文件，这些文件需要使用正确的顺序使用<script>标记嵌入。Jeremiah的这篇博客文章描述了捆绑代码的文件结构，并提出了一种在生产中嵌入创建反应应用程序的方法：https://betterprogramming.pub/how-to-embed-a-react-application-on-any-website-1bee1d15617f。

捆绑代码的文件名包含散列，在每次构建时都会更改。哈希不能被禁用，它是一个在创建-反应-应用(https://github.com/facebook/create-react-app/issues/821)的WONTFIX。因此，要获得生产构建的打包js文件名，可以在PHP中遍历build/static/js目录，并在找到的每个.js文件中输出一个<script>标记。(总是请求所有的块可能是浪费的，但我还没有花时间去研究正确的方法。)

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

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

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

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

使用npx patch-package的解决方法

您可能会认为您有麻烦，并将不得不弹出您的项目和修改webpack的配置，以使这一工作。但是幸运的是，在SergeyVolynkin的评论中描述了一个解决方法，它不需要弹出就解决了这个问题，它使用npx patch-package来修补react utils：https://github.com/facebook/create-react-app/issues/9001#issuecomment-838370686。

SergeyVolynkin没有提到的是，在创建修补程序并将其签入VCS之后，您应该在您的package.json中设置补丁包，以便在运行yarn / npm install时，这些补丁将由npm /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>

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