Vite
下一代前端构建工具,基于原生 ES 模块提供极速开发服务器与热更新,并用 Rolldown 打包生产资源,是 Vue、React 等现代框架项目的常用脚手架底座。
过去 7 天收获 1 颗 Star
爱鲜报评分
0.0
0 人评分
开源 · MIT
#TypeScript
#前端
#构建工具
#HMR
#开发服务器
84k
星数
否
中文
TypeScript
主语言
是
活跃
1382
贡献者
人工分析
EDITORIAL推荐理由
Vite 已成为现代前端工程的事实标准之一,启动快、HMR 几乎无感,能显著提升日常开发效率。插件生态成熟,与 Vue、React、Svelte 等框架深度集成,新项目几乎可以默认选用。
适用场景
- 前端项目开发与调试
- 单页应用与多页应用构建
- 组件库与类库打包
- 框架脚手架与模板工程
- 静态站点与文档站点构建
优点
- 开发服务器冷启动极快
- HMR 热更新响应迅速,体验流畅
- 插件 API 统一,生态丰富
- 配置简洁,开箱即用
- TypeScript 类型支持完善
缺点
- 生产构建依赖 Rolldown,与旧版 Rollup 行为存在差异
- 部分 CommonJS 老依赖需额外兼容处理
- 大型项目构建优化仍需手动调优
- 版本迭代快,升级需关注破坏性变更
上手难度
入门
Vite 是什么
Vite(法语“快”,读作 /viːt/)是面向现代 Web 项目的前端构建工具,目标是提供更快、更轻的开发体验。它主要由两部分组成:
- 开发服务器:基于浏览器原生 ES 模块,提供极速启动与热模块替换(HMR)等增强能力。
- 构建命令:使用 Rolldown 打包代码,预配置为输出高度优化的生产静态资源。
此外,Vite 通过插件 API 与 JavaScript API 提供强扩展能力,并带有完整类型支持。
核心特性
- 💡 秒级启动开发服务器
- ⚡️ 极快的 HMR 热更新
- 🛠️ 丰富的内置功能
- 📦 面向生产的优化构建
- 🔩 通用插件接口
- 🔑 全量类型化的 API
快速上手
通常通过官方脚手架创建项目,再安装依赖并启动开发服务器:
npm create vite@latest my-app
cd my-app
npm install
npm run dev
构建生产资源:
npm run build
仓库结构
| 包 | 说明 |
|---|---|
vite |
核心包,包含开发服务器与构建能力 |
@vitejs/plugin-legacy |
为旧浏览器提供兼容支持的插件 |
create-vite |
项目脚手架工具 |
适用建议
Vite 适合新建立的前端项目、组件库与静态站点,也适合从旧构建工具迁移的工程。若项目依赖较多 CommonJS 老包,迁移时需留意兼容配置;升级大版本前建议阅读迁移指南。
许可
MIT License。
评论
- 暂无评论,来写第一条吧。