# 手撕vite源码

**Repository Path**: leeyamaster/hand-vite-source

## Basic Information

- **Project Name**: 手撕vite源码
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-28
- **Last Updated**: 2026-02-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Mini-Vite 学习 Demo

一个用于学习 Vite 核心原理的迷你实现，帮助你理解 Vite 开发服务器的工作机制。

## 核心原理

Vite 开发时的核心思路：**不打包，利用浏览器原生 ESM**

1. **原生 ESM**：`<script type="module">` 让浏览器直接解析 import
2. **按需编译**：只转换当前请求的模块，无需打包整个项目
3. **路径重写**：将裸模块 `import vue from 'vue'` 转为 `/@modules/vue`
4. **依赖预构建**：生产环境用 esbuild 预构建（本 demo 未实现）

## 项目结构

```
my-vite/
├── mini-vite/           # Mini-Vite 实现
│   ├── index.js         # 入口
│   ├── server.js        # HTTP 服务器 + 请求拦截
│   └── transform.js     # 模块路径重写
├── index.html           # 入口 HTML
├── main.js              # 应用入口
├── App.js               # 组件
├── utils.js             # 工具函数
└── package.json
```

## 各文件说明

### Mini-Vite 核心（mini-vite/）

| 文件 | 作用 |
|------|------|
| **index.js** | 入口文件。获取项目根目录，调用 `createServer` 创建服务器并监听 5173 端口。执行 `npm run dev` 时从这里启动。 |
| **server.js** | HTTP 服务器。根据请求 URL 分发处理：`/` 返回 index.html；`/*.js` 读取并转换后返回；`/@modules/xxx` 从 node_modules 解析裸模块；其他静态文件直接返回。内含 `resolveModule` 用于解析 npm 包入口。 |
| **transform.js** | 模块转换器。对 JS 源码做路径重写：裸模块 `'vue'` → `/@modules/vue`；相对路径 `'./foo'` 无扩展名时补全 `.js`。所有 `.js` 请求都会经过这里处理后再返回。 |

### 示例应用（项目根目录）

| 文件 | 作用 |
|------|------|
| **index.html** | 页面入口。包含 `<script type="module" src="/main.js">`，让浏览器以 ESM 方式加载 main.js，这是触发整个模块加载链的起点。 |
| **main.js** | 应用入口。导入 `createApp` 并挂载到 `#app`。浏览器请求此文件时，Mini-Vite 会拦截、转换其中的 import 路径后返回。 |
| **App.js** | 根组件。负责渲染页面内容，并导入 `utils.js` 的 `greet` 函数。演示模块间的相对路径导入。 |
| **utils.js** | 工具模块。导出 `greet` 函数，作为依赖链的末端，演示多级模块加载。 |

### 配置文件

| 文件 | 作用 |
|------|------|
| **package.json** | 项目配置。`"type": "module"` 启用 ESM；`npm run dev` 执行 `node mini-vite/index.js` 启动开发服务器。 |

## 运行方式

```bash
# 启动开发服务器
npm run dev
```

然后访问 http://localhost:5173

## 学习要点

### 1. 请求处理流程

| 请求 | 处理方式 |
|------|----------|
| `/` 或 `/index.html` | 返回 index.html |
| `/*.js` | 读取文件 → 重写 import 路径 → 返回 |
| `/@modules/xxx` | 从 node_modules 解析包 → 转换 → 返回 |
| 其他静态文件 | 直接返回 |

### 2. 路径重写规则

- `import x from 'vue'` → `import x from '/@modules/vue'`
- `import './foo'` → `import './foo.js'`（补全扩展名）

### 3. 与真实 Vite 的差异

本 demo 简化了以下部分：

- 无 HMR（热更新）
- 无 Vue/Svelte 等框架的 SFC 编译
- 无 TypeScript 转换
- 无 CSS 预处理器
- 无依赖预构建（esbuild）

## 扩展练习

1. 添加 `chokidar` 实现文件监听 + 简单 HMR
2. 集成 esbuild 支持 TS/JSX 转换
3. 实现 `import.meta.url` 等 ESM 特性
4. 添加 `/@vite/client` 注入 HMR 客户端

## 参考

- [Vite 官方文档](https://vitejs.dev/)
- [Vite 源码](https://github.com/vitejs/vite)