Appearance
打包工具vite.js
元信息
- 目标：上手现代项目的默认起点——从 npm create vite 脚手架到 dev server/HMR、CSS 与静态资源、vite.config 配置、环境变量与 Vitest 测试的完整实操
- 关键概念：脚手架、dev server、HMR、vite.config.js、import.meta.env、Vitest
- 关联阶段：cp3
- 常见误区：以为 HMR 就是自动刷新页面（只替换改动模块且保持应用状态）；以为 .env 里所有变量客户端都读得到（仅 VITE_ 前缀变量暴露给客户端）；以为图片等资源要手工搬运（import 导入后 Vite 开发期直链、生产期自动哈希改名）
vite.js 是什么？
Vite.js是由 Vue.js 的开发者 Evan You 创建的新一代构建工具。它在前端开发人员中很受欢迎，并且可以与 Vue、React 和 Svelte 等框架无缝集成。
它通过以下功能改善了开发体验：
- 服务器立即启动
- 通过热模块更换实现快速更新
- 内置支持 TypeScript、JSX、CSS 和静态资源
- 使用 esbuild 进行依赖项预打包
- 由 Rollup 提供支持的生产版本
- 灵活的插件系统
Vite 还支持 WebAssembly、Web Workers 和 CSS 预处理器等高级功能，而且设置极其简便。无论您使用哪种框架或工具，Vite 的设计都力求快速流畅且操作简单。
先决条件
开始之前，请确保您已安装 Node.js。版本需为 18 或更高（Vite 6 要求 Node 18+，Vite 7 要求 20+），并已安装 npm 。您还应该熟悉 JavaScript 或 TypeScript 以及基本的前端开发概念。
Vite.js 入门
在深入学习之前，让我们创建一个新的 Vite 项目，这样您就可以跟着操作并随时测试所有内容。
运行以下命令即可快速开始：
bash
npm create vite@latestVite CLI 会提示您选择项目名称、框架和变体（JavaScript 或 TypeScript）。在本教程中，我们选择“Vanilla”和“JavaScript”，以便在不了解框架特定复杂性的情况下理解 Vite 的核心功能：
bash
npx create-vite
│
◇ Project name:
│ vite-project
│
◇ Select a framework:
│ Vanilla
│
◇ Select a variant:
│ JavaScript
│
◇ Scaffolding project in /Users/stanley/vite-project...
│
└ Done. Now run:
cd vite-project
npm install安装完成后，导航到您的项目目录并安装依赖项：
bash
cd vite-project
npm install现在，让我们启动开发服务器：
bash
npm run dev输出
bash
> vite-project@0.0.0 dev
> vite
VITE v6.3.5 ready in 433 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help在浏览器打开 http://localhost:5173/（Vite 默认端口），可以看到一个基本的 Vite 应用程序：
您首先会注意到的是 Vite 惊人的启动速度——通常只需几毫秒，而传统打包工具则需要几秒甚至几分钟。这得益于 Vite 的创新开发方法，我们将在下文中进一步探讨。
了解 Vite 的开发模式
人们喜爱 Vite 的关键原因之一是其快速流畅的开发体验，这得益于热模块替换 (HMR) 技术。HMR 允许您在保存更改的同时，立即在浏览器中查看更新，而不会丢失应用程序的当前状态。
首先，清空 src 目录下的所有现有文件，以便从头开始。然后，打开 index.html 文件，清除所有内容，并将其替换为以下内容：
index.html
如果保存文件，Vite 将找不到 src/main.js ，您会在终端看到类似这样的错误：
输出
bash
3:56:48 PM [vite] (client) page reload index.html
3:57:08 PM [vite] Pre-transform error: Failed to load url /src/main.js (resolved id: /src/main.js). Does the file exist?出现此错误的原因是 src 目录中尚不存在 main.js 。在这种情况下， index.html 文件会尝试从 src 文件夹加载 main.js 。
现在，在项目的 src 目录下创建一个名为 main.js 新文件，并添加以下代码：
src/main.js
保存文件，然后再次保存 index.html 。你应该会看到更新后的输出：
输出
bash
3:57:03 PM [vite] (client) page reload index.html
3:57:08 PM [vite] Pre-transform error: Failed to load url /src/main.js (resolved id: /src/main.js). Does the file exist?
3:58:28 PM [vite] (client) page reload index.html返回浏览器。Vite 应该会自动重新加载页面并更新内容：
现在更新 src/main.js 中的 message.textContent 行，以测试 HMR 的实际效果：
src/main.js
保存文件。Vite 会立即检测到更改并更新 DOM，而无需重新加载整个页面：
您无需刷新浏览器或重启服务器。这就是 Vite 的 HMR 功能强大之处。它只更新应用程序中发生更改的部分，而保持其他所有内容不变——非常适合快速反馈和高效调试。
这种快速、保持状态的工作流程是使用 Vite 进行现代前端开发的最显著优势之一。
在 Vite 中使用 CSS 和资源
与其他打包工具相比，Vite 让样式和资源的管理变得异常简单。让我们一起来探索 Vite 如何以最少的配置来管理这些资源。
CSS 支持
Vite 默认支持 CSS。在 src 目录下创建一个名为 style.css 的新文件：
src/style.css
css
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f5f5;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
h1 {
color: #646cff;
}然后直接将其导入到您的 JavaScript 文件中：
src/main.js
保存 style.css 和 main.js 文件后，Vite 会立即应用样式，无需刷新页面。
如您所见，这些样式无需刷新页面即可立即生效。
CSS 预处理器
Vite 支持常用的 CSS 预处理器，且配置极简。我们来看看如何使用 Sass：
首先，安装 Sass 包：
bash
npm add -D sass-embedded现在在 src 目录下创建一个名为 style.scss 的新文件：
src/style.scss
css
$primary-color: #646cff;
$secondary-color: #535bf2;
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f5f5f5;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 2rem;
}
h1 {
color: $primary-color;
&:hover {
color: $secondary-color;
}
}然后更新你的 JavaScript 文件，改为导入 Sass 文件：
src/main.js
Vite 会自动处理 Sass 文件，并在您保存文件时应用样式。您可以将鼠标悬停在标题上，查看由嵌套规则定义的颜色变化。
其他预处理器，例如 Less 和 Stylus，工作原理类似。只需安装必要的软件包并使用正确的文件扩展名即可。
静态资源
Vite 处理静态资源（例如图片）同样简单。首先，在 src 目录下创建一个名为 assets 的文件夹：
bash
mkdir -p src/assets之后，下载 Vite 标志：
bash
curl -o src/assets/vite-logo.png https://upload.wikimedia.org/wikipedia/commons/thumb/f/f1/Vitejs-logo.svg/820px-Vitejs-logo.svg.png现在更新你的 HTML 代码，将图片添加到代码中：
index.html
保存文件后，您应该会在页面上看到 Vite 的标志。
您也可以直接在 JavaScript 中管理图像。请更新您的 main.js 文件：
src/main.js
保存并返回浏览器后，您将在页面上看到两个徽标——一个通过 HTML 加载，另一个通过 JavaScript 添加：
当您在 JavaScript 中导入图片时，Vite 会对其进行处理，并将导入语句替换为指向最终资源的 URL。在开发环境中，此 URL 直接指向资源。在生产环境中，Vite 会优化图片，使用内容哈希值重命名图片以清除缓存，并自动更新所有引用。
这种方法不仅适用于图像，也适用于字体、视频、音频和其他静态文件。只需在代码中导入它们，Vite 就会处理剩下的事情。
使用 vite.config.js 自定义 Vite
Vite 开箱即用，效果出色，但随着项目的发展，您可能需要自定义其行为。Vite 的配置文件让这一切变得轻松简单。
在项目根目录下创建 vite.config.js 文件：
vite.config.js
javascript
export default {
// configuration options go here
}更改开发服务器端口
我们先从一个简单的改动开始——更新服务器端口。将以下内容添加到您的配置文件中：
vite.config.js
javascript
export default {
server: {
port: 3000, // Change from default 5173
open: true // Auto-open browser
}
}现在重启开发服务器：
bash
npm run dev你的终端应该会显示不同的输出：
输出
bash
VITE v6.3.5 ready in 180 ms
➜ Local: http://localhost:3000/
➜ Network: use --host to expose
➜ press h + enter to show help请注意，服务器现在运行在 3000 端口而不是 5173 端口上，您的浏览器应该会自动打开到新地址。
使用 defineConfig 实现更智能的配置
为了进行更高级的自定义，请更新您的 vite.config.js 文件以使用 Vite 的 defineConfig 助手：
vite.config.js
javascript
import { defineConfig } from 'vite'
export default defineConfig({
server: {
port: 3000,
open: true
}
})在这段代码中，你从 Vite 导入 defineConfig 助手，并使用它来包装你的配置对象。
这不会改变配置的行为方式，但可以为您提供更好的编辑器支持，例如自动完成和内联文档。
此外，如果您想根据环境或其他自定义逻辑添加条件，它也可以让您的配置更容易扩展。
使用环境变量
Vite 可以使用环境变量轻松定义在开发和生产环境之间变化的值。
这些变量通常存储在 .env 文件中，并根据当前模式（ development 或 production ）自动加载。
在项目根目录下创建一个 .env 文件，并添加一些示例值：
.env
ini
VITE_API_URL=https://dev.example.com/api
VITE_APP_NAME=My Vite App注意：只有以
VITE_为前缀的变量才会暴露给客户端代码。这有助于避免意外泄露敏感信息。
您可以使用 import.meta.env 在应用程序代码中访问这些变量：
src/main.js
这些日志会在页面加载时将您的 .env 值打印到浏览器控制台：
这提供了一种简洁可靠的方法来管理特定环境的值。
使用 Vitest 设置测试
Vite 与 Vitest 完美搭配——Vitest 是一款快速测试运行器，其设计风格类似 Jest，但专为 Vite 生态打造。您可以编写单元测试，通过用户界面运行测试，并获得即时反馈——所有操作都与您现有的 Vite 项目集成。
首先安装 Vitest 及其用户界面：
bash
npm install -D vitest @vitest/ui如果您计划测试 DOM 代码，也请安装 jsdom ：
bash
npm install -D jsdom接下来，更新现有的 vite.config.js 文件，添加一个 test 部分。以下是如何在不删除现有配置的情况下添加测试部分的方法：
vite.config.js
javascript
import { defineConfig } from 'vite'
export default defineConfig({
server: {
port: 3000,
open: true
},
test: {
globals: true,
environment: 'jsdom',
ui: true
}
});这样可以保持您的开发服务器配置完整，并支持 Vitest，启用测试全局变量（如 describe 、 it 和 expect ），并使用 jsdom 设置类似浏览器的环境。
现在，创建一个名为 src/main.test.js 的新文件，并添加一个简单的测试：
src/main.test.js
您可以使用以下命令运行测试：
bash
npx vitest你应该会在终端看到类似这样的输出：
输出
bash
DEV v3.1.3 /Users/stanley/vite-project
UI started at http://localhost:51204/__vitest__/
✓ src/main.test.js (1 test) 1ms
✓ sample test > adds numbers correctly 1ms
Test Files 1 passed (1)
Tests 1 passed (1)
Start at 17:05:24
Duration 655ms (transform 16ms, setup 0ms, collect 11ms, tests 1ms, environment 405ms, prepare 45ms)
PASS Waiting for file changes...
press h to show help, press q to quit如您所见，Vitest 测试运行速度很快，并持续监控变化。它提供详细的输出，准确显示哪些测试通过以及每个步骤耗时多久。
您还可以使用内置的浏览器用户界面以交互模式运行 Vitest：
bash
npx vitest --ui这将启动一个视觉测试运行程序，运行程序位于本地地址，您可以在其中执行以下操作：
查看实时测试结果
立即重新运行测试
查看错误和堆栈跟踪
使用现代化的界面浏览测试文件
该界面在积极开发过程中尤其有用，可在编写或更新测试时提供即时反馈。
小结
Vite 为您提供了一种快速、现代的方式来构建 Web 应用程序。
它开箱即用，支持 ES 模块、TypeScript、CSS 预处理器和静态资源，无需额外设置。
将它与 Vitest 结合使用，可以得到一个简单而强大的测试设置，可以轻松融入您的项目中。
了解更多信息，请查看：