如何将 React App 合并到具有现有 HTML 结构的现有网站

Question

我们有一个 <html> 文件存储在 AWS S3 上。该文件包含 header 和页脚信息。

这个文件有自己的构建管道，我们从数据库中收集一些数据并生成 HTML 并上传到 S3。

我们现在想在此 HTML 页面中包含一个捆绑的 React 应用程序。 IE。在页面的 body 内将是捆绑的 React 应用程序。

React App 基于最新的 create-react-app 设置构建，因此 babel 和 webpack 是 pre-configured。如果在没有上述设置的情况下托管应用程序，则 React 构建会创建所有相关文件。

有没有办法合并这两个页面？

**注意：在构建过程中专门寻找合并。 **

我们有一个生成 header html 并将其发布到 S3 上的项目。我们有触发器可能会触发它在特定 times/after 更改等时重新生成
我们有一个 React 应用程序，它在生产构建中与 babel/webpack 捆绑在一起，并生成输出 HTML/bundle js 等。全部缩小和散列，所以文件名是bundle.randomhash.js 等

我们需要合并两个输出。来自 S3 的 html 文件需要在其 body/html.

中包含 React App

最好在 pipeline/build 过程中。所以如果一个改变，合并就是re-compiled/re-run.

Answer 1

为此，您需要在 S3 存储桶中托管您的 js、css 和 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 中逐个添加媒体文件链接文件。

你可能想看看这个 link 在构建你的 React 应用程序时如何将所有文件捆绑到一个文件中（我没有尝试过这部分）。

Answer 2

我认为您正在寻找一种自动合并两个输出的方法，一个是您现有的 HTML，其页眉和页脚由您现有的构建过程生成并通过数据库触发。

第二个是您的 React 应用程序，它是来自您的 create-react-app 构建基础架构的完美最终输出。

在这种情况下，我建议使用这个非常流行的工具，叫做 gulp-inject。 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 新插入。

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'));
});

你的 index.html 的最终输出在运行 gulp index:

之后看起来像这样

<!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 代码插入它的基础知识。我认为如果你应用这些原则并使用 gulp-inject 工具，你可以创造奇迹。

https://reactjs.org/docs/add-react-to-a-website.html

您的确切构建自动化可能由您自己的工具驱动，例如 Jenkins 或您可以将一个事件与另一个事件链接起来的类似工具。例如，您可以检查何时由 AWS 上的数据库触发自动生成新的 HTML 文件，一旦收到该事件，如果您已经拥有 React，则可以触发 Gulp-Inject 脚本组件准备好或触发 Create-React-App 以全新构建 React 组件，然后应用 Gulp-Inject 脚本将您的 React 组件或 React 代码注入 index.html 或任何名称您的 html 页面。

gulp-inject 的 npm 包可以在这里找到。

https://www.npmjs.com/package/gulp-inject

希望这对您有所帮助。让我知道。

如果您喜欢这个答案，可以采纳。

如何将 React App 合并到具有现有 HTML 结构的现有网站

How to Merge React App into existing Website with existing HTML structure

html

build-automation

amazon-s3

reactjs

react-redux