Cloudflare 通过 Vite 插件和 React Router v7 支持增强了开发人员体验

Cloudflare 新的 Vite 插件（Vite plugin，v1.0）通过将Workers运行时直接集成到 Vite 构建过程中并添加了对 React Router v7的官方支持，简化了 Cloudflare Workers 上的 Web 应用程序开发。

该插件利用 Vite 6 的环境 API，允许开发人员在 workerd 运行时中运行 Worker 代码，协调开发和生产环境使其保持一致。高级前端工程师Michal Kuncio在 X 上写道：

通过利用 @vite_js 环境 API，你现在可以在开发服务器上使用 Cloudflare Workers 来模拟生产环境的行为。

此外，这种集成建立在 Vite 作为快速构建工具的流行基础之上。像 Shivani Sharma 这样的开发者在LinkedIn上赞扬了它，因为与Create React App相比，它具有更卓越的速度、打包和配置灵活性，以及高效的热模块替换和强大的插件生态系统。

Vite 6 引入了环境 API（Environment API），这是一个重大的架构变化，使 Vite 开发服务器能够与各种自定义的运行时环境交互，包括 worker。Cloudflare 与 Vite 团队合作开发了这个 API。

来源：Cloudflare博客文章

The plugin simplifies the Worker's configuration, giving developers more control.

Lastly, the plugin supports the complete Cloudflare Developer Platform, including KV, D1, Service Bindings, RPC, Durable Objects, Workflows, and Workers AI. Existing Workers can be adapted for Vite by installing the @cloudflare/vite-plugin dependency and adding a Vite configuration.

Cloudflare Vite 插件支持使用 React、Vue 和 Svelte 等框架构建的单页应用程序（SPA）。开发人员可以使用 create- Cloudflare CLI创建新的 React SPA，该 CLI 处理 create-vite 并配置 Cloudflare Vite 插件。现有的 Vite SPA 项目可以通过添加 @cloudflare/vite-plugin 依赖项和 wrangler.jsonc 配置文件进行更新。

该插件将 Vite 开发服务器与 Workers Assets 集成在一起，用于前端应用程序。此外，该插件简化了具有 Worker 后端的应用程序的开发和部署工作流程。Vite 开发服务器在 Cloudflare Workers 运行时中运行 Worker。开发人员可以修改 Worker 代码（例如，在 api/index.ts 中），并在不丢失 UI 状态的情况下实时查看更改。该插件还简化了构建和部署过程：vite build 输出客户端和服务器代码，vite preview 允许在 Workers 运行时中预览构建，而 wrangler 直接部署应用程序。

Cloudflare Vite 插件也支持React Router v7。开发人员可以使用 create-cloudflare CLI 创建新的 React Router 应用程序。专注于 React 生态系统的软件工程师 Ardizanki 在推特上写道：

React Router 是 React 18 到 React 19 之间的最佳桥梁。你可以将其作为一个完整的框架使用，也可以作为库集成到你自己的架构中。

该插件简化了 Worker 的配置，赋予开发人员更多的控制权。

最后，该插件支持完整的 Cloudflare 开发者平台，包括KV、D1、服务绑定、RPC、持久对象、工作流和Workers AI。现有的 Workers 可以通过安装 @cloudflare/vite-plugin 依赖并添加 Vite 配置来适应 Vite。

原文链接：

https://www.infoq.com/news/2025/05/cloudflare-vite-plugin/