Cloudflare Workers

Examples

这些示例将 wrangler.toml#node_compat 设置为 true，这使得 wrangler 显示警告：

[WARNING] Enabling node.js compatibility mode for built-ins and globals. This
is experimental and has serious tradeoffs.

但是我们可以安全地忽略警告（唯一使用的 Node.js shims 是健壮的）。但是，Node.js shims 会使 worker 代码增加约 200KB-300KB，考虑到 1MB 的限制，这非常重要。消除对 Node.js shims 的需求的工作正在进行中，请参阅：#445

Wrangler

Cloudflare Workers 要求我们将整个 worker 代码打包到一个文件中

Cloudflare 使用术语“worker code”来表示在其 edge 基础设施上运行的服务器代码。

建议使用Wrangler v2（v2 底层使用esbuild）

vite-plugin-cloudflare

我们还可以使用 vite-plugin-cloudflare，它使我们能够简单地使用 $ vite build 和 $ vite dev 来构建和开发我们的 worker code（包括 HMR 支持！）

Example: GitHub > Aslemammad/vite-plugin-cloudflare > examples/vite-plugin-ssr/.

扩展 1MB 限制

我们的 worker 包大小不应超过 1MB，但是我们可以请求 100MB 及以上的大小：

Cloudflare Pages

我们还可以使用Cloudflare Pages 来部署我们的 vite-plugin-ssr 应用程序

为了部署我们的 SSR worker，我们使用 Cloudflare Pages Function

⚠ Cloudflare Pages Functions 处于beta阶段.

Example：

另请参考：

开发

为了获得更快的开发体验，我们建议尽可能使用 Vite 的开发服务器而不是 wrangler（或 Express.js 服务）

This means: 这表示：

  • 在开发我们的应用程序时，我们完全跳过了 wrangler / Cloudflare Workers。

  • 我们使用 wrangler dev 来预览我们的 worker。

  • 我们使用 wrangler publish 将我们的 worker 部署到 Cloudflare Workers。

    请参阅示例的设置。

统一 fetch()

当使用 Node.js 进行开发并在生产环境中使用 Cloudflare Workers 时，我们可能需要一个可以在两种环境中工作的 fetch() 函数

但是 node-fetch 或 cross-fetch 等库通常不适用于 Cloudflare Workers

我们可以做的是在 pageContext.fetch 中定义一个适用于所有环境的 fetch 函数。诀窍是在 renderPage(pageContextInit) 处向 pageContextInit 添加不同的 fetch() 实现

Example： /examples/cloudflare-workers-react-full#universal-fetch