如何将React与现有HTML结构合并到现有网站中
我们在AWS S3上存储了一个<html>文件。该文件包含页眉和页脚信息。
这个文件有自己的构建管道，我们从数据库中收集一些数据，生成HTML并上传到S3。
现在，我们希望在这个HTML页面中包含一个捆绑的React。也就是说，在页面的正文中将有捆绑的react应用程序。
该反应应用程序是建立在最新的创建-反应-应用程序的设置，因此，巴贝尔和webpack是预先配置。如果应用程序是在没有上述设置的情况下托管的，那么将创建所有相关文件。
有办法合并这两页吗？
**备注:专门寻找合并作为构建过程的一部分。**
- 我们有一个项目，它生成标题html并将其发布到S3上。我们有一些触发器，这些触发器可能会触发在特定时间/更改之后重新生成这些内容。
- 我们有一个在生产构建中与babel/webpack捆绑在一起的React应用程序，并生成输出的HTML/bundle js等。所有这些都是精简和散列的，所以文件名是bundle.randomhash.js等。
我们需要合并这两个输出。来自S3的html文件需要在其body/html中包含React。
理想情况下，在管道/构建过程中。因此，如果一个变化，合并是重新编译/重新运行。
回答 2
Stack Overflow用户
发布于 2020-03-21 11:32:02
我认为您正在寻找一种自动合并两个输出的方法，一个是您现有的HTML，其页眉和页脚由您现有的构建过程生成，并通过数据库触发。
第二个是您的react应用程序，它是一个很好的最终输出，来自您的创建-反应-应用程序构建基础设施。
在这种情况下，我会建议使用这个非常流行的工具，称为吞咽注射。gulp inject接受源文件流，将每个文件转换为字符串，并将每个转换后的字符串注入目标流文件中的占位符中。
以下是一个例子：
假设您的目标文件名为index.html，如下所示
<!DOCTYPE html>
<html>
<head>
<title>My index</title>
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<!-- inject:js -->
<!-- endinject -->
</body>
</html>您的gulpfile.js脚本看起来如下所示，以实现基于此脚本自动插入新index.html的新index.html。
var gulp = require('gulp');
var inject = require('gulp-inject');
gulp.task('index', function () {
var target = gulp.src('./src/index.html');
// It's not necessary to read the files (will speed up things), we're only after their paths:
var sources = gulp.src(['./src/**/*.js', './src/**/*.css'], {read: false});
return target.pipe(inject(sources))
.pipe(gulp.dest('./src'));
});运行gulp索引后，index.html的最后输出将如下所示：
<!DOCTYPE html>
<html>
<head>
<title>My index</title>
<!-- inject:css -->
<link rel="stylesheet" href="/src/style1.css">
<link rel="stylesheet" href="/src/style2.css">
<!-- endinject -->
</head>
<body>
<!-- inject:js -->
<script src="/src/lib1.js"></script>
<script src="/src/lib2.js"></script>
<!-- endinject -->
</body>
</html>下面给出了转换现有的HTML文件并使用ReactJS代码插入它的基础知识。我认为，如果你应用这些原则并使用注射工具，你就能实现奇迹。
https://reactjs.org/docs/add-react-to-a-website.html
您的精确构建自动化可能由您自己的工具(如Jenkins )或类似的工具驱动，您可以在这些工具中将一个事件与另一个事件链接起来。例如，您可以在AWS上的数据库触发自动生成新的HTML文件时进行检查，一旦收到该事件，如果您已经准备好了React组件，或者触发了Create- React -App，则可以触发Gulp-Inject脚本，或者触发Create- React App来新建new组件，然后应用Gulp-Inject脚本将您的React组件或React代码注入到index.html或您的html页面的任何名称。
可在此找到用于吞咽注射的npm包。
https://www.npmjs.com/package/gulp-inject
希望这能有所帮助。让我知道。
如果你喜欢答案，你可以接受它。
Stack Overflow用户
发布于 2020-03-12 18:33:11
为此，您需要将js、css和媒体文件保存在S3桶中的react文件夹中，并将以下内容添加到代码中。
<html>
..... your static html code
<div id="the id used to bootstrap your react app (from the index.html file in the public folder)"></div>
......
links to all the files in your JS, CSS And media files from the react build folder
</html>我建议尽可能多地使用托管图像(也可以在S3上托管它们)和资产，这样就不需要在html文件中按一个添加媒体文件链接。
在构建您的react应用程序时，您可能想看看这个链接如何将所有文件打包到一个文件中(我还没有试过这个部分)。
https://stackoverflow.com/questions/60659317
复制相似问题
腾讯云开发者
