SvelteKit: How to output build as single HTML file with inlined JS and CSS?

在SvelteKit项目中，通常构建输出会生成多个文件，包括JavaScript、CSS以及HTML等。但如果您想将所有这些输出合并在一个单独的HTML文件中，这通常被称为单文件组件或内联样式和脚本。这样做可以简化部署，并在某些情况下加快加载速度，尤其是在网络条件较差的环境中。

要实现这一功能，您可以通过以下步骤操作：

1. 修改 svelte.config.js

首先，确保您的 svelte.config.js 文件中使用了合适的适配器，通常是用于静态站点的适配器，如 @sveltejs/adapter-static。

javascript
import adapter from '@sveltejs/adapter-static';

export default {
    kit: {
        adapter: adapter()
    }
};

2. 使用内联 JavaScript 和 CSS

在Svelte组件中，可以直接在<script>和<style>标签中编写JavaScript和CSS。这些代码默认是内联的，位于HTML文件中。

3. 自定义构建过程

要将所有内容合并到一个文件中，您可能需要自定义构建和打包过程。这通常涉及到修改Rollup或Vite的配置（SvelteKit 使用这两者中的一个作为其底层打包工具）。以下是一个可能的配置示例：

javascript
// svelte.config.js
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { defineConfig } from 'vite';

export default defineConfig({
    plugins: [svelte()],
    build: {
        rollupOptions: {
            output: {
                // 配置输出选项，以便只生成一个文件
                inlineDynamicImports: true,
                format: 'iife'
            }
        }
    }
});

4. 后处理

在构建过程完成后，您可能还需要一个后处理步骤来确保所有资源都被正确地内联。这可能包括使用Node.js脚本来读取构建输出，并将所有外部的JS和CSS文件内容内联到HTML文件中。

javascript
const fs = require('fs');
const path = require('path');

const htmlFilePath = 'path/to/your/output.html';
let htmlContent = fs.readFileSync(htmlFilePath, 'utf8');

// 提取并内联CSS和JavaScript
htmlContent = htmlContent.replace(/<link href="(.+?)" rel="stylesheet">/g, (match, href) => {
  const cssPath = path.join('path/to/build', href);
  const cssContent = fs.readFileSync(cssPath, 'utf8');
  return `<style>${cssContent}</style>`;
});

htmlContent = htmlContent.replace(/<script src="(.+?)"><\/script>/g, (match, src) => {
  const jsPath = path.join('path/to/build', src);
  const jsContent = fs.readFileSync(jsPath, 'utf8');
  return `<script>${jsContent}</script>`;
});

fs.writeFileSync(htmlFilePath, htmlContent);

小结

将SvelteKit的输出构建为单个HTML文件需要对构建过程有深入的定制。这包括配置Vite或Rollup，可能还要编写脚本来处理输出文件。这种方法有其用处，但也增加了复杂性，特别是在处理大型应用时。在实践中，这通常用于特定场景，例如生成简单的静态页面或需要极简部署的项目。