Svelte 开发新利器:官方 CLI 工具 `sv` 全面指南

随着 Svelte 生态的不断演进,官方推出了全新的命令行工具(CLI)—— sv。如果你还在通过旧的方式搭建项目,或者在手动配置 Tailwind、ESLint 等工具时感到头大,那么 sv 将会是你的得力助手。

本文将带你全面了解 sv 是什么、它能做什么,以及如何高效地使用它来管理你的 Svelte 应用。

1. sv 是什么?

sv 是 Svelte 官方推出的全能命令行工具包,旨在简化 Svelte 应用程序的创建维护过程。

在过去,我们可能习惯用 npm create svelte@latest,但 sv 更进一步。它不仅是一个脚手架,更是一个伴随项目全生命周期的管理工具,集成了项目初始化、功能扩展、代码检查和版本迁移等多种功能。

2. 为什么要用它?(核心功能)

使用 sv 的主要优势在于标准化自动化。它的核心用途包括:

  • 极速初始化:快速生成 SvelteKit 项目结构(支持从模板或在线 Playground 导入)。
  • 一键扩展(Add-ons):这是最杀手级的功能。通过一条命令即可自动配置 Tailwind CSS、Drizzle ORM、Playwright 等流行工具,无需手动修改一堆配置文件。
  • 代码质量检查:内置类型检查、未使用的 CSS 检查和可访问性(A11y)提示。
  • 平滑迁移:帮助旧项目升级到 Svelte 5 或 SvelteKit 2,甚至自动化处理代码语法的迁移(如 Runes)。

3. 怎么用?实战教程

3.1 运行方式

你通常不需要全局安装它,直接使用包管理器运行即可。

如果你使用 npm:

npx sv <command>

如果你使用其他包管理器:

  • pnpm: pnpx sv <command>pnpm dlx sv <command>
  • Bun: bunx sv <command>
  • Yarn: yarn dlx sv <command>

3.2 创建新项目 (create)

这是开发的第一步。sv create 会引导你设置一个新的 SvelteKit 项目。

基本用法:

npx sv create my-app

高级用法(常用选项):

  • 使用特定模板
    • --template minimal:创建一个极其纯净的空项目。
    • --template library:创建一个 Svelte 组件库项目。
  • 从 Playground 克隆:如果你在官网的 Playground 写了一个 Demo,想把它下载到本地继续开发:
    npx sv create --from-playground="https://svelte.dev/playground/..."
    
  • 预装插件:在创建时直接加上你需要的功能:
    npx sv create --add tailwindcss eslint
    

3.3 为现有项目添加功能 (add)

这是 sv 最强大的地方。假设你有一个现有的 Svelte 项目,突然想引入 Tailwind CSS,以前你需要查文档、安装依赖、配置 postcss.config.js、修改 app.css...

现在,只需要运行:

npx sv add tailwindcss

CLI 会自动帮你安装依赖并更新所有必要的配置文件。

官方支持的强力插件包括:

  • UI/样式: tailwindcss, storybook, mdsvex (Markdown 支持)
  • 后端/数据库: drizzle (ORM), lucia (认证)
  • 测试/质量: vitest, playwright, eslint, prettier
  • 其他: paraglide (i18n 国际化), sveltekit-adapter (部署适配器)

你可以一次添加多个:

npx sv add eslint prettier vitest

3.4 代码检查 (check)

sv check 是对 svelte-check 的封装,用于发现编译错误、类型错误、未使用的 CSS 以及可访问性问题。

用法:
确保项目中安装了 svelte-check,然后运行:

npx sv check

常用选项:

  • --watch:监听文件变化,实时检查。
  • --fail-on-warnings:在 CI/CD 中很有用,把警告视为错误处理。
  • --threshold error:只显示错误,忽略警告。

3.5 版本迁移 (migrate)

当 Svelte 发布大版本更新(例如 Svelte 4 升级到 Svelte 5),或者你想将旧的 Store 语法迁移到新的 Runes 语法时,这个命令能救命。

用法:

npx sv migrate

或者指定具体的迁移任务:

  • npx sv migrate svelte-5:升级项目到 Svelte 5 并处理 Runes。
  • npx sv migrate app-state:将 $app/stores 迁移到新的 $app/state
  • npx sv migrate sveltekit-2:从 SvelteKit 1 升级到 2。

4. 常见问题排查

  • Windows 用户注意:在 PowerShell 中,sv 可能是 Set-Variable 的别名,导致命令冲突。
    • 解决办法:使用 npx sv 通常没问题,如果直接安装了 sv 使用,请确保使用完整的命令或在 cmd/git bash 中运行。
  • npx sv create 没反应:这有时发生在使用本地缓存版本的 npm 上。尝试清理 npm 缓存或确保使用最新版本的 npx

5. 总结

sv CLI 是 Svelte 团队为了提升开发者体验(DX)做出的巨大努力。它不仅仅是一个启动器,而是将整个 Svelte 生态系统(ORM、样式、测试、部署)连接在一起的胶水。

下次开始新项目或需要集成新工具时,别忘了试一下 npx sv


参考文档:Svelte Official Documentation

posted @ 2025-11-30 12:00  秋夜追风  阅读(13)  评论(0)    收藏  举报