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

Question

是否可以将 SvelteKit 项目构建为内联所有 JS 和 CSS 的单个输出 HTML 文件？是否可以将 SvelteKit 配置为支持这种输出格式，或者我是否需要使用外部构建工具？

单个 HTML 文件输出是我项目中的核心要求。我正在使用配置构建一个SvelteKit ssr: falseSPA 。@sveltejs/adapter-staticfallback: 'index.html'

我以前使用过https://github.com/richardtallent/vite-plugin-singlefile通过简单的vite+svelte设置来完成此操作 - 这效果很好。但是，我无法在我的 SvelteKit 项目中添加vite-plugin-singlefilevitesvelte.config.js插件。

这是我尝试过的 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 - 不支持esm 模块内部的<script type="module">动态调用。import()

任何想法都会有所帮助！