javascript - SvelteKit:如何使用内联的 JS 和 CSS 将构建输出为单个 HTML 文件？

Question

是否可以将 SvelteKit 项目构建为内联所有 JS 和 CSS 的单个输出 HTML 文件？是否可以将 SvelteKit 配置为支持这种输出格式，或者我是否需要使用外部构建工具？
单个 HTML 文件输出是我项目中的核心要求。我正在使用 ssr: false 构建 SvelteKit SPA和 @sveltejs/adapter-static与 fallback: 'index.html'配置。
我以前用过https://github.com/richardtallent/vite-plugin-singlefile使用简单的 vite 来完成此操作+ svelte设置 - 这很好。但是，我无法添加 vite-plugin-singlefile到svelte.config.js我的 SvelteKit 项目中的 vite 插件。
这是我尝试过的 SvelteKit 配置:

import preprocess from 'svelte-preprocess'
import adapter from '@sveltejs/adapter-static'
import { viteSingleFile } from 'vite-plugin-singlefile'

const config = {
    preprocess: preprocess(),
    kit: {
        target: '#svelte',
        adapter: adapter({ fallback: 'index.html' }),
        ssr: false,
        vite: {
            plugins: [viteSingleFile()],
            build: {
                target: 'es2019',
                assetsInlineLimit: 100000000,
                chunkSizeWarningLimit: 100000000,
                cssCodeSplit: false,
                sourcemap: false,
                brotliSize: false,
                rollupOptions: {
                    inlineDynamicImports: true,
                    output: {
                        manualChunks: () => 'everything.js',
                    },
                },
                outDir: 'build'
            }
        }
    },
}

export default config

我还研究了使用其他解决方案来内联所有 CSS 和 JS:

https://github.com/remy/inliner - 这不支持内联 <script type="module"> SvelteKit 输出并且我需要转换为内联脚本。

此处提到的解决方案无效:Output Single HTML File from Svelte Project

https://github.com/jonathantneal/posthtml-inline-assets - 不支持 <script type="module"> ，而不是动态的 import()在 esm 模块内部调用。

任何想法都会有所帮助!

Answer 1

这是一个技术含量低的解决方案，但您可以分别用样式和脚本标签替换指向 CSS 和 JS 文件的链接。然后在标签之间复制粘贴这些文件的内容。
只要您将样式/脚本标签放在与之前链接 CSS 和 JS 相同的位置，就不会出现任何重大问题(尽管任何带有 defer 的 JS 脚本都需要进入一个事件处理程序，说只有运行该脚本的内容页面已完全加载)。
当然，您使用的是导入的文件，所以这完全取决于您是否能够访问它们的源代码。如果您无法访问它，那么不用说您将无法将其复制粘贴到您的 HTML 文件中。