尤雨溪写的100多行的“玩具 vite”，十分有助于理解 vite 原理

1. 前言

大家好，我是若川。最近组织了源码共读活动，感兴趣的可以加我微信 ruochuan12

想学源码，极力推荐之前我写的《学习源码整体架构系列》jQuery、underscore、lodash、vuex、sentry、axios、redux、koa、vue-devtools、vuex4、koa-compose、vue-next-release、vue-this、create-vue等10余篇源码文章。

最近组织了源码共读活动

在 vuejs组织^[1] 下，找到了尤雨溪几年前写的“玩具 vite”vue-dev-server^[2]，发现100来行代码，很值得学习。于是有了这篇文章。

阅读本文，你将学到：

1. 学会 vite 简单原理
2. 学会使用 VSCode 调试源码
3. 学会如何编译 Vue 单文件组件
4. 学会如何使用 recast 生成 ast 转换文件
5. 如何加载包文件
6. 等等

2. vue-dev-server 它的原理是什么

vue-dev-server#how-it-works^[3]README 文档上有四句英文介绍。

发现谷歌翻译^[4]的还比较准确，我就原封不动的搬运过来。

• 浏览器请求导入作为原生 ES 模块导入 - 没有捆绑。

• 服务器拦截对 *.vue 文件的请求，即时编译它们，然后将它们作为 JavaScript 发回。

• 对于提供在浏览器中工作的 ES 模块构建的库，只需直接从 CDN 导入它们。

• 导入到 .js 文件中的 npm 包（仅包名称）会即时重写以指向本地安装的文件。 目前，仅支持 vue 作为特例。 其他包可能需要进行转换才能作为本地浏览器目标 ES 模块公开。

也可以看看vitejs 文档^[5]，了解下原理，文档中图画得非常好。

看完本文后，我相信你会有一个比较深刻的理解。

3. 准备工作

3.1 克隆项目

本文仓库 vue-dev-server-analysis，求个star^_^^[6]

# 推荐克隆我的仓库
git clone https://github.com/lxchuan12/vue-dev-server-analysis.git
cd vue-dev-server-analysis/vue-dev-server
# npm i -g yarn
# 安装依赖
yarn

# 或者克隆官方仓库
git clone https://github.com/vuejs/vue-dev-server.git
cd vue-dev-server
# npm i -g yarn
# 安装依赖
yarn

一般来说，我们看源码先从package.json文件开始：

// vue-dev-server/package.json
{
  "name": "@vue/dev-server",
  "version": "0.1.1",
  "description": "Instant dev server for Vue single file components",
  "main": "middleware.js",
  // 指定可执行的命令
  "bin": {
    "vue-dev-server": "./bin/vue-dev-server.js"
  },
  "scripts": {
    // 先跳转到 test 文件夹，再用 Node 执行 vue-dev-server 文件
    "test": "cd test && node ../bin/vue-dev-server.js"
  }
}

根据 scripts test 命令。我们来看 test 文件夹。

3.2 test 文件夹

vue-dev-server/test 文件夹下有三个文件，代码不长。

• index.html

• main.js

• text.vue

如图下图所示。