将 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