使用PHP后端和React Application

Question

我有一个反应应用程序,我运行npm run build来生成我上传到S3的构建包.让我们说www.test.com/build/

但是我有一个PHP后端应该负责提供index.html(来自www.test.com/index.html)

由于没有与S3存储桶和PHP应用程序的连接,我不知道如何处理反应应用程序中的哈希名称

没有哈希值,我无法生成构建包,因为我将丢失缓存破坏程序.

什么是与反应应用程序和后端应用程序一起使用的良好实践.在这种情况下是PHP但我认为问题应该与托管在不同服务器中的NodeJS后端相同.

我正在使用AWS CodePipeline来构建react应用程序(npm run build)和php app(composer install)

Answer 1

PHP 不需要了解带有或不带有哈希值的 JS 文件。您的 PHP 服务器将仅提供 index.html 文件。您的index.html 文件包含入口点javascript 文件。

<script type="text/javascript" src="/js/vendor.bundle.js"></script>
<script type="text/javascript" src="/js/index.js"></script>

当你的PHP服务器提供index.html文件时，在客户端的浏览器上它将使用供应商和索引文件（或任何你的文件名）通过块加载必要的react和其他js代码。

如果您需要将vendor.bundle.js和index.js与哈希一起使用怎么办？

以下模块将为您提供帮助。

模块 1： https: //www.npmjs.com/package/webpack-manifest-plugin 该模块将帮助您跟踪生成的哈希文件。

模块 2：https ://www.npmjs.com/package/html-replace-webpack-plugin 使用此模块，您可以用从模块 1 获得的哈希文件名替换入口点文件。