Vite create-vite 版本演进深度解析从 vitejs/create-app 到多包管理器、React Compiler 支持的脚手架【免费下载链接】viteNext generation frontend tooling. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vi/vite本文以 create-vite 的 CHANGELOG 为主线梳理这个 Vite 官方项目脚手架工具从 2021 年 1 月首个版本到当前 9.2.0 的完整演进脉络并结合 核心源码 与 模板目录结构 剖析其命令行参数、模板体系与包管理器适配的底层实现帮助你在升级或排查脚手架行为时快速定位对应版本引入的能力与破坏性变更。一、create-vite 在 Vite 仓库中的定位create-vite是 Vite monorepo 中负责脚手架的独立包位于 packages/create-vite。从 package.json 可以确认它的几个关键身份特征npm 包名与版本create-vite当前版本9.2.0即 CHANGELOG 最顶部记录的版本可执行入口bin字段同时注册了create-vite和缩写命令cva二者都指向 index.js后者仅做一行转发——import ./dist/index.js真正逻辑位于 tsdown 构建产物中Node 版本要求engines声明node: ^20.19.0 || 22.12.0这一约束正是 7.0.0 版本破坏性变更见后文的直接产物发布内容files字段为index.js、template-*和dist说明模板目录是随 npm 包一起分发的运行时依赖clack/prompts交互式提示、vercel/detect-agentAI Agent 环境检测、cross-spawn跨平台子进程、mri命令行参数解析。源码只有一个入口文件 src/index.ts所有 CLI 逻辑、框架/变体注册表、模板复制与后处理逻辑都集中在这一处这使得 CHANGELOG 中每一条与脚手架行为相关的改动基本都能在该文件中找到对应实现。二、版本时间线CHANGELOG 中的关键里程碑CHANGELOG.md 覆盖了从1.0.02021-01-02到9.2.02026-08-24的全部发布记录。按时间线提取对使用者最有价值的事件可以得到下面这张里程碑表版本时间关键变化类别1.0.02021-01包诞生最初名为vitejs/create-app提供首批模板首发2.5.02021-07正式更名为create-vite命令简化为npm init vitelatest改名3.0.02022-07移除 Node 12 支持最低 Node 14.18模板迁移 ESM支持嵌套目录破坏性变更3.1.02022-09支持自定义 init 命令create-vue、Nuxt、SvelteKit源码迁移 TypeScript功能4.2.02023-03支持create-electron-vite透传功能4.4.02023-07新增 Solid、Qwik 模板Bun 作为脚本运行器的适配功能5.0.02023-11模板全面升级到 Vite 5最低 Node 18破坏性变更6.4.02025-04新增 TanStack Router 命令功能6.5.02025-05新增 Marko、RedwoodSDK 入口功能7.0.02025-06要求 Node 20.19/22.12移除 CJS 构建移除 Node 18build.target提升并命名baseline-widely-available破坏性变更8.0.0-beta.02025-09--interactive/--no-interactive开关自动安装依赖并启动 devReact Compiler 支持功能8.2.02025-11新增 Vike 入口功能9.0.02026-03默认浏览器 target 更新AI Agent 体验AX支持新增 Ember 入口移除 react-swc 变体模板变体显示说明文字破坏性变更 功能9.1.02026-06React 模板默认改用Oxlint并提供 ESLint 选项tsconfig.node.json采用moduleResolution: nodenext功能9.2.02026-08新增nub 包管理器支持修复对非 React 模板传--eslint时崩溃的问题功能 修复几个值得注意的细节版本号语义。Changelog 中每次大版本都会在开头给出⚠ BREAKING CHANGES小节如 7.0.0 的 bump required node version to 20.19, 22.12 and remove cjs build并在正文对应条目重复出现而 patch 版本如 9.1.2、9.0.7的标题被small标签包裹用来在视觉上弱化非功能类修复。高频的依赖升级条目。大量update all non-major dependencies/update rolldown-related dependencies条目来自 Renovate 的自动依赖更新源码中的// renovate: datasourcenpm注释即为证据这类条目对使用者无行为影响阅读时可跳过。模板文件的许可证。6.x 期间有一条 mark template files as CC0 的改动说明template-*目录下的示例代码采用 CC0 许可与工具本身的 MIT 许可区分开方便你直接取用模板代码而不受 MIT 义务约束具体以仓库内 LICENSE 为准。三、CLI 使用方式命令、参数与模板清单3.1 启动命令按 README 的当前说明各包管理器的启动方式如下Node 需满足 20.19 / 22.12个别模板可能需要更高版本# npm npm create vitelatest # yarn yarn create vite # pnpm pnpm create vite # bun bun create vite # deno deno init --npm vite跳过交互、直接指定项目名与模板时npm 7 需要额外的双连字符这正是 CHANGELOG 9.0.0 中 handle double dash fornpm exec 修复所处理的场景# npm 7注意 -- 之后才是传给 create-vite 的参数 npm create vitelatest my-vue-app -- --template vue # 其他包管理器 yarn create vite my-vue-app --template vue pnpm create vite my-vue-app --template vue bun create vite my-vue-app --template vue deno init --npm vite my-vue-app --template vue项目名可以使用.表示在当前目录脚手架。3.2 完整选项列表以下选项表来自 src/index.ts 中的helpMessage执行-h或--help时打印9.1.0 曾专门扩充过帮助输出中的 flag 数量Usage: create-vite [OPTION]... [DIRECTORY] Create a new Vite project in JavaScript or TypeScript. When running in TTY, the CLI will start in interactive mode. Options: -t, --template NAME use a specific template -i, --immediate / --no-immediate install dependencies and start dev --eslint / --no-eslint use ESLint instead of Oxlint (only for React templates) --overwrite remove existing files if target directory is not empty --interactive / --no-interactive force interactive / non-interactive mode -h, --help display this help message参数解析在 src/index.ts#L25-L36 中通过mri完成help、overwrite、immediate、interactive、eslint全部声明为 boolean因此--no-xxx形式天然可用。各参数的演进来源可在 CHANGELOG 中追溯--template最早期的核心参数--overwrite5.2.0 引入allow overwrite in command line用于非交互场景下处理非空目录--interactive/--no-interactive8.0.0-beta.0 引入6.4.1 曾临时修复过强制交互的 flag 问题--immediate8.0.0-beta.0 的 support auto install dependencies and start dev 引入8.0.0 又调整了提问顺序先问是否使用 rolldown-vite再问是否自动安装--eslint9.1.0 引入9.1.2 修复了它对非 React 模板会崩溃的 bug现在只打印一条 will be ignored 警告。3.3 模板清单内置模板与 README 中列出的 18 个 preset 一致与helpMessage的Available templates部分一一对应vanilla vanilla-ts vue vue-ts react react-ts react-compiler react-compiler-ts preact preact-ts lit lit-ts svelte svelte-ts solid solid-ts qwik qwik-ts这些名称不是手写的清单而是从源码中的FRAMEWORKS注册表推导出来的src/index.ts#L80-L392 定义了每个框架及其变体TEMPLATES常量再把它展平为全部模板名的数组。9.0.0 起交互式选择变体时还会显示说明文字show description for template variants例如react-compiler变体显示为 JavaScript React Compiler。除内置模板外注册表里还有两类自定义命令入口customCommand字段指向其他官方/生态工具的透传脚手架如custom-create-vuenpm create vuelatest、custom-nuxtnuxi init、SvelteKit、React Router v7、TanStack Router、QwikCity、Ember、Angular/Analog、Marko Run、Vike、RedwoodSDK 等Others 分组下的社区聚合入口create-vite-extra与create-electron-vite。这类条目正是 CHANGELOG 中长期迭代的主题3.1.0 引入机制4.2.0 加 Electron6.4.0 加 TanStack Router6.5.0 加 Marko/Redwood8.2.0 加 Vike9.0.0 加 Ember。对于不在内置模板中的社区项目README 建议使用 tiged 手动脚手架npx tiged user/project my-project cd my-project npm install npm run dev四、源码级实现一次脚手架运行的完整流程4.1 init() 主干流程入口函数init()src/index.ts#L440-L733按注释划分为若干阶段与 CHANGELOG 各版本功能一一对应参数与环境判定。解析argv._[0]为目标目录interactive默认为process.stdin.isTTY--interactive/--no-interactive可覆盖。随后调用vercel/detect-agent的determineAgent()检测是否运行在 AI Agent 环境中——这就是 9.0.0 的 add AI agent experience (AX) support若识别到 Agent 且处于交互模式会额外打印一条提示建议改用create-vite DIRECTORY --no-interactive --template TEMPLATE一步完成。项目名与目标目录。交互模式询问 Project name:默认vite-project非交互模式直接取默认值输入会经过formatTargetDirL735-L740剥离非法字符:\|?*与结尾斜杠——对应 CHANGELOG 中 strip invalid characters in project name9.0.0等修复。非空目录处理。若目标目录已存在且非空目录仅含.git视为空交互模式下提供 Cancel / Remove / Ignore 三个选项--overwrite等价于选择 Remove非交互且未传 flag 时直接取消。emptyDirL780-L790会清空目录但保留.git对应 CHANGELOG 中 3.1.0 的 skip.gitwhen emptying dir。包名推导与校验。取目录名的 basename用正则isValidPackageName校验不合法时用toValidPackageName自动修正小写化、空格转连字符交互模式下还会再询问确认——这是 2.1.0 起的 ensure valid package name 系列修复的延续。框架与变体选择。--template给的值若不在TEMPLATES中交互模式下会提示xxx isnt a valid template并重新选择非交互模式静默回退到vanilla-ts。React Compiler 模板归一化。若模板名包含react-compilerL606-L611会剥掉-compiler后缀实际复制template-react/template-react-ts目录然后由setupReactCompiler()做后处理见 4.4 节。customCommand 透传。若所选变体带customCommand则直接spawn.sync执行改写后的外部命令并process.exit——这是 Nuxt、SvelteKit、Ember 等借道入口的实现9.0.0 还修复了这类命令不应预创建空目录的问题do not create empty directory for custom commands。Lint 选择。React 模板在交互模式会询问 Which linter to use?9.1.1 把措辞改为现在这样默认 Oxlint可选 ESLint--eslint只对 React 模板生效其他模板传了只收到警告9.1.2 修复。是否立即安装启动。交互模式询问 Install with and start now?非交互默认否选是则依次执行安装与dev脚本。文件写入与后处理。递归复制template-name目录跳过模板自身 package.json稍后重写其中index.html的title会被替换为项目名8.0.0-beta.0 的 set default title in index.html to project name_gitignore、_oxlintrc.json通过renameFiles映射表L394-L397改回点开头文件名npm 不支持发布点文件。最后package.json的name字段被改写为第 3 步得到的包名。4.2 包管理器识别与命令改写install()/start()L414-L438通过pkgFromUserAgent(process.env.npm_config_user_agent)识别调用方解析npm_config_user_agent的首个 token形如pnpm/9.1.0取斜杠前半为包管理器名。识别结果决定后续所有命令形态安装命令yarn 直接yarn其余为pm install运行脚本yarn/pnpm/bun dev、deno task dev、其余pm run devL1111-L1139——CHANGELOG 8.0.0 中 use shorter command name forrun devfor each package manager 说的就是这里。外部customCommand的改写逻辑集中在getFullCustomCommand()L1053-L1109它按包管理器把npm create .../npm exec ...逐一替换包管理器npm create xxx改写为npm exec xxx改写为bunbun x create-xxxbun x xxxnubnubx create-xxxnubx xxxdenodeno run -A npm:create-xxxdeno run -A npm:xxxpnpmpnpm create xxx不支持--语法pnpm dlx xxxyarn 1.x去掉latest旧版不支持保持npm exec其他pm create xxxpm dlx或npm exec其中nub 的支持正是 CHANGELOG 最新版本 9.2.0 的 add nub package manager supportBun 与 Deno 的适配分别可追溯到 4.4.0 和 7.1.3。测试环境下install()/start()会检测_VITE_TEST_CLI环境变量并跳过真实执行这为tests下的自动化测试提供了桩stub机制。4.3 交互式 UI 的演进Changelog 能清晰看到提示库的三次迁移2.x 时代使用 prompts5.3.0 移除了 prompts alias6.3.0 换用clack/promptsuseclack/prompts5.5.4 又曾回退 svelte 相关依赖以配合9.0.5 用 Node 内置util.styleText替换了颜色库use styleText对应源码中createColors()的 Proxy 包装L1143-L1150。框架选择时每个变体的hint字段还会展示改写后的完整外部命令帮助用户在不选透传入口的情况下也能手动运行官方脚手架。4.4 React Compiler 与 ESLint 的后处理React Compiler8.0.0-beta.0 首次引入8.1.0 将依赖升到 1.0.09.0.1 补上缺失的babel/core依赖的实现是setupReactCompiler()L807-L857向package.json的devDependencies注入rolldown/plugin-babel、babel-plugin-react-compiler、babel/coreTS 模板额外注入types/babel__core版本号带// renovate注释由 Renovate 自动维护改写vite.config.*把import react from vitejs/plugin-react扩展为同时引入reactCompilerPreset与babel插件并在plugins数组中追加babel({ presets: [reactCompilerPreset()] })更新模板 README 的 React Compiler 章节提示该方案会影响 dev/build 性能并指向 plugin-react 的 experimental 原生编译器支持9.2.0 的 mention experimental react compiler support 即此改动的措辞更新。ESLint 选项9.1.0 引入的setupEslint()L859-L1030则做相反方向的替换删除模板默认的.oxlintrc.json按 TS/JS 两套配置生成eslint.config.jsflat configdefineConfigglobalIgnoresTS 版包含typescript-eslintrecommended向 devDependencies 写入eslint、eslint/js、eslint-plugin-react-hooks、eslint-plugin-react-refresh、globals等版本固定依赖把scripts.lint改为eslint .并同步改写 README 中 Expanding the ESLint configuration 小节含 type-aware 与 react-x/react-dom 的进阶配置示例。9.0.6 的 use ESLint v10 说明这里的版本基线已对齐 ESLint 10 的 flat-config-only 形态。五、模板目录与构建体系template-*目录是 npm 发布的核心资产之一。以 template-react-ts 为例它包含完整的tsconfig体系tsconfig.json为 solution 风格根配置——5.3.0 引入让vite.config.ts参与类型检查、vite.config.ts、src/、index.html与 README。CHANGELOG 中与模板内容相关的修复都能在这些目录中找到痕迹例如9.0.2给 vue 模板组件补上langts修复 vue-ts 类型错误9.1.0 / 9.1.1tsconfig.node.json引入moduleResolution: nodenext先误加moduleResolution又被 9.1.0 的后续条目修正6.1.0vue-ts 模板改为继承vue/tsconfig简化配置9.0.0React 模板适配新版vitejs/plugin-reactSvelte 模板不再默认vitePreprocessreact-swc 变体被整体移除。构建侧该包使用 tsdown.config.ts 定义的 tsdown 流水线7.0.0 从 unbuild 迁移到 tsdownpackage.json的dev/build/typecheck脚本与 9.0.4 中 handle tsdown inlineOnly deprecation 的构建系统条目相对应。类型检查由独立的 tsconfig.json 驱动。六、阅读与升级建议查当前版本以 package.json 的version字段为准当前 9.2.0而非只依赖 CHANGELOG 顶部条目跨大版本迁移7.0.0 起需要 Node 20.19/22.12 且不再有 CJS 构建8.x 引入了--interactive、自动安装与 React Compiler 模板9.0.0 提升了默认浏览器 target 并调整了模板集移除 react-swc、新增 Ember 与 AX 提示非交互/CI 场景优先使用--no-interactive --template name全参数形式Agent 环境的提示语也是这一形态处理已有目录时显式传--overwrite透传入口排障当 create-vite 实际执行的是customCommand如npm create vuelatest时其行为由外部工具决定create-vite 只负责按 4.2 节的规则改写命令前缀相关 issue 应到对应项目排查。七、小结packages/create-vite/CHANGELOG.md记录了 create-vite 五年间从vitejs/create-app更名、TypeScript 化、clack 交互重构到 rolldown 时代的多包管理器适配npm/yarn/pnpm/bun/deno/nub、React Compiler 一键注入与 Oxlint/ESLint 双轨 lint 体系的完整过程。结合 src/index.ts 中清晰的阶段化init()流程、FRAMEWORKS注册表与getFullCustomCommand()的命令改写矩阵可以确认这份 CHANGELOG 中的每一条面向使用者的改动其实现与行为边界都能在单文件源码中找到落点这也是把它作为升级决策与行为排障依据的价值所在。【免费下载链接】viteNext generation frontend tooling. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vi/vite创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考