Vite教程

现实问题 在浏览器支持ES模块之前，JavaScript并没有提供的原生机制让开发者以模块化的方式进行开发。这也正是我们对“打包”这个概念熟悉的原因：使用工具抓取、处理并将我们的源…

总览 Vite（法语意为 “快速的”，发音 /vit/，发音同 “veet”）是一种新型前端构建工具，能够显著提升前端开发体验。它主…

对非常基础的使用来说，使用 Vite 开发和使用一个静态文件服务器并没有太大区别。然而，Vite 还通过原生 ESM 导入提供了许多主要用于打包场景的增强功能。 NPM依赖解析和预…

Vite 可以使用插件进行扩展，这得益于 Rollup 优秀的插件接口设计和一部分 Vite 独有的额外选项。这意味着 Vite 用户可以利用 Rollup 插件的强大生态系统，同…

将资源引入为URL 服务时引入一个静态资源会返回解析后的公共路径： import imgUrl from ./img.png document.getElementById(her…

当需要将应用部署到生产环境时，只需运行 vite build 命令。默认情况下，它使用<root>/index.html 作为其构建入口点…

本指南建立在以下几个假设基础之上： 你正在使用的是默认的构建输出路径（​dist​）。这个路径 可以通过 ​build.outDir​ 更改，在这种情…

环境变量 Vite 在一个特殊的 ​import.meta.env​ 对象上暴露环境变量。这里有一些在所有情况下都可以使用的内建变量： ​import.meta…

如果你想使用传统的后端（如 Rails, Laravel）来服务 HTML，但使用 Vite 来服务其他资源，可以查看在 Awesome Vite 上的已有的后…

Vite 插件扩展了设计出色的 Rollup 接口，带有一些 Vite 独有的配置项。因此，你只需要编写一个 Vite 插件，就可以同时为开发环境和生产环境工作。 如果插件不使用 …

用户会将插件添加到项目的 devDependencies 中并使用数组形式的 plugins 选项配置它们。 // vite.config.…

Vite 插件也可以提供钩子来服务于特定的 Vite 目标。这些钩子会被 Rollup 忽略 config 类型： ​(config: UserConfig, env: …

默认情况下插件在开发（serve）和构建（build）模式中都会调用。如果插件只需要在预览或构建期间有条件地应用，请使用 apply 属性指明它们仅在build…

相当数量的 Rollup 插件将直接作为 Vite 插件工作（例如：​@rollup/plugin-alias​ 或 ​@rollup/plugin-json​…

Vite 对路径进行了规范化处理，在解析路径时使用 POSIX 分隔符（ / ），同时保留了 Windows 中的卷名。而另一方面，Rollup 在默认情况下保持解析的路径不变，因…

Vite 通过特殊的 import.meta.hot 对象暴露手动 HMR API。 interface ImportMeta { readonly hot?:…

要接收模块自身，应使用 import.meta.hot.accept，参数为接收已更新模块的回调函数： export const count = 1 if (import…

模块也可以接受直接依赖项的更新，而无需重新加载自身： import { foo } from ./foo.js foo() if (import.meta.hot) { impor…

一个接收自身的模块或一个期望被其他模块接收的模块可以使用 hot.dispose 来清除任何由其更新副本产生的持久副作用： function setupSide…

import.meta.hot.data 对象在同一个更新模块的不同实例之间持久化。它可以用于将信息从模块的前一个版本传递到下一个版本。