我們有一個(gè)<html>文件存儲(chǔ)在 AWS S3 上。該文件包含頁眉和頁腳信息。該文件有自己的構(gòu)建管道，我們從數(shù)據(jù)庫收集一些數(shù)據(jù)并生成 HTML 并上傳到 S3。我們現(xiàn)在希望將捆綁的 React 應(yīng)用程序包含到此 HTML 頁面中。即頁面正文中將是捆綁的反應(yīng)應(yīng)用程序。React App 是基于最新的 create-react-app 設(shè)置構(gòu)建的，因此 babel 和 webpack 是預(yù)先配置的。如果應(yīng)用程序是在沒有上述設(shè)置的情況下托管的，則反應(yīng)構(gòu)建會(huì)創(chuàng)建所有相關(guān)文件。有沒有辦法合并兩個(gè)頁面？**注釋：專門尋找合并作為構(gòu)建過程的一部分。**我們有一個(gè)項(xiàng)目可以生成 header html 并將其發(fā)布到 S3 上。我們有觸發(fā)器可能會(huì)觸發(fā)它在特定時(shí)間/更改后等重新生成。我們有一個(gè) React 應(yīng)用程序，它在生產(chǎn)版本中與 babel/webpack 捆綁在一起，并生成輸出 HTML/bundle js 等。所有內(nèi)容都經(jīng)過縮小和哈希處理，因此文件名是捆綁包。randomhash.js等我們需要合并兩個(gè)輸出。來自 S3 的 html 文件需要在其 body/html 中包含 React App。理想情況下在管道/構(gòu)建過程中。因此，如果發(fā)生更改，合并將重新編譯/重新運(yùn)行。
2 回答
蕪湖不蕪
TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超7個(gè)贊
我認(rèn)為您正在尋找一種自動(dòng)合并兩個(gè)輸出的方法，其中一個(gè)是現(xiàn)有的 HTML，其中包含從現(xiàn)有構(gòu)建過程生成并通過數(shù)據(jù)庫觸發(fā)的頁眉和頁腳。
第二個(gè)是您的 React 應(yīng)用程序，它是來自您的 create-react-app 構(gòu)建基礎(chǔ)架構(gòu)的完美最終輸出。
在這種情況下，我建議使用這個(gè)非常流行的工具，稱為 gulp-inject。gulp-inject 獲取源文件流，將每個(gè)文件轉(zhuǎn)換為字符串，并將每個(gè)轉(zhuǎn)換后的字符串注入目標(biāo)流文件中的占位符中。
下面給出一個(gè)例子：
假設(shè)您的目標(biāo)文件名為index.html，如下所示
<!DOCTYPE html>
<html>
<head>
<title>My index</title>
<!-- inject:css -->
<!-- endinject -->
</head>
<body>
<!-- inject:js -->
<!-- endinject -->
</body>
</html>
您的gulpfile.js腳本將如下所示，以根據(jù)此腳本自動(dòng)實(shí)現(xiàn)帶有新插入的新 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'));
});
運(yùn)行 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>
下面給出了轉(zhuǎn)換現(xiàn)有 HTML 文件并使用 ReactJS 代碼插入它的基礎(chǔ)知識(shí)。我認(rèn)為如果您應(yīng)用這些原則并使用 gulp-inject 工具，您可以實(shí)現(xiàn)奇跡。
https://reactjs.org/docs/add-react-to-a-website.html
您的確切構(gòu)建自動(dòng)化可能由您自己的工具驅(qū)動(dòng)，例如 Jenkins 或類似的工具，您可以在其中將一個(gè)事件與另一個(gè)事件鏈接起來。例如，您可以在 AWS 上的數(shù)據(jù)庫觸發(fā)自動(dòng)生成新的 HTML 文件時(shí)進(jìn)行檢查，一旦收到該事件，您就可以觸發(fā) Gulp-Inject 腳本（如果您已經(jīng)準(zhǔn)備好 React 組件），或者觸發(fā)Create-React-App 來重新構(gòu)建 React 組件，然后應(yīng)用 Gulp-Inject 腳本將 React 組件或 React 代碼注入到 index.html 或 html 頁面的任何名稱中。
可以在此處找到 gulp-inject 的 npm 包。
https://www.npmjs.com/package/gulp-inject
希望這可以幫助。讓我知道。
如果您喜歡這個(gè)答案，可以采納。
慕妹3242003
TA貢獻(xiàn)1824條經(jīng)驗(yàn) 獲得超6個(gè)贊
為此，您需要將 React 構(gòu)建文件夾中的 js、css 和媒體文件托管在 S3 存儲(chǔ)桶中，并將以下內(nèi)容添加到代碼中。
<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 上）和資產(chǎn)，這樣您就不需要在 html 文件中逐一添加媒體文件鏈接。
- 2 回答
- 0 關(guān)注
- 236 瀏覽
添加回答
舉報(bào)
0/150
提交
取消