Source: Dev.to

你可能不知道的 create-vite CLI 的 3 件酷事

如果你已经使用 Vite 一段时间了，你可能已经熟悉了最常见的用法：

npm create vite@latest
# 或者
yarn create vite
# 或者
pnpm create vite@latest

不过，这个 CLI 其实还有一些隐藏的功能，能够让你的项目初始化过程更快、更灵活。下面就来看看这三件你可能还不知道的酷事。

1️⃣ 直接在命令行里指定模板和项目名称

默认情况下，create-vite 会交互式地询问你想要的模板（React、Vue、Svelte 等）以及项目名称。但你可以通过传参一次性完成所有选择，省去交互式提示：

npm create vite@latest my-awesome-app -- --template vue
# 或者使用简写
npm create vite@latest my-awesome-app -t react

技巧：在 npm create vite@latest 与模板参数之间需要加上 --，这样后面的参数才会被传递给 Vite 而不是 npm 本身。

2️⃣ 自动初始化 Git 仓库

在创建项目的同时，你可以让 CLI 自动为你初始化一个 Git 仓库，而不必在项目生成后手动运行 git init：

npm create vite@latest my-app -- --git

如果你不想要 Git（比如在临时实验项目中），可以使用 --no-git 来显式关闭：

npm create vite@latest my-app -- --no-git

3️⃣ 自动安装依赖

创建完项目后，通常我们会手动运行 npm install（或 yarn、pnpm）来安装依赖。create-vite 允许你在生成项目的同时自动完成这一步：

npm create vite@latest my-app -- --install

这在使用 pnpm 或 yarn 时同样适用，只要对应的包管理器已经在系统中可用，CLI 会自动使用它来安装依赖。

---

小结

• 一次性指定模板和项目名：npm create vite@latest <name> -- --template <framework>
• 自动初始化 Git：--git 或 --no-git
• 自动安装依赖：--install

掌握这些隐藏选项后，你可以更快地启动 Vite 项目，省去不少手动步骤。下次创建新项目时，记得尝试这些技巧，让你的工作流更加顺畅！

一目了然

一切都始于 src/index.ts 文件的 init 函数（源码链接）。

CLI 经过六个阶段：

1. 获取（或询问）项目名称和目标目录。
2. 处理已存在且非空的目录。
3. 获取有效的包名（如果步骤 1 中的项目名称不是有效的 NPM 包名）。
4. 让用户选择框架和变体。
5. 询问是否需要立即安装。
6. 搭建文件夹和文件。

为 CLI 提供流畅体验的关键库：

• mri – 解析 CLI 参数。
• @clack/prompts – 渲染美观的交互式提示。
• picocolors – 为控制台输出添加颜色。

总体而言，create‑vite 是一个直接且简单的工具，但其实现中包含了若干有趣的细节。

酷炫功能 1 – 所有不同的 CLI 标志

除了已记录的 --template 标志外，create‑vite 还支持其他几个标志：

可用的模板名称

你可以将以下任意字符串传递给 --template：

// vanilla
"vanilla-ts",
"vanilla",

// vue
"vue-ts",
"vue",
"custom-create-vue",
"custom-nuxt",
"custom-vike-vue",

// react
"react-ts",
"react-compiler-ts",
"react-swc-ts",
"react",
"react-compiler",
"react-swc",
"rsc",
"custom-react-router",
"custom-tanstack-router-react",
"redwoodsdk-standard",
"custom-vike-react",

// preact
"preact-ts",
"preact",
"custom-create-preact",

// lit
"lit-ts",
"lit",

// svelte
"svelte-ts",
"svelte",
"custom-svelte-kit",

// solid
"solid-ts",
"solid",
"custom-tanstack-router-solid",
"custom-vike-solid",

// ember
"ember-app-ts",
"ember-app",

// qwik
"qwik-ts",
"qwik",
"custom-qwik-city",

// angular
"custom-angular",
"custom-analog",

// marko
"marko-run",

// others
"create-vite-extra",
"create-electron-vite"

很酷的功能 2 – 对 AI 代理的“支持”

create‑vite 使用 @vercel/detect-agent 来检查是否有 AI 代理在调用 CLI。如果检测到代理 且 启用了交互模式，CLI 会打印一条有用的提示，建议使用非交互方式运行：

create-vite --no-interactive --template <template-name>

很酷的事 3 – 一些编码技巧

通过 npm_config_user_agent 确定包管理器

CLI 可以通过读取 npm_config_user_agent 环境变量来推断用户使用的是哪个包管理器。例如，使用 pnpm 时可以看到完整的 agent 字符串：

pnpm config get user-agent
# pnpm/10.20.0 npm/? node/v20.11.1 linux x64

随后代码会对该字符串进行分割，以提取包管理器的名称（参见源码文件第 777 行的实现）。

检测 stdin 是否为 TTY

process.stdin.isTTY 用来告诉 CLI 标准输入是否连接到终端。当输入被管道传输时（例如 cat data.txt | xargs pnpm create-vite），isTTY 为 false，因此交互式提示会被禁用。

优雅地处理 Ctrl‑C（取消）

在每个提示之后，代码会检查用户是否取消了操作，如果是，则以友好的信息干净地退出：

if (prompts.isCancel(projectName)) return cancel();

@clack/prompts 的作者推荐这种模式，在生产就绪的代码库中看到它也进一步凸显了其重要性。