vite (opens new window) 源码 (opens new window)解析

vite 优点

• 极速的服务启动,使用原生 ESM 文件，无需打包!
• 轻量快速的热重载,无论应用程序大小如何，都始终极快的模块热重载（HMR）
• 丰富的功能,对 TypeScript、JSX、CSS 等支持开箱即用
• 优化的构建,可选 “多页应用” 或 “库” 模式的预配置 Rollup 构建
• 通用的插件,在开发和构建之间共享 Rollup-superset 插件接口
• 完全类型化的 API,灵活的 API 和完整 TypeScript 类型

环境搭建

clone

git clone https://github.com/vitejs/vite
cd vite

软连接

yarn
cd packages/vite
yarn dev
yarn link

init 一个项目

• 官方搭建方式 搭建一个 vite 项目 (opens new window)
• 搭建一个简单的

mkdir vite-base
cd vite-base
npm init或者yarn init
npm install vite或者yarn add vite

编辑package.json

...

  "scripts": {
    "start": "vite",
  },
...

debug

对于这样的源码项目我们该如何去调试呢,干巴巴的看源码没调试来得快,理解的快

下面提供两种方式

官方调试方式

 "scripts": {
    "debug": "vite --debug --profile --force"
  },

再运行yarn debug,就会出现如下的情况,这样我们就可以愉快的学习vite了

vscode 版本

利用vscode调试功能,打断点进行代码流程查看

• 第一步先去 vite 源码打个断点

• 第二步启动vscode调试功能

• ok!开始调试

谷歌浏览器

• 打开谷歌浏览器 nodejs 调试工具 1.打开谷歌浏览器,输入chrome://inspect/#devices 2.下载NIM扩展工具
• 修改package.json

"debug": "node --inspect-brk ./node_modules/vite/bin/vite.js",

• 运行

• 浏览器

• 如果安装NIM插件会自动打开调试工具

比较推荐 vscode 调试