如何在本地运行 SvelteKit 和 Cloudflare Page？

Question

我正在尝试使用 SvelteKit 和 Cloudflare Pages 创建一个新应用程序，但我正在努力以正确的方式在本地运行该应用程序。目前，为了让应用程序在本地运行，我在 2 个不同的终端中运行 2 个脚本：

1. vite build --watch

   • 这会在

     cloudflare

     目录中创建

     .svelte-kit

     目录

   • vite dev

     似乎没有创建

     cloudflare

     目录，所以我使用了

     vite build

2. wrangler pages dev .svelte-kit/cloudflare --live-reload

   • 这将启动应用程序

上述方法有效，即它按预期启动应用程序。问题是，我对代码所做的任何更改都会在 3-4 秒后在浏览器选项卡中可见，从 DX 的角度来看，这远远不能让人享受。理想情况下，在本地运行时，任何代码更改都应该在 1 秒左右的时间内在浏览器选项卡中可见。

这是我第一次修改 SvelteKit 和 Cloudflare Pages，所以我确信我错过了一些东西。因此，问题是：应该如何“以正确的方式”在本地运行 SvelteKit 和 Cloudflare Pages 应用程序？ “正确的方式”意味着我可以在 1 秒左右看到代码更改的效果，并且我可以使用

wrangler

或

miniflare

之类的东西在本地运行应用程序，以使本地环境尽可能类似于可能是量产版。

P.s.：我检查过诸如https://developers.cloudflare.com/pages/framework-guides/deploy-a-svelte-site/和https://www.npmjs.com/package/@之类的文档sveltejs/adapter-cloudflare

readme.md

但他们主要关注如何在生产中运行应用程序
P.p.s：我相信可以使用类似并发之类的东西将这两个脚本合并为一个脚本，但目前我的重点是在代码更改时获得快速反馈
P.p.p.s.：捆绑和修改 javascript 模块本身还不是我的强项之一，所以如果您有任何有用的文章，我们非常欢迎

Answer 1

我建议使用服务器挂钩来设置

platform

，然后使用 Miniflare v3 API 在本地模拟 Cloudflare 绑定。然后你可以使用标准的 Sveltekit/vite 命令在本地运行，例如

npm run dev

。

这是一个模板项目，您可以将其用作支持 D1 和 KV 绑定的启动器，以及 env 通常会获取的 cf 属性。 它还使用与 wrangler 相同的文件位置，因此您可以使用 wrangler 中的常规

--local

命令来处理迁移等。

参见https://github.com/sdarnell/cf-svelte/

它使用 hooks.server.ts 仅在开发中动态加载 miniflare：

// /src/hooks.server.ts
import { dev } from '$app/environment';
import type { Handle } from '@sveltejs/kit';

export const handle = (async ({ event, resolve }) => {
    if (dev && !event.platform) {
        const mf = await import('./lib/server/miniflare');
        event.platform = await mf.setupPlatform();
    }
    return resolve(event);
}) satisfies Handle;

然后在 miniflare.ts 帮助程序文件中解析 wrangler.toml 文件，然后使用相应的绑定创建一个 Miniflare 实例：

...
    const kvs = Object.fromEntries((toml.kv_namespaces || []).map(d => [d.binding, d.id]));
    const dbs = Object.fromEntries((toml.d1_databases || []).map(d => [d.binding, d.database_id]));

    const root = '.wrangler/state/v3';
    const mf = new Miniflare({
        log: new Log(LogLevel.WARN),
        modules: true,
        script: '',
        d1Databases: dbs,
        kvNamespaces: kvs,
        kvPersist: `${root}/kv`,
        d1Persist: `${root}/d1`,
        compatibilityDate: toml.compatibility_date,
    });

    platform = {
        env: await mf.getBindings(),
        context: {},
        caches: {},
        cf: cachedCfDotJson,
    } as App.Platform;
...

更新： cf-svelte 项目已更新为导入 wrangler，其作用与上述相同，但现在由 Cloudflare 支持。这消除了 miniflare.ts 文件。

更新：请参阅 Cloudflare 博客文章，详细解释了新方法：https://blog.cloudflare.com/blazing-fast-development-with-full-stack-frameworks-and-cloudflare

Answer 2

有同样的要求，快速谷歌将我带到这里，但没有帮助；然而，事实证明可以在当前的 Cloudflare 文档中找到解决方案：

https://developers.cloudflare.com/pages/platform/functions/local-development/

总而言之，运行以下命令应该可以解决问题：

npx wrangler pages dev -- npm run dev