將React.js專案捆綁到可以嵌入到Ghost博客文章中的單個js檔案中-有解無憂

在構建了一個 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

uj5u.com熱心網友回復：

創建單個 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
```

通過 ; 配置 Vite 以使用該插件plugins；并通過以下方式禁用 CSS 代碼拆分build.cssCodeSplit：

// vite.config.js
import { defineConfig } from 'vite'
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'

export default defineConfig({
  plugins: [
    cssInjectedByJsPlugin(),
  ],
  build: {
    cssCodeSplit: false,
  },
})

通過以下方式配置 Vite 以構建單個 JavaScript 檔案（即main.jsx檔案）build.rollupOptions.input：

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        app: './src/main.jsx',
      },
    },
  },
})

通過以下方式配置 Vite 以指定部署目標的基本 URL base：
```
// 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 塊中，添加一個ID，該 ID 與您應用的原始源div中的安裝點相匹配（默認 ID 為）。src/main.jsx"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

幽靈頁面

uj5u.com熱心網友回復：

您可以gulp用于將反應專案捆綁到一個檔案中。腳步：

安裝依賴項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 檔案中。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/488874.html

標籤：javascript 反应网页包鬼博客

上一篇：在React中洗掉行內塊錯誤腳本

下一篇：如何在打開表單時隱藏選項卡控制元件？