一、vite build 构建生产版本

Vite 将配置转化为 rollup 配置，然后利用 rollup 打包。注意，Vite 只完成配置转换，打包工作由 rollup 完成，配置内容 👉 构建选项

1.1 解析 vite 配置

1.2 合成 rollup input 配置

代码	示例

input 包含了三种模式 ssr、库模式、普通应用模式，我们项目中一般不需要关注，默认是 index.html；

plugin 加入了非常多 vite 内置的插件，例如alias、css、esbuild、asset、terser等等；

1.3 合成 rollup output 配置

主要定义了产物的名称、输出目录、格式、js 版本等等。

代码	示例

1.4 调用 rollup 打包并产出

代码	示例

rollup 输出的两种模式：

• write：将 bundle 直接写入磁盘
• generate：在内存中生成输出的代码，这常用于 编程式地调用 build() 在写入磁盘之前，需要对构建后的文件进行进一步处理。

1.5 监听构建时文件变动

如果设置了 watch 属性，则提供构建时的监听属性支持。利用 rollup.watch 函数（基于 chokidar），当 vite.config.js 以及任何要打包的文件改动都将触发重新构建。

二、vite preview 本地预览构建产物

配置内容 👉 预览选项

前置知识：整个 http 服务基于connect 库来实现

/*
 * connect 基础用法
 */
// 1. Create an app
var app = connect();
// 2. Use middleware
app.use(function middleware1(req, res, next) { next() });
app.use(function middleware2(req, res, next) { next() });
// 2. Create a server from the app
var server = http.createServer(app).listen(port);

2.1 解析 vite 配置

2.2 判断构建产物是否存在

如果产物不存在就会直接报错了：

2.3 创建 http 服务

创建 http 服务基于connect 库来实现：

其中 resolveHttpServer 中根据不同的配置使用 hhtp/https/http2 服务：

1. 如果未配置 https 属性则使用 http（默认情况下）；
2. 如果配置 https 属性，同时又设置了 proxy 属性，则会降级为 TLS；
3. 如果配置 https 属性且未设置了 proxy 属性，则启用启用 TLS + HTTP/2；

2.4 执行插件中配置预览服务器的钩子

分为中间件之前和中间件之后执行，详见 configurePreviewServer。

const myPlugin = () => ({
  name: 'configure-preview-server',
  configurePreviewServer(server) {
    // ...其他中间件安装之前后调用
    
    // 返回一个钩子，会在其他中间件安装完成后调用
    return () => {
      server.middlewares.use((req, res, next) => {
        // 自定义处理请求 ...
      })
    }
  },
});

之前	之后

2.5 使用中间件

connect 库的核心就是中间件

• 跨域中间件：www.npmjs.com/package/cor…
• 代理中间件：www.npmjs.com/package/htt…
• 压缩中间件：github.com/preactjs/wm…
• 静态资源中间件：www.npmjs.com/package/sir…

2.6 启动 http 服务

主函数

httpServerStart

注意，如果端口号被占用，则会在错误回调函数中进行处理，如果 strictPort 设置为true，则直接退出不会再进行后续端口尝试，否则端口号会自动++尝试。

2.7 打开浏览器

内部主要基于 open 库实现。

三、总结

构建和预览主要基于 Rollup 和 Connect 两个库来实现其相应的功能。

vite build 构建

vite preview 预览

参考资料

One More Thing：如何调试 Vite 源码？

第一种：在 vite 源码中使用 playground 示例进行调试

#	步骤	示例
1	在 Vite 源码目录 packages/vite 中构建 Vite：pnpm run dev
2	在源码文件中找到期望调试的地方并打上断点
3	在 VSCode 中进入 debuger 模式
4	选择 playground 中的任意示例，执行相应命令就能跳转到对应断点位置

第二种：在自己项目中进行 vite 源码调试

#	步骤	示例
1	node_modules/vite/dist/node 中找到期望调试的地方并打上断点
2	在 VSCode 中进入 debuger 模式，执行相应命令就能跳转到对应断点位置

也可以用软链接的方式将 node_modules/vite 的内容更改为 vite 源码内容：

• 在 vite 源码目录 packages/vite 中执行 pnpm link --global
• 在项目目录下执行 pnpm link --global vite
• 取消软链接 pnpm unlink