如何将 React 应用程序合并到具有现有 HTML 结构的现有网站中

我认为您正在寻找一种自动合并两个输出的方法，其中一个是现有的 HTML，其中包含从现有构建过程生成并通过数据库触发的页眉和页脚。第二个是您的 React 应用程序，它是来自您的 create-react-app 构建基础架构的完美最终输出。在这种情况下，我建议使用这个非常流行的工具，称为 gulp-inject。gulp-inject 获取源文件流，将每个文件转换为字符串，并将每个转换后的字符串注入目标流文件中的占位符中。下面给出一个例子：假设您的目标文件名为index.html，如下所示<!DOCTYPE html><html><head>  <title>My index</title>    </head><body>     </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'));});运行 gulp index 后， index.html的最终输出将如下所示：<!DOCTYPE html><html><head>  <title>My index</title>    <link rel="stylesheet" href="/src/style1.css">  <link rel="stylesheet" href="/src/style2.css">  </head><body>     <script src="/src/lib1.js"></script>   <script src="/src/lib2.js"></script>   </body></html>下面给出了转换现有 HTML 文件并使用 ReactJS 代码插入它的基础知识。我认为如果您应用这些原则并使用 gulp-inject 工具，您可以实现奇迹。https://reactjs.org/docs/add-react-to-a-website.html您的确切构建自动化可能由您自己的工具驱动，例如 Jenkins 或类似的工具，您可以在其中将一个事件与另一个事件链接起来。例如，您可以在 AWS 上的数据库触发自动生成新的 HTML 文件时进行检查，一旦收到该事件，您就可以触发 Gulp-Inject 脚本（如果您已经准备好 React 组件），或者触发Create-React-App 来重新构建 React 组件，然后应用 Gulp-Inject 脚本将 React 组件或 React 代码注入到 index.html 或 html 页面的任何名称中。可以在此处找到 gulp-inject 的 npm 包。https://www.npmjs.com/package/gulp-inject希望这可以帮助。让我知道。如果您喜欢这个答案，可以采纳。

如何将 React 应用程序合并到具有现有 HTML 结构的现有网站中

2回答