← Cloudflare Workers / workers / vite-plugin / reference

Vite Environments

Vite Environment API ↗, vydaná ve Vite 6, je klíčová funkce, která umožňuje pluginu Cloudflare Vite integrovat Vite přímo s runtime Workers. Jako koncový uživatel nemusíte rozumět všem detailům Environment API, ale je užitečné mít o něm alespoň základní představu.

Vite ve výchozím nastavení vytváří dvě prostředí: client a ssr. Aplikace pouze pro frontend používá client prostředí, zatímco full-stack aplikace vytvořená pomocí frameworku obvykle používá client prostředí pro kód frontendu a ssr prostředí pro vykreslování na straně serveru.

Ve výchozím nastavení se při přidání Workeru pomocí Cloudflare Vite pluginu vytvoří další prostředí. Jeho název vychází z názvu Workeru, přičemž všechny spojovníky se nahradí podtržítky. Tento název můžete použít k odkazování na prostředí ve vaší konfiguraci Vite, a použít tak konfiguraci specifickou pro dané prostředí.

V následujícím příkladu máme Worker nazvaný my-worker která je přiřazena k prostředí Vite s názvem my_worker. Pomocí konfigurace Vite nastavíme globální náhrady konstant pro toto prostředí:

{
	"$schema": "./node_modules/wrangler/config-schema.json",
	"name": "my-worker",
	// Set this to today's date
	"compatibility_date": "2026-08-28",
	"main": "./src/index.ts"
}

"$schema" = "./node_modules/wrangler/config-schema.json"
name = "my-worker"
# Set this to today's date
compatibility_date = "2026-08-28"
main = "./src/index.ts"

import { defineConfig } from "vite";
import { cloudflare } from "@cloudflare/vite-plugin";

export default defineConfig({
	environments: {
		my_worker: {
			define: {
				__APP_VERSION__: JSON.stringify("v1.0.0"),
			},
		},
	},
	plugins: [cloudflare()],
});

Více informací o možnostech konfigurace Vite najdete v Konfigurace Vite ↗.

Výchozí chování, kdy se jako název prostředí použije název Workeru, je vhodné v případě samostatného Workeru, například API, ke kterému přistupuje vaše frontendová aplikace, nebo pomocný Worker ke kterému se přistupuje prostřednictvím service bindings.

Pokud používáte Cloudflare Vite plugin s TanStack Start ↗ nebo React Router v8 ↗, pak se váš Worker používá pro server-side rendering a je úzce integrován s frameworkem. Aby to fungovalo, měli byste ho přiřadit k ssr prostředí nastavením viteEnvironment.name v konfiguraci pluginu.

import { defineConfig } from "vite";
import { cloudflare } from "@cloudflare/vite-plugin";
import { reactRouter } from "@react-router/dev/vite";

export default defineConfig({
	plugins: [cloudflare({ viteEnvironment: { name: "ssr" } }), reactRouter()],
});

Toto sloučí konfiguraci prostředí Workeru s SSR konfigurací frameworku a zajistí, že Worker bude součástí výstupu buildu frameworku.