將 React.js 項目捆綁到可以嵌入到 Ghost 博客文章中的單個 js 文件中

Question

在構建了一個 React.js 項目之后，我想將所有文件（HTML、js、CSS）捆綁到一個可以嵌入到 ghost 博客文章中的 js 文件中。

這是一個如何為幽靈博客文章完成此操作的示例。

https://blog.openbloc.com/include-a-js-app-in-a-ghost-post/

我的問題是如何將 React.js 項目文件捆綁到可以部署在 ghost 博客文章中的單個文件中？

這可以為 Vue.js 成功完成，但我不確定是否可以為 React.js 完成

將 Vue 項目打包成可以嵌入到 Ghost 博客文章中的單個 js 文件

我正在使用 React v18

Answer 1

創建單個 JS 文件輸出

使用 React 模板搭建一個Vite項目：

 npm init vite my-react-project -- --template react

安裝vite-plugin-css-injected-by-js以自動將應用的樣式注入到文檔<head>中：
```
 cd my-react-project npm i -D vite-plugin-css-injected-by-js
```

通過plugins配置 Vite 以使用該插件； 並通過build.cssCodeSplit禁用 CSS 代碼拆分：

 // vite.config.js import { defineConfig } from 'vite' import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js' export default defineConfig({ plugins: [ cssInjectedByJsPlugin(), ], build: { cssCodeSplit: false, }, })

通過build.rollupOptions.input配置 Vite 以構建單個 JavaScript 文件（即main.jsx文件）：

 // vite.config.js import { defineConfig } from 'vite' export default defineConfig({ build: { rollupOptions: { input: { app: './src/main.jsx', }, }, }, })

配置 Vite 以通過base指定部署目標的基本 URL：
```
 // vite.config.js import { defineConfig } from 'vite' export default defineConfig({ base: 'https://cdn.jsdelivr.net/gh/tony19-sandbox/vite-react-single-js-file/dist/', })
```
理想情況下，基本 URL 是一個 CDN 鏈接，可實現最佳加載性能。 例如，如果應用程序文件托管在 GitHub 上的https://github.com/tony19-sandbox/vite-react-single-js-file/tree/main/dist ，則 CDN 鏈接將為https://cdn.jsdelivr.net/gh/tony19-sandbox/vite-react-single-js-file/dist/ 。

構建應用程序：

 cd my-react-project npm run build

然后構建會生成一個包含這些文件的dist目錄：

 dist/assets/app.d91c60c0.js dist/assets/logo.ecc203fb.svg

在 Ghost 中的使用

在您的博客頁面中，插入自定義 HTML 塊。

在 HTML 塊中，添加一個div ，其 ID 與應用程序原始源中src/main.jsx中的安裝點匹配（默認 ID 為"root" ）。
```
 <div id="root">App loading...</div>
```
添加一個<script>來拉入之前構建的app.js文件。 例如，如果您將腳本托管在 GitHub 上，則可以使用如下 CDN 鏈接：
```
 <script src="https://cdn.jsdelivr.net/gh/tony19-sandbox/vite-react-single-js-file/dist/assets/app.d91c60c0.js"></script>
```

結果如下所示：

GitHub

幽靈頁面

Answer 2

您可以使用gulp將 react 項目捆綁到一個文件中。 腳步：

安裝依賴npm install --save-dev gulp gulp-inline-source gulp-replace

創建一個將禁用源映射的.env文件。

 INLINE_RUNTIME_CHUNK=false GENERATE_SOURCEMAP=false SKIP_PREFLIGHT_CHECK=true

在根文件夾中創建gulpfile.js文件並將其寫入其中。

 const gulp = require('gulp'); const inlinesource = require('gulp-inline-source'); const replace = require('gulp-replace'); gulp.task('default', () => { return gulp .src('./build/*.html') .pipe(replace('.js"></script>', '.js" inline></script>')) .pipe(replace('rel="stylesheet">', 'rel="stylesheet" inline>')) .pipe( inlinesource({ compress: false, ignore: ['png'], }) ) .pipe(gulp.dest('./build')); });

現在運行npm run build以創建優化的生產構建，然后運行npx gulp將靜態構建文件夾中的所有 JS 和 CSS 文件捆綁到單個主 html 文件中。

將 React.js 項目捆綁到可以嵌入到 Ghost 博客文章中的單個 js 文件中

問題描述

2 個解決方案

解決方案1
4 已采納 2022-06-07 05:07:35

創建單個 JS 文件輸出

在 Ghost 中的使用

解決方案2
1 2022-06-02 02:30:14

將 React.js 項目捆綁到可以嵌入到 Ghost 博客文章中的單個 js 文件中

問題描述

2 個解決方案

解決方案1 4 已采納 2022-06-07 05:07:35

創建單個 JS 文件輸出

在 Ghost 中的使用

解決方案2 1 2022-06-02 02:30:14

解決方案1
4 已采納 2022-06-07 05:07:35

解決方案2
1 2022-06-02 02:30:14