基于 Vercel Toolbar 与 Feature Flags 的 SvelteKit 功能开关模板实战指南【免费下载链接】examplesEnjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.项目地址: https://gitcode.com/GitHub_Trending/examples1/examplesVercel Toolbar 与 Feature Flags 的 SvelteKit Starter 模板向开发者展示如何在 SvelteKit 应用中通过vercel/flags定义、读取并动态覆盖功能开关Feature Flag同时借助 Vercel Toolbar 在本地与生产环境可视化地调试这些开关。读完本文你将掌握FLAGS_SECRET加密密钥的生成与配置、flags 的定义与decide判定逻辑、服务端createHandle与load的数据链路以及从一键部署到本地pnpm dev调试的完整落地流程。模板概览它解决什么问题在真实的业务迭代中新功能往往需要小流量灰度或随时回滚Feature Flags功能开关因此成为现代 Web 应用的标配。Vercel 提供的 Feature Flags 服务与 Vercel Toolbar 结合后开发者可以直接在页面调试浮层里开关某个功能而无需改动代码、重新部署。本仓库中的 toolbar/toolbar-feature-flags-sveltekit 正是为此设计的极简 Starter一个 SvelteKit 页面标题颜色由一个名为svelteColor的布尔型开关控制——开关打开时标题显示 Svelte 品牌标志性的橙红色#ff3e00关闭时恢复默认颜色。整个示例围绕这条标题变色的开关链路把 Feature Flags 的完整集成方式压缩到几个文件里非常适合作为接入的起点。从模板元信息README.md可以看出该项目定位为 Starter起始模板框架为 Svelte不使用额外 CSS 框架。仓库中还提供了同类能力的其他 Toolbar 集成模板如toolbar-launchdarkly、toolbar-optimizely、toolbar-split、toolbar-statsig本模板是其中不依赖第三方服务、开箱即用的基础版本。两种方式获取模板方式一一键部署到 VercelREADME 提供了 Vercel 的 One-Click Deploy 入口点击部署按钮后Vercel 会自动克隆本模板并引导你创建项目同时要求配置FLAGS_SECRET环境变量。这是最快看到运行效果的路径适合先跑通链路再深入阅读源码。方式二克隆到本地开发使用degit把模板下载到本地目录npx degitlatest https://github.com/vercel/examples/toolbar/toolbar-feature-flags-sveltekit my-project接着安装依赖。项目使用 pnpm 作为包管理器仓库中同时存在 pnpm-lock.yamlpnpm install然后在 Vercel Dashboard 中新建项目并在项目设置里创建名为FLAGS_SECRET的环境变量。本地开发时通过vercel link把当前目录关联到刚创建的项目再用vercel env pull拉取环境变量到本地。关键前置FLAGS_SECRET 加密密钥FLAGS_SECRET是本模板唯一必须配置的环境变量它在 src/hooks.server.ts 中被消费import { createHandle } from vercel/flags/sveltekit import { FLAGS_SECRET } from $env/static/private import * as flags from $lib/flags export const handle createHandle({ secret: FLAGS_SECRET, flags })这里有两层作用作为加密密钥Feature Flags 的值需要经过加密签名后才能安全地传给浏览器端的 Vercel Toolbar避免客户端篡改开关值FLAGS_SECRET就是这把签名密钥。注册全部 flagscreateHandle接收$lib/flags中导出的所有 flag 定义将它们统一接入 SvelteKit 的handle钩子使服务端 load 函数可以便捷地查询这些开关。密钥有严格的长度要求必须是32 字节随机数经 base64 编码的结果base64url 格式长度不满足要求时无法作为加密密钥正常工作。README 给出了用 Node 一键生成的命令node -e console.log(crypto.randomBytes(32).toString(base64url))将输出的一段随机字符串复制为FLAGS_SECRET的值即可。注意该命令依赖 Node 内置的crypto模块无需安装任何额外包。源码链路一个 Flag 从定义到生效的完整旅程理解了环境变量再看这条模板的核心——svelteColor开关的完整数据链路。仓库中的源码非常精简恰好覆盖了定义 → 接入 → 读取 → 渲染四个环节。第一步定义 Flagsrc/lib/flags.tssrc/lib/flags.ts 定义了唯一的开关import { flag } from vercel/flags/sveltekit export const svelteColor flagboolean({ key: svelteColor, description: Use the Svelte color for the headline, // optional origin: https://example.com/#svelteColor, // optional options: [{ value: true }, { value: false }], // optional // can be async and has access to the event decide(event) { // Very simple example to show how to use the URL to determine the flag. // In real live you would probably query an external source such as // Vercel Global Config (https://vercel.com/docs/storage/edge-config) return event.url.searchParams.has(svelteColor) }, })各配置项的含义与用途key开关的唯一标识在 Toolbar 调试面板中以此名称展示description可选人类可读的说明文字帮助团队成员理解该开关的作用origin可选开关的出处或管理入口链接options可选声明该开关可取的值集合这里即布尔值的true/falsedecide(event)核心判定函数。它接收当前请求事件event返回该开关在此次请求下的取值。event.url来自请求 URL因此可以通过查询参数决定开关状态。模板中的decide逻辑非常直白URL 查询字符串里带有svelteColor参数即返回true否则返回false。注释同时点明了真实项目的做法——通常这里会去查询外部数据源例如 Vercel Global Config 之类的边缘配置存储从而把开关决策下沉到服务端、甚至边缘网络。decide被设计为支持异步函数便于接入任何远程判定服务。第二步接入 SvelteKit 服务端src/hooks.server.ts前面提到的 src/hooks.server.ts 通过createHandle把 flags 与 Vercel Toolbar 打通Toolbar 发出的覆盖指令会经由此处校验签名并临时改写判定结果同时服务端的 load 函数也能方便地查询开关值。这正是用 Toolbar 可视化覆盖开关得以实现的关键接线点。第三步在服务端 load 中读取src/routes/page.server.ts页面数据通过 SvelteKit 的服务端 load 函数获取开关值import { svelteColor } from $lib/flags export async function load() { return { // Requests the feature flag and returns its value svelteColor: await svelteColor(), } }flag定义本身是一个可调用对象await svelteColor()会触发decide判定并返回布尔结果随后作为data.svelteColor传给页面组件。这种服务端判定、客户端消费的模式确保开关逻辑不会泄漏到浏览器端也天然支持 SSR。第四步在页面中消费src/routes/page.sveltesrc/routes/page.svelte 接收 load 返回的数据并据此渲染script langts let { data } $props() /script h1 class:svelte{data.svelteColor}SvelteKit Vercel Feature Flags/h1class:svelte{data.svelteColor}是 Svelte 5 的类名指令语法当data.svelteColor为true时给标题添加svelte类对应样式中将标题颜色设置为 Svelte 品牌色--svelte: #ff3e00为false时则使用默认前景色。页面下方还提供了两个演示链接div>import { sveltekit } from sveltejs/kit/vite import { vercelToolbar } from vercel/toolbar/plugins/vite import { defineConfig } from vite export default defineConfig({ plugins: [sveltekit(), vercelToolbar()], })而在布局组件 src/routes/layout.svelte 中通过生命周期钩子完成客户端挂载import { mountVercelToolbar } from vercel/toolbar/vite import { onMount } from svelte // This always shows the toolbar in production. In your project, you probably // want to show it only under certain conditions. onMount(() mountVercelToolbar())mountVercelToolbar()会在页面加载后注入 Toolbar 调试浮层。源码注释特意提醒模板为便于演示在生产环境也总是显示 Toolbar真实项目应当按条件如仅本地、预览环境或特定白名单用户展示。依赖与运行环境一览从 package.json 可以看清模板的技术栈与版本约束依赖版本区间作用sveltejs/kit^2.5.27SvelteKit 框架核心svelte^5.0.0Svelte 5 运行时$props()等新语法vercel/flags2.6.0Feature Flags 的 SvelteKit 集成提供flag、createHandlevercel/toolbar^0.1.15Vercel Toolbar 客户端与 Vite 插件sveltejs/adapter-vercel^5.5.0Vercel 平台适配器vite^5.4.4构建工具常用脚本命令pnpm dev # 启动开发服务器 pnpm build # 生产构建经 adapter-vercel 输出 pnpm preview # 本地预览生产构建 pnpm check # svelte-kit sync 与 svelte-check 类型检查部署适配器配置在 svelte.config.js 中使用sveltejs/adapter-vercel输出到 Vercel 平台。本地开发与部署到云端完整流程如下# 1. 拉取模板 npx degitlatest https://github.com/vercel/examples/toolbar/toolbar-feature-flags-sveltekit my-project cd my-project # 2. 安装依赖 pnpm install # 3. 生成 FLAGS_SECRET 并配置到 Vercel 项目环境变量 node -e console.log(crypto.randomBytes(32).toString(base64url)) # 4. 关联 Vercel 项目并拉取环境变量 vercel link vercel env pull # 5. 启动本地开发 pnpm dev启动后访问本地地址即可看到标题默认颜色访问/?svelteColor时标题变为橙红色——开关通过 URL 参数生效。当项目已关联 Vercel 且配置了FLAGS_SECRET时浏览器右下角会出现 Vercel Toolbar 浮层你可以直接在浮层中覆盖svelteColor的值进行调试无需修改 URL。开发完成后直接通过 Vercel 部署或vercel deploy即可上线。由于模板使用了sveltejs/adapter-vercel构建产物与运行环境包括 Edge/Serverless 函数中执行decide的能力均已为 Vercel 平台优化。小结从模板走向真实项目这个模板的可贵之处在于把 Feature Flags 的最小闭环压缩到了极致一个decide判定、一个createHandle接线、一个 load 读取、一行类名渲染。迁移到真实项目时你只需要在src/lib/flags.ts中按相同模式声明更多开关将decide从读 URL 参数替换为查询真实数据源如 Vercel Global Config即可获得边缘侧的低延迟判定按需调整 src/routes/layout.svelte 中的 Toolbar 挂载条件避免生产环境对普通用户暴露调试浮层。配套的源码入口与说明文档均在本仓库的 toolbar/toolbar-feature-flags-sveltekit 目录下读者可结合源码逐一验证本文描述的数据链路。【免费下载链接】examplesEnjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.项目地址: https://gitcode.com/GitHub_Trending/examples1/examples创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 基于 Vercel Toolbar 与 Feature Flags 的 SvelteKit 功能开关模板实战指南
基于 Vercel Toolbar 与 Feature Flags 的 SvelteKit 功能开关模板实战指南【免费下载链接】examplesEnjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.项目地址: https://gitcode.com/GitHub_Trending/examples1/examplesVercel Toolbar 与 Feature Flags 的 SvelteKit Starter 模板向开发者展示如何在 SvelteKit 应用中通过vercel/flags定义、读取并动态覆盖功能开关Feature Flag同时借助 Vercel Toolbar 在本地与生产环境可视化地调试这些开关。读完本文你将掌握FLAGS_SECRET加密密钥的生成与配置、flags 的定义与decide判定逻辑、服务端createHandle与load的数据链路以及从一键部署到本地pnpm dev调试的完整落地流程。模板概览它解决什么问题在真实的业务迭代中新功能往往需要小流量灰度或随时回滚Feature Flags功能开关因此成为现代 Web 应用的标配。Vercel 提供的 Feature Flags 服务与 Vercel Toolbar 结合后开发者可以直接在页面调试浮层里开关某个功能而无需改动代码、重新部署。本仓库中的 toolbar/toolbar-feature-flags-sveltekit 正是为此设计的极简 Starter一个 SvelteKit 页面标题颜色由一个名为svelteColor的布尔型开关控制——开关打开时标题显示 Svelte 品牌标志性的橙红色#ff3e00关闭时恢复默认颜色。整个示例围绕这条标题变色的开关链路把 Feature Flags 的完整集成方式压缩到几个文件里非常适合作为接入的起点。从模板元信息README.md可以看出该项目定位为 Starter起始模板框架为 Svelte不使用额外 CSS 框架。仓库中还提供了同类能力的其他 Toolbar 集成模板如toolbar-launchdarkly、toolbar-optimizely、toolbar-split、toolbar-statsig本模板是其中不依赖第三方服务、开箱即用的基础版本。两种方式获取模板方式一一键部署到 VercelREADME 提供了 Vercel 的 One-Click Deploy 入口点击部署按钮后Vercel 会自动克隆本模板并引导你创建项目同时要求配置FLAGS_SECRET环境变量。这是最快看到运行效果的路径适合先跑通链路再深入阅读源码。方式二克隆到本地开发使用degit把模板下载到本地目录npx degitlatest https://github.com/vercel/examples/toolbar/toolbar-feature-flags-sveltekit my-project接着安装依赖。项目使用 pnpm 作为包管理器仓库中同时存在 pnpm-lock.yamlpnpm install然后在 Vercel Dashboard 中新建项目并在项目设置里创建名为FLAGS_SECRET的环境变量。本地开发时通过vercel link把当前目录关联到刚创建的项目再用vercel env pull拉取环境变量到本地。关键前置FLAGS_SECRET 加密密钥FLAGS_SECRET是本模板唯一必须配置的环境变量它在 src/hooks.server.ts 中被消费import { createHandle } from vercel/flags/sveltekit import { FLAGS_SECRET } from $env/static/private import * as flags from $lib/flags export const handle createHandle({ secret: FLAGS_SECRET, flags })这里有两层作用作为加密密钥Feature Flags 的值需要经过加密签名后才能安全地传给浏览器端的 Vercel Toolbar避免客户端篡改开关值FLAGS_SECRET就是这把签名密钥。注册全部 flagscreateHandle接收$lib/flags中导出的所有 flag 定义将它们统一接入 SvelteKit 的handle钩子使服务端 load 函数可以便捷地查询这些开关。密钥有严格的长度要求必须是32 字节随机数经 base64 编码的结果base64url 格式长度不满足要求时无法作为加密密钥正常工作。README 给出了用 Node 一键生成的命令node -e console.log(crypto.randomBytes(32).toString(base64url))将输出的一段随机字符串复制为FLAGS_SECRET的值即可。注意该命令依赖 Node 内置的crypto模块无需安装任何额外包。源码链路一个 Flag 从定义到生效的完整旅程理解了环境变量再看这条模板的核心——svelteColor开关的完整数据链路。仓库中的源码非常精简恰好覆盖了定义 → 接入 → 读取 → 渲染四个环节。第一步定义 Flagsrc/lib/flags.tssrc/lib/flags.ts 定义了唯一的开关import { flag } from vercel/flags/sveltekit export const svelteColor flagboolean({ key: svelteColor, description: Use the Svelte color for the headline, // optional origin: https://example.com/#svelteColor, // optional options: [{ value: true }, { value: false }], // optional // can be async and has access to the event decide(event) { // Very simple example to show how to use the URL to determine the flag. // In real live you would probably query an external source such as // Vercel Global Config (https://vercel.com/docs/storage/edge-config) return event.url.searchParams.has(svelteColor) }, })各配置项的含义与用途key开关的唯一标识在 Toolbar 调试面板中以此名称展示description可选人类可读的说明文字帮助团队成员理解该开关的作用origin可选开关的出处或管理入口链接options可选声明该开关可取的值集合这里即布尔值的true/falsedecide(event)核心判定函数。它接收当前请求事件event返回该开关在此次请求下的取值。event.url来自请求 URL因此可以通过查询参数决定开关状态。模板中的decide逻辑非常直白URL 查询字符串里带有svelteColor参数即返回true否则返回false。注释同时点明了真实项目的做法——通常这里会去查询外部数据源例如 Vercel Global Config 之类的边缘配置存储从而把开关决策下沉到服务端、甚至边缘网络。decide被设计为支持异步函数便于接入任何远程判定服务。第二步接入 SvelteKit 服务端src/hooks.server.ts前面提到的 src/hooks.server.ts 通过createHandle把 flags 与 Vercel Toolbar 打通Toolbar 发出的覆盖指令会经由此处校验签名并临时改写判定结果同时服务端的 load 函数也能方便地查询开关值。这正是用 Toolbar 可视化覆盖开关得以实现的关键接线点。第三步在服务端 load 中读取src/routes/page.server.ts页面数据通过 SvelteKit 的服务端 load 函数获取开关值import { svelteColor } from $lib/flags export async function load() { return { // Requests the feature flag and returns its value svelteColor: await svelteColor(), } }flag定义本身是一个可调用对象await svelteColor()会触发decide判定并返回布尔结果随后作为data.svelteColor传给页面组件。这种服务端判定、客户端消费的模式确保开关逻辑不会泄漏到浏览器端也天然支持 SSR。第四步在页面中消费src/routes/page.sveltesrc/routes/page.svelte 接收 load 返回的数据并据此渲染script langts let { data } $props() /script h1 class:svelte{data.svelteColor}SvelteKit Vercel Feature Flags/h1class:svelte{data.svelteColor}是 Svelte 5 的类名指令语法当data.svelteColor为true时给标题添加svelte类对应样式中将标题颜色设置为 Svelte 品牌色--svelte: #ff3e00为false时则使用默认前景色。页面下方还提供了两个演示链接div>import { sveltekit } from sveltejs/kit/vite import { vercelToolbar } from vercel/toolbar/plugins/vite import { defineConfig } from vite export default defineConfig({ plugins: [sveltekit(), vercelToolbar()], })而在布局组件 src/routes/layout.svelte 中通过生命周期钩子完成客户端挂载import { mountVercelToolbar } from vercel/toolbar/vite import { onMount } from svelte // This always shows the toolbar in production. In your project, you probably // want to show it only under certain conditions. onMount(() mountVercelToolbar())mountVercelToolbar()会在页面加载后注入 Toolbar 调试浮层。源码注释特意提醒模板为便于演示在生产环境也总是显示 Toolbar真实项目应当按条件如仅本地、预览环境或特定白名单用户展示。依赖与运行环境一览从 package.json 可以看清模板的技术栈与版本约束依赖版本区间作用sveltejs/kit^2.5.27SvelteKit 框架核心svelte^5.0.0Svelte 5 运行时$props()等新语法vercel/flags2.6.0Feature Flags 的 SvelteKit 集成提供flag、createHandlevercel/toolbar^0.1.15Vercel Toolbar 客户端与 Vite 插件sveltejs/adapter-vercel^5.5.0Vercel 平台适配器vite^5.4.4构建工具常用脚本命令pnpm dev # 启动开发服务器 pnpm build # 生产构建经 adapter-vercel 输出 pnpm preview # 本地预览生产构建 pnpm check # svelte-kit sync 与 svelte-check 类型检查部署适配器配置在 svelte.config.js 中使用sveltejs/adapter-vercel输出到 Vercel 平台。本地开发与部署到云端完整流程如下# 1. 拉取模板 npx degitlatest https://github.com/vercel/examples/toolbar/toolbar-feature-flags-sveltekit my-project cd my-project # 2. 安装依赖 pnpm install # 3. 生成 FLAGS_SECRET 并配置到 Vercel 项目环境变量 node -e console.log(crypto.randomBytes(32).toString(base64url)) # 4. 关联 Vercel 项目并拉取环境变量 vercel link vercel env pull # 5. 启动本地开发 pnpm dev启动后访问本地地址即可看到标题默认颜色访问/?svelteColor时标题变为橙红色——开关通过 URL 参数生效。当项目已关联 Vercel 且配置了FLAGS_SECRET时浏览器右下角会出现 Vercel Toolbar 浮层你可以直接在浮层中覆盖svelteColor的值进行调试无需修改 URL。开发完成后直接通过 Vercel 部署或vercel deploy即可上线。由于模板使用了sveltejs/adapter-vercel构建产物与运行环境包括 Edge/Serverless 函数中执行decide的能力均已为 Vercel 平台优化。小结从模板走向真实项目这个模板的可贵之处在于把 Feature Flags 的最小闭环压缩到了极致一个decide判定、一个createHandle接线、一个 load 读取、一行类名渲染。迁移到真实项目时你只需要在src/lib/flags.ts中按相同模式声明更多开关将decide从读 URL 参数替换为查询真实数据源如 Vercel Global Config即可获得边缘侧的低延迟判定按需调整 src/routes/layout.svelte 中的 Toolbar 挂载条件避免生产环境对普通用户暴露调试浮层。配套的源码入口与说明文档均在本仓库的 toolbar/toolbar-feature-flags-sveltekit 目录下读者可结合源码逐一验证本文描述的数据链路。【免费下载链接】examplesEnjoy our curated collection of examples and solutions. Use these patterns to build your own robust and scalable applications.项目地址: https://gitcode.com/GitHub_Trending/examples1/examples创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考