Vite 项目创建命令对比总结

324 阅读2分钟

本文对比npm create vitenpm exec create-vitenpx create-vite的区别

首先介绍npm create vite

实际上,npm create vitenpm init vite 的别名,而 npm init vite 的核心机制,跟 create-vite 脚本相关联,所以最终会去找 create-vite 这个包,执行步骤如下

步骤说明
1npm 解析 create vitenpm exec create-vite
2从 npm 仓库查找 create-vite
3下载或复用本地缓存的 create-vite
4执行 create-vite 包里 bin 指定的脚本(一般是 dist/index.js
5命令行交互,生成模板项目

🌐 三种命令的执行步骤 & 区别对比表

对比项npm create vitenpm exec create-vitenpx 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@latestnpm exec create-vite@latestnpx 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