我如何在sveltekit的开发和发布版本中拥有单独的功能?

例如,您可以定义一个替换常数 via Vite's define 或使用 static environment variables .

Via 定义 :

// vite.config.js
export default defineConfig((cfg) => ({
    define: {
        VITE_DEV: cfg.mode === 'development',
    },
    plugins: [sveltekit()]
}));

// src/app.d.ts
declare global {
    // To prevent type errors when using TS
    declare const VITE_DEV: boolean;

    namespace App {
        ...
    }
}

然后在一页上:

<script lang="ts">
    import DebugTools from './debug-tools.svelte';
</script>

<!-- [regular content] -->

{#if VITE_DEV}
    DEBUG MODE
    <DebugTools />
{/if}

通过环境变量:

<script lang="ts">
    import DebugTools from './debug-tools.svelte';
    import { PUBLIC_DEBUG_MODE } from '$env/static/public';
</script>

<!-- [regular content] -->

{#if PUBLIC_DEBUG_MODE == 'true'}
    DEBUG MODE
    <DebugTools />
{/if}

如何 PUBLIC_DEBUG_MODE 是否设置取决于操作系统。
例如,您可以直接在 package.json scripts 部分。
请注意,如果未定义变量,则构建将失败。

由于在这两种情况下,代码都是在构建过程中静态处理的,因此可以通过树抖动自动消除调试代码(包括调试组件导入)。

(对于Svelte 5,目前在这方面存在一个错误。)