跳转到内容
搜索文档

编程式配置

最后更新 查看 MarkdownAgent 设置

使用 Cloudflare Vite 插件时,Wrangler 配置文件是可选的。没有配置文件时,插件使用默认值。可以使用 config 选项以编程方式自定义 Worker 配置。当 Cloudflare 插件在另一个插件或框架内运行时,这很有用。

默认配置

没有配置文件时,插件为仅包含资源的 Worker 生成合理的默认值。name 来自 package.json 或项目目录名称。compatibility_date 使用已安装 Miniflare 版本支持的最新日期。

config 选项

config 选项提供三种以编程方式配置 Worker 的方法。可以设置 Wrangler 配置文件 中的任何属性,但某些选项会被忽略或由 Vite 等效项替代

配置对象

config 设置为对象,以提供与默认值和 Wrangler 配置文件设置合并的值:

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

export default defineConfig({
	plugins: [
		cloudflare({
			config: {
				compatibility_date: "2025-01-01",
				vars: {
					API_URL: "https://api.example.com",
				},
			},
		}),
	],
});

这些值与 Wrangler 配置文件值合并,config 值优先。

动态配置函数

当配置取决于现有配置值或外部数据,或需要计算或条件设置值时,使用函数:

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

export default defineConfig({
	plugins: [
		cloudflare({
			config: (userConfig) => ({
				vars: {
					WORKER_NAME: userConfig.name,
					BUILD_TIME: new Date().toISOString(),
				},
			}),
		}),
	],
});

该函数接收当前配置(默认值或加载的配置文件)。返回包含要合并值的对象。

就地编辑

config 函数可以直接修改配置对象,而不是返回覆盖值。这对于删除属性或移除数组项很有用:

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

export default defineConfig({
	plugins: [
		cloudflare({
			config: (userConfig) => {
				// Replace all existing compatibility flags
				userConfig.compatibility_flags = ["nodejs_compat"];
			},
		}),
	],
});

辅助 Worker

辅助 Worker 也支持 config 选项,无需配置文件即可实现多 Worker 架构。

auxiliaryWorkers 数组内的 config 中使用 config 定义无配置文件的辅助 Worker:

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

export default defineConfig({
	plugins: [
		cloudflare({
			config: {
				name: "entry-worker",
				main: "./src/entry.ts",
				compatibility_date: "2025-01-01",
				services: [{ binding: "API", service: "api-worker" }],
			},
			auxiliaryWorkers: [
				{
					config: {
						name: "api-worker",
						main: "./src/api.ts",
						compatibility_date: "2025-01-01",
					},
				},
			],
		}),
	],
});

配置覆盖

将配置文件与 config 结合以覆盖特定值:

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

export default defineConfig({
	plugins: [
		cloudflare({
			configPath: "./wrangler.jsonc",
			auxiliaryWorkers: [
				{
					configPath: "./workers/api/wrangler.jsonc",
					config: {
						vars: {
							ENDPOINT: "https://api.example.com/v2",
						},
					},
				},
			],
		}),
	],
});

配置继承

辅助 Worker 在 config 函数的第二个参数中接收已解析的入口 Worker 配置。这使得在辅助 Worker 中从入口 Worker 继承配置变得简单。

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

export default defineConfig({
	plugins: [
		cloudflare({
			auxiliaryWorkers: [
				{
					config: (_, { entryWorkerConfig }) => ({
						name: "auxiliary-worker",
						main: "./src/auxiliary-worker.ts",
						// Inherit compatibility settings from entry Worker
						compatibility_date: entryWorkerConfig.compatibility_date,
						compatibility_flags: entryWorkerConfig.compatibility_flags,
					}),
				},
			],
		}),
	],
});

配置合并行为

config 选项使用 defu 合并配置对象。

  • 对象属性递归合并
  • 数组连接(config 值在前,现有值在后)
  • config 中的原始值覆盖现有值
  • config 中的 undefined 值不会覆盖现有值

这篇文档对您有帮助吗?