← Dynamic Workers / dynamic-workers / examples

Dynamic Workers Playground

Vyzkoušejte Dynamic Workers playground ↗ k psaní nebo importu kódu z GitHubu, jeho sbalení za běhu, spuštění v Dynamic Workeru a zobrazení logů v reálném čase.

• Bundling za běhu: Používá @cloudflare/worker-bundler ↗ k vyřešení závislostí npm a kompilaci TypeScriptu uvnitř Workeru
• Dynamické spouštění: Načte zabalený kód do izolovaného Dynamic Workeru
• Ukládání do mezipaměti: Znovu použije dříve zabalené Workery, pokud se zdrojový kód nezměnil
• Výstup v reálném čase: Streamuje tělo odpovědi, logy konzole, dobu spuštění a metadata balíčku zpět klientovi

Playground využívá @cloudflare/worker-bundler ↗ ke kompilaci TypeScriptu, vyřešení závislostí npm a vytvoření modulů, které dokáže Worker Loader spustit.

Předání zdrojových souborů a package.json na createWorker(), která vyřeší závislosti a vrátí zabalené moduly připravené k načtení jako Dynamic Worker:

import { createWorker } from "@cloudflare/worker-bundler";

const { mainModule, modules, warnings } = await createWorker({
	files: {
		"src/index.ts": userCode,
		"package.json": JSON.stringify({
			dependencies: { hono: "^4.0.0" },
		}),
	},
	bundle: true,
	minify: false,
});

import { createWorker } from "@cloudflare/worker-bundler";

const { mainModule, modules, warnings } = await createWorker({
	files: {
		"src/index.ts": userCode,
		"package.json": JSON.stringify({
			dependencies: { hono: "^4.0.0" },
		}),
	},
	bundle: true,
	minify: false,
});

env.LOADER.load() vytvoří nový Dynamic Worker při každém volání. Abyste se vyhnuli opětovnému bundlování nezměněného kódu, použijte env.LOADER.get(id, callback) místo toho. Runtime při zásahu v cache vrátí existující Worker, při jejím minutí zavolá váš callback, aby nový vytvořil:

const worker = env.LOADER.get(workerId, async () => {
	// This callback only runs on cache miss
	const { mainModule, modules } = await createWorker({ files });

	return {
		mainModule,
		modules,
		compatibilityDate: "2026-05-01",
		tails: [contextExports.DynamicWorkerTail({ props: { workerId } })],
	};
});

const response = await worker.getEntrypoint().fetch(request);

const worker = env.LOADER.get(workerId, async () => {
	// This callback only runs on cache miss
	const { mainModule, modules } = await createWorker({ files });

	return {
		mainModule,
		modules,
		compatibilityDate: "2026-05-01",
		tails: [
			contextExports.DynamicWorkerTail({ props: { workerId } }),
		],
	};
});

const response = await worker.getEntrypoint().fetch(request);

V playgroundu si to můžete vyzkoušet v praxi: spusťte stejný Dynamic Worker dvakrát a druhý požadavek vrátí výsledek z cache s cold startem 0ms, protože fáze sestavení a načtení se úplně přeskočí.

Když v playgroundu spustíte kód, výstup konzole z Dynamic Workeru se v reálném čase streamuje zpět do prohlížeče. Pod kapotou to funguje prostřednictvím Tail Worker pipeline:

1. Tail Worker (DynamicWorkerTail) zachytí console.log výstup z Dynamic Workeru.
2. Logy se přeposílají do LogSession Durable Object.
3. Durable Object je streamuje klientovi přes WebSocket.

Chcete-li toto propojení nastavit, zahrňte Tail Worker do tails pole při vytváření Dynamic Workeru:

const worker = env.LOADER.get(workerId, async () => ({
	mainModule,
	modules,
	compatibilityDate: "2026-05-01",
	tails: [contextExports.DynamicWorkerTail({ props: { workerId } })],
}));

const worker = env.LOADER.get(workerId, async () => ({
	mainModule,
	modules,
	compatibilityDate: "2026-05-01",
	tails: [contextExports.DynamicWorkerTail({ props: { workerId } })],
}));

Další informace o zachytávání a streamování logů z Dynamic Workers najdete v Observabilita u Dynamic Workers.

Naklonujte si repozitář a spusťte vývojový server:

npm install
npm run dev