tiny-vite

简体中文 | English

⚡️ a lightweight frontend build tool designed to deliver swift development experiences and efficient build processes。基于 Rolldown 统一引擎，告别开发/生产不一致问题。支持 ModuleGraph，HMR，插件架构，单文件编译，代码压缩

架构演进

从双引擎到 Rolldown

原版 Vite 采用双引擎架构：

• 开发环境：esbuild 进行依赖预构建（快速冷启动）
• 生产环境：Rollup 进行打包（成熟的插件生态，tree-shaking）

这种架构存在一个根本性问题：开发/生产不一致。由于使用不同的打包器，同样的代码在开发和生产环境可能表现不同。

tiny-vite 已迁移至 Rolldown - 一个基于 Rust 的打包工具，旨在统一开发和生产构建：

┌─────────────────────────────────────────────────────────────┐
│                     tiny-vite v2.x                          │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│   开发环境              生产环境                              │
│   ┌─────────┐         ┌─────────┐                          │
│   │ Rolldown│         │ Rolldown│                          │
│   │  扫描   │         │  构建   │                           │
│   │ 预构建  │         │         │                           │
│   └─────────┘         └─────────┘                          │
│        │                   │                                │
│        └───────┬───────────┘                                │
│                │                                            │
│           同一引擎                                           │
│           行为一致                                           │
│                                                             │
└─────────────────────────────────────────────────────────────┘

Rolldown 的优势

• 统一引擎：开发和生产使用同一打包器，消除不一致性
• Rust 性能：扫描和打包都接近原生速度
• Rollup 兼容：支持大部分 Rollup 插件
• 内置特性：原生支持 TypeScript、JSX 转换

功能特性

• ⚡️ 快速的开发服务器：使用内置的开发服务器，实现热模块替换（HMR）和快速重载，加速开发流程。
• 🚀 即时编译：利用现代浏览器的 ES 模块特性，避免打包步骤，实现按需编译和加载，减少开发时间。
• 📝 简化的配置：仅需一个配置文件，即可快速启动项目，无需繁琐的配置过程。
• 🎉 轻量级：精简了复杂的功能，保持核心特性，使工具更加轻盈。
• 🦀 Rolldown 驱动：统一的 Rust 打包器，同时服务于开发和生产环境。

进展

• [x] 构建脚本
• [x] 脚手架 CLI
• [x] 静态文件中间件
• [x] http 服务器
• [x] 依赖预构建：依赖扫描、依赖构建、修改导入路径
• [x] 插件机制：插件容器对象，插件上下文对象
• [x] 核心编译能力：入口 html 加载、TS/TSX/JS/JSX 编译、CSS 编译、静态资源加载
• [x] HMR：模块依赖图、HMR 服务器、HMR 客户端
• [x] 生产构建：rolldown 打包、CSS 提取、资源处理
• [x] 支持 vue 插件
• [x] 支持 style
• [x] 支持环境变量

安装方法

在开始之前，请确保你的环境已经安装了 Node.js。

通过以下步骤安装 tiny-vite：

1. 全局安装 tiny-vite

npm install -g tiny-vite

2. 进入你的项目目录

mkdir my-app
cd my-app

3. 初始化项目（生成配置文件和必要的目录结构）

tiny-vite init

4. 启动开发服务器：

tiny-vite dev

5. 生产构建：

tiny-vite build

许可证

MIT