Vite3 中的新功能以及如何迁移它！

Vite 3

自首次发布以来，Vite.js 在开发者社区中的受欢迎程度大幅提升。每周 npm 下载量超过 100 万次，并在 2021 年 js 状态的库列表中名列前茅 , 随着越来越多的框架现在采用 Vite 作为他们的默认工具选项，已经出现了起义。

Nuxt 3 默认使用 Vite，最近 Laravel 也采用了套件。 Vite 中还内置了一些非常新的框架，包括 Sveltekit、Astro、Hydrogen 和 SolidStart。可以肯定地说，Vite 在前端开发生态系统中已经变得非常重要。

在 Vite 2 发布 16 个月后，Vite 团队最近宣布发布 Vite 3。Vite 的主要版本每年至少发布一次，以便与 Node.js 版本的生命周期结束保持一致，并定期审查 Vite 的 API ，本质上为生态系统中的项目创建了更短的迁移路径。

在本文中，我们将介绍 Vite 3 附带的一些主要更新，并讨论如何从 Vite 2 迁移到 Vite 3。

主要 Vite 3 更新：

兼容性和 ES 模块更新

Vite 不再支持已达到 EOL 的 Node v12。 Vite 现在需要节点 14.18+ 才能运行。

Vite 现在以 ECMAScript 模块 (ESM) 的形式发布，带有 CJS 代理到 ESM 条目以实现兼容性。这对每个人来说都是个好消息，尤其是 ESM 爱好者，因为这保证了对开发人员更友好的体验。此外，现代浏览器基线现在针对支持本机 ES 模块和本机 ESM 动态导入和 import.meta 的浏览器

新的 Vite 文档

Vite 3 带有全新的令人耳目一新的文档外观，以 Vitepress 作为其默认主题。 Vitepress 是一个新的 Vite + Vue 驱动的静态站点生成器。它旨在成为一个简单、强大且高性能的静态站点生成器框架和其他站点，例如 齿轮 , vite-插件重量 和 VitePress 本身是使用 Vitepress 构建的。

Vite 2 文档仍可在 v2.vitejs.dev 现在有一个新的子域 main.vitejs.dev ，其中对 Vite 主分支的每个提交都是自动部署的。这在测试 Vite 的 beta 版本时很有用。

Webiste illustration of https://vitejs.dev/

创建 Vite 入门模板

create-vite 模板是使用您选择的框架快速测试 vite 的最直接的选项。 Vite 3 根据新文档为所有模板提供了新主题。在这里查看它们：

• Vue
• 反应
• 苗条
• 预演
• 点亮

这个主题在所有模板中共享，作为 Vite 的最小起点。但是，如果您想要一个更完整的解决方案，其中包括 linting、测试设置和其他功能，框架如 Vue 和 苗条 有官方 Vite 驱动的模板。可以在此处找到社区维护的模板列表： 真棒Vite .

开发和构建改进

让我们看看在 Vite 3 中对开发/构建体验所做的其他一些改进。

• 快速命令行： Vite CLI 进行了美学升级，其默认服务器端口现在为 5173，预览服务器侦听在 4173。这确保了 Vite 将避免与其他工具发生冲突。

Vite CLI

• 冷启动改进： Vite 现在可以避免在冷启动期间在爬取初始静态导入模块时插件注入导入时完全重新加载。
• 导入.meta.glob： 在 V3 中添加了对 import.meta.glob 的更新，例如命名导入和自定义查询。您可以在 全局导入指南
• WebAssembly 导入： WebAssembly 导入 API 已经过修订，以避免与未来标准发生冲突并使其更加灵活。阅读更多 WebAssembly 指南
• 我 改进的相关基础支持： Vite 3 现在正确支持相对基础（使用 base: ''），允许将构建的资产部署到不同的基础而无需重新构建。当在构建时不知道基础时，这很有用，例如在部署到内容可寻址网络时 IPFS .
• 束大小减小： Vite 3 的发布规模比其前身 (Vite 2) 减少了 30%

Bundle size of project using vitejs

从 Vite 2 迁移到 Vite 3

尽管 Vite 3 是最近发布的，但生态系统中的大多数框架已经在迁移。 Vite 团队组建 快速生态系统 针对 Vite 的主分支运行生态系统中领先参与者的 CI，并在引入回归之前及时收到报告。

从 Vite 2 迁移到 Vite 3 应该就像更新依赖项一样。为了成功迁移到 Vite 3，请确保您已考虑以下事项：

Node.js 支持： 确保您已安装 Node.js 14.18+/16+。不再支持 Node.js 的 12/13/15 版本。

浏览器支持： Vite 现在针对支持 原生 ES 模块 , 本机 ESM 动态导入 ， 和 导入.meta

此类浏览器包括：

• 铬 >=87
• 火狐 >=78
• 野生动物园 >=13
• 边缘 >=88

只有一小部分用户需要使用 @vitejs/plugin-legacy , 它将自动生成遗留块和相应的 ES 语言特性 polyfill。

配置选项更改： 请注意以下在 V2 中已弃用且现已在 V3 中删除的配置选项。

• 别名（切换到 解析别名 )
• 重复数据删除（切换到 解决.dedupe )
• build.base（切换到 根据 )
• build.brotliSize (切换到 build.reportCompressedSize )
• build.cleanCssOptions（Vite 现在使用 esbuild 进行 CSS 缩小）
• build.polyfillDynamicImport（使用 @vitejs/plugin-legacy 对于没有动态导入支持的浏览器）
• optimizeDeps.keepNames（切换到 optimizeDeps.esbuildOptions.keepNames )

这些是迁移之前需要注意的一些主要变化。但是，建议您查看 迁移指南 在将您的项目从 Vite 2 迁移到 Vite 3 之前，请参阅官方文档。

掌握 Vite

如果您有兴趣深入了解 Vite，请查看 Vue Mastery 课程 使用 Vite 快速构建 ，由其创建者 Evan You 教授。

如果没有 Vite 团队和生态系统维护者的共同努力，Vite 的发展是不可能实现的。如果您有兴趣帮助改进 Vite，最好的入门方法是帮助识别和修复 问题 ， 加入 不和谐 并为文档做出贡献或帮助创建插件来改进 Vite 的 DX。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/35096/14161400