Vite教程

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

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

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

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

当你首次启动 vite 时，你可能会注意到打印出了以下信息： Optimizable dependencies detected: （侦测到可优化的依赖：） r…

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

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

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

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

源码结构 一个典型的 SSR 应用应该有如下的源文件结构： – index.html – src/ – main.js # 导出环境无关的（通用的）应用代码 – entry-cli…

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

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

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

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

一个 Vite 插件可以额外指定一个 ​enforce ​属性（类似于 webpack 加载器）来调整它的应用顺序。​enforce的值可以是​pre或&nbs…

默认情况下插件在开发（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?:…

首先，请确保用一个条件语句守护所有 HMR API 的使用，这样代码就可以在生产环境中被 tree-shaking 优化： if (import.meta.hot) { // HM…