Stu*_*rtM 5 html build-automation amazon-s3 reactjs react-redux
我们有一个<html>文件存储在 AWS S3 上。该文件包含页眉和页脚信息。
该文件有自己的构建管道，我们从数据库收集一些数据并生成 HTML 并上传到 S3。
我们现在希望将捆绑的 React 应用程序包含到此 HTML 页面中。即页面正文中将是捆绑的反应应用程序。
React App 是基于最新的 create-react-app 设置构建的，因此 babel 和 webpack 是预先配置的。如果应用程序是在没有上述设置的情况下托管的，则反应构建会创建所有相关文件。
有没有办法合并两个页面？
**注释：专门寻找合并作为构建过程的一部分。**
我们有一个项目可以生成 header html 并将其发布到 S3 上。我们有触发器可能会触发它在特定时间/更改后等重新生成。
我们有一个 React 应用程序，它在生产版本中与 babel/webpack 捆绑在一起，并生成输出 HTML/bundle js 等。所有内容都经过缩小和哈希处理，因此文件名是捆绑包。randomhash.js等
我们需要合并两个输出。来自 S3 的 html 文件需要在其 body/html 中包含 React App。
理想情况下在管道/构建过程中。因此，如果发生更改，合并将重新编译/重新运行。
我认为您正在寻找一种自动合并两个输出的方法，其中一个是现有的 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'));
});
运行 gulp index 后， 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 代码插入它的基础知识。我认为如果您应用这些原则并使用 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
希望这可以帮助。让我知道。
如果您喜欢这个答案，可以采纳。
| 归档时间： |
|
| 查看次数： |
1716 次 |
| 最近记录： |