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

Question

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

单个 HTML 文件输出是我项目的核心需求。我使用的是建立一个SvelteKit SPAssr: false和@sveltejs/adapter-static与fallback: 'index.html'配置。

我以前使用https://github.com/richardtallent/vite-plugin-singlefile通过简单的vite+svelte设置来完成此操作- 这非常有效。不过，我无法添加vite-plugin-singlefile到svelte.config.js维生素E的插件在我SvelteKit项目。

这是我尝试过的 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 输出，我需要转换为内联脚本。
• 这里提到的解决方案不起作用：从 Svelte 项目输出单个 HTML 文件
• https://github.com/jonathantneal/posthtml-inline-assets - 不支持esm 模块内部<script type="module">的动态import()调用。

任何想法都会有所帮助！

Answer 1

这是一个技术含量较低的解决方案，但您可以分别用样式和脚本标记替换 CSS 和 JS 文件的链接。然后将这些文件的内容复制粘贴到标签之间。

只要你将 style/script 标签放在之前链接 CSS 和 JS 的同一位置，就不会有任何大问题（尽管任何带有defer的 JS 脚本都需要进入一个事件处理程序，只显示运行该脚本的内容（页面已完全加载）。

当然，您使用的是导入的文件，因此这完全取决于您是否能够访问其源代码。如果您无法访问它，那么不用说您将无法将其复制粘贴到 HTML 文件中。