本文对比npm create vite和npm exec create-vite和npx create-vite的区别
首先介绍npm create vite
实际上,npm create vite 是 npm init vite 的别名,而 npm init vite 的核心机制,跟 create-vite 脚本相关联,所以最终会去找 create-vite 这个包,执行步骤如下
| 步骤 | 说明 |
|---|---|
| 1 | npm 解析 create vite 为 npm exec create-vite |
| 2 | 从 npm 仓库查找 create-vite 包 |
| 3 | 下载或复用本地缓存的 create-vite |
| 4 | 执行 create-vite 包里 bin 指定的脚本(一般是 dist/index.js) |
| 5 | 命令行交互,生成模板项目 |
🌐 三种命令的执行步骤 & 区别对比表
| 对比项 | npm create vite |
npm exec create-vite |
npx create-vite |
|---|---|---|---|
| 本质 | 语法糖,本质等价于 npm exec create-vite |
直接执行 create-vite 包 |
直接执行 create-vite 包 |
| npm 版本要求 | npm 7+ 专属新语法 | npm 7+ (推荐),npm 6+ (有限支持) | npm 6 经典用法,npm 7+ 仍支持但不推荐 |
| 是否自动安装 create-vite 包 | ✅ 自动,如果本地没有则临时下载 | ✅ 自动,如果本地没有则临时下载 | ✅ 自动,如果本地没有则临时下载 |
| 是否会污染 node_modules | ❌ 不会,临时执行 | ❌ 不会,临时执行 | ❌ 不会,临时执行 |
| 调用 create-vite 脚本方式 | 执行 create-vite 包中的 bin 指定脚本 (如 dist/index.js) |
同左 | 同左 |
| 语法是否优雅 | ✅ 最优雅,推荐用法 | 中规中矩 | 较老写法 |
| 命令示例 | npm create vite@latest |
npm exec create-vite@latest |
npx create-vite@latest |
| 支持旧 npm 版本 | ❌ 不支持 npm 6,只支持 npm 7+ | ⚠️ 有些版本 npm 6 不支持 | ✅ 完美支持 npm 6 |
| 官方推荐 | ✅ 推荐 | ✅ 推荐 | ⚠️ 新项目不推荐,偏向旧项目 |
📊 总结推荐(按场景)
| 场景 | 推荐命令 | 理由 |
|---|---|---|
| npm 7+ 用户,想跟随官方推荐 | npm create vite |
最优雅、最符合官方标准 |
| 想明确表达"执行"而非"创建"含义 | npm exec create-vite |
语义更清晰,适合喜欢显式表达命令的用户 |
| npm 6 用户或不确定版本,需最大兼容性 | npx create-vite |
经典用法,向下兼容 npm 6,无脑执行 |
🔑 总结一句话
npm 7+ 推荐用
npm create vite,不确定 npm 版本就用npx create-vite,喜欢明确语义就用npm exec create-vite。