Vite 5 源码分析：httpServer 和 publicFiles

2023-09-15 09:55:38

Vite 5：探索 HTTP 服务器和 publicFiles

Vite 是一款备受推崇的前端构建工具，以其闪电般的构建速度和非凡的开发体验著称。在本文中，我们将深入探究 Vite 5 的源代码，重点剖析其 HTTP 服务器和 publicFiles 的实现。

HTTP 服务器

Vite 的 HTTP 服务器依托于 Express，一个强大的 Node.js 框架，简化了 HTTP 服务器的创建和管理。在 Vite 中，HTTP 服务器肩负着为开发服务器提供服务的重任，并负责处理来自浏览器的请求。

创建 HTTP 服务器

在 server/index.ts 文件中，Vite 构建了 HTTP 服务器。首先，它引入必要的模块，然后使用 express() 函数创建一个 Express 应用程序。

import express from 'express';
import http from 'http';
import { createWebSocketServer } from './websocketServer';
import { createMiddleware } from './middleware';

export function createServer(options: ServerOptions) {
  // ...

  // 创建 Express 应用程序
  const app = express();

  // ...
}

配置 HTTP 服务器

创建 Express 应用程序后，Vite 对其进行配置。它添加中间件以处理请求，例如解析 JSON 请求和提供静态文件。此外，它还设置路由来处理特定请求，例如刷新浏览器和重新加载模块。

// 配置 Express 应用程序

// 处理 JSON 请求
app.use(express.json());

// 提供静态文件
app.use(express.static(resolve(process.cwd(), 'public')));

// ...

// 处理刷新浏览器请求
app.get('/__vite_reload', (req, res) => {
  // ...
});

// ...

启动 HTTP 服务器

最后，Vite 启动了 HTTP 服务器。它使用 Node.js 的 http 模块创建一个 HTTP 服务器，并将其与 Express 应用程序关联。

// 启动 HTTP 服务器

const server = http.createServer(app);
server.listen(options.port, () => {
  console.log(`Server listening on port ${options.port}`);
});

publicFiles

Vite 的 publicFiles 功能允许在项目中包含公共文件，如图像、字体和样式表。这些文件可供开发服务器和构建产物访问。

配置 publicFiles

要使用 publicFiles，需要在 Vite 配置文件中进行配置。通过在 publicDir 选项中指定公共文件的目录即可实现。

// vite.config.ts

export default defineConfig({
  // ...

  // 配置 publicFiles
  publicDir: 'public',

  // ...
});

处理 publicFiles

Vite 在 server/index.ts 文件中处理 publicFiles。它使用 Express 的 static() 中间件提供公共文件。

// 处理 publicFiles

// 提供公共文件
app.use(express.static(resolve(process.cwd(), 'public')));

访问 publicFiles

在开发过程中，可以通过在浏览器中输入以下 URL 访问公共文件：

http://localhost:3000/public/file.png

在构建产物中，公共文件将复制到构建输出目录。可以通过以下方式访问它们：

dist/public/file.png

结论

通过对 Vite 5 中 HTTP 服务器和 publicFiles 的深入探索，我们了解了 Vite 如何建立开发服务器并集成配置项。我们还深入研究了 Vite 开发服务器底层如何基于 Express 构建。这种对 Vite 内部机制的理解将使开发人员能够充分利用 Vite 的功能，打造高效且令人愉悦的开发体验。

常见问题解答

1. 如何解决 Vite 开发服务器端口占用问题？

Vite 使用端口号 3000 作为开发服务器的默认端口。如果该端口被占用，Vite 会自动尝试其他端口号。

2. 如何为公共文件配置自定义路径？

通过在 publicDir 选项中指定自定义路径，可以为公共文件配置自定义路径。

3. Vite 如何处理不同请求类型的中间件？

Vite 使用 Express 框架的中间件机制来处理不同类型的请求。每个中间件负责处理特定类型的请求。

4. Vite 是否支持多页应用程序（MPA）？

是的，Vite 支持多页应用程序。你可以使用 createPage 函数创建多个 HTML 页面，并使用路由机制在它们之间导航。

5. 如何从命令行访问 Vite 开发服务器？

在终端中运行 vite 命令即可从命令行访问 Vite 开发服务器。