תיעוד 199

תחילת עבודה

הערה

המדריך הזה מדגים יצירת Worker עצמאי מאפס. אם ברצונך ליצור יישום חדש מתבנית מוכנה לשימוש, עיין במדריכי המסגרות TanStack Start, React Router, React או Vue.

#התחל עם `package.json` בסיסי

package.json

{
	"name": "cloudflare-vite-get-started",
	"private": true,
	"version": "0.0.0",
	"type": "module",
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"preview": "npm run build && vite preview",
		"deploy": "npm run build && wrangler deploy"
	}
}

הערה

ודא שאתה כולל את "type": "module" כדי להשתמש במודולי ES כברירת מחדל.

#התקנת התלויות

npm:

npm i -D vite @cloudflare/vite-plugin wrangler

yarn:

yarn add -D vite @cloudflare/vite-plugin wrangler

pnpm:

pnpm add -D vite @cloudflare/vite-plugin wrangler

bun:

bun add -d vite @cloudflare/vite-plugin wrangler

#יצירת קובץ התצורה של Vite והכללת התוסף של Cloudflare

vite.config.ts

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

export default defineConfig({
	plugins: [cloudflare({ viteEnvironment: { name: "worker" } })],
	environments: {
		worker: { build: { sourcemap: true } },
	},
});

תוסף Vite של Cloudflare מחפש wrangler.jsonc, wrangler.json או wrangler.toml בשורש היישום.

עיין בהפניה ל-API לאפשרויות תצורה.

#יצירת קובץ התצורה של ה-Worker

{
	"$schema": "./node_modules/wrangler/config-schema.json",
	"name": "cloudflare-vite-get-started",
	// Set this to today's date
	"compatibility_date": "2026-10-12",
	"main": "./src/index.ts",
	"upload_source_maps": true
}

"$schema" = "./node_modules/wrangler/config-schema.json"
name = "cloudflare-vite-get-started"
# Set this to today's date
compatibility_date = "2026-10-12"
main = "./src/index.ts"
upload_source_maps = true

שדה name מציין את שם ה-Worker. האפשרות viteEnvironment.name בתצורת Vite שלמעלה מגדירה את סביבת Vite של ה-Worker ל-worker. אם היא מושמטת, התוסף משתמש בשם ה-Worker (ראה Vite Environments למידע נוסף). שדה main מציין את קובץ הכניסה של קוד ה-Worker.

למידע נוסף על תצורת ה-Worker, ראה Configuration.

סביבת worker מייצרת מפות מקור עבור ה-Worker. סביבת הלקוח שומרת על הגדרות מפות המקור הקיימות שלה.

#יצירת קובץ הכניסה של ה-Worker

src/index.ts

export default {
	fetch() {
		return new Response(`Running in ${navigator.userAgent}!`);
	},
};

בקשה ל-Worker הזה תחזיר 'Running in Cloudflare-Workers!', וכך מדגימה שהקוד רץ בתוך סביבת הריצה של Workers.

#פיתוח, בנייה, תצוגה מקדימה ופריסה

אפשר עכשיו להפעיל את שרת הפיתוח של Vite (npm run dev), לבנות את היישום (npm run build), להציג בתצוגה מקדימה את היישום שנבנה (npm run preview), ולפרוס ל-Cloudflare (npm run deploy).