Vite 6.0 發布:簡化開發,提升性能,迎接現代 Web 挑戰
此版本的Vite 6.0带来了多项更新和改进,旨在简化开发工作流程,提高性能,并解决现代网页开发中的各种挑战。通过引入实验性环境 API 和现代化工具链,Vite 6.0 继续作为开发者的多功能解决方案而不断进化。以下是新功能、生态系统的发展以及此次发布中的重要公告的全面概述。
Vite 生态系统的增长👉 关注我们的 Telegram 频道,实时了解最新消息!我们分享与 React、JavaScript、TypeScript 等相关的最新资讯和有趣的内容。
在过去的一年里,Vite 见证了显著的增长,其每周 npm 下载量从 750 万增至 1700 万。主要框架如Astro、Nuxt、SvelteKit、Solid Start、Qwik City 和RedwoodJS,都在利用 Vite 实现更快的构建速度,并提供更好的开发体验。包括OpenAI、Google、Microsoft、NASA 和Shopify等在内的知名科技公司也已将 Vite 集成到其工作流程中,突显了它在各个行业中的广泛应用。
包括 OpenAI、Google、Apple、Microsoft、NASA、Shopify、Cloudflare、GitLab 和 Reddit 在内的多家大公司已经将 Vite 整合进了他们的流程,突显了它在科技行业的日益增长的影响力。为了促进合作和分享见解,一个新的倡议鼓励组织分享他们使用 Vite 的经验,展示其在各个领域的应用效果。
ViteConf 2024 的精彩亮点第三次 ViteConf ,由 StackBlitz 主办,吸引了开发者和贡献者,共同庆祝该工具的进步和成就。今年的活动规模更是达到了前所未有的程度,介绍了一系列重要的新进展。
- VoidZero: VoidZero 正在开发 Rolldown 和 Oxc,它们将很快与 Vite 集成。
- bolt.new: StackBlitz 发布的这款创新的 bolt.new 应用结合了 Claude 和 WebContainers,让开发者可以无缝地开发、运行和部署全栈应用程序。
- Storybook 的测试功能增强: Storybook 展示了其新的测试功能,这些功能由 Vitest 提供支持,为更强大的工作流程铺平了道路。
除了这些进步之外,Vite 发布了全新简洁的登陆页,位于 vite.dev。这个新设计标志着 Vite 发展的新篇章,反映了它在 Web 开发界日益增长的重要性。
值得注意的更新和改进resolve.conditions: 的默认设置
此前,resolve.conditions 是一个空数组 ([]),一些条件会自动在内部添加。在更新后的版本里,例如对于 resolve.conditions,可以设置为 ['module', 'browser', 'development|production'],对于 ssr.resolve.conditions,可以设置为 ['module', 'node', 'development|production'],这样的设置不再自动包含,必须手动设置。
开发和生产的价值取决于 process.env.NODE_ENV。默认值现在为 defaultClientConditions 和 defaultServerConditions。如果你之前使用了类似 ['custom'] 的自定义条件,你需要更新为 ['custom', ...defaultClientConditions]。
使用 JSON.stringify 进行增强的 JSON 处理
在 Vite 5 中,设置 json.stringify: true 会自动关闭 json.namedExports。而在 Vite 6 中,即使设置了 json.stringify: true,json.namedExports 依然会保持开启状态。要禁用命名导出,您也可以显式地设置 json.namedExports: false。此外,Vite 6 将 json.stringify 的默认值设为 'auto',这只会对大的 JSON 文件进行序列化。要完全关闭这个功能,请设置 json.stringify: false。
HTML中的扩展资产处理功能
Vite 5 中,只有少数的 HTML 元素,如 <link href> 和 <img src>,可以引用打包所需的资源。Vite 6 还对更多的 HTML 元素提供了支持(具体信息请参阅 HTML 文档)。如果你想跳过某些元素的处理,请使用 vite-ignore 属性(例如: 添加 vite-ignore 属性)。
默认采用的现代Sass API
现代的 Sass API 现在是默认的,取代了旧版 API。如果你想继续使用旧版,可以在设置中将 css.preprocessorOptions.sass.api 设置为 'legacy',不过请注意,这一选项将在下一个主要版本中被移除。有关迁移的详细信息,请参阅 Sass 文档。
自定义CSS输出文件名格式
之前,在库模式下,CSS 输出文件的名称始终是 style.css。现在,默认文件名是由 package.json 中的 "name" 生成的。你可以使用 build.lib.cssFileName 来自定义文件名。如果你想继续使用 style.css,只需将 build.lib.cssFileName 设置为 'style' 即可。
postcss-load-config 的更新
postcss-load-config 已从 v4 升级到 v6 版本。现在需要使用 tsx 或 jiti 来替换 ts-node,以支持 TypeScript 配置。现在 YAML 配置需要加载 yaml 库。
Vite 6 中的新 Environment API 缩小了开发环境与生产环境之间的差距,使开发人员能够构建接近生产环境的工具和工作流程。这一进步为增强 JavaScript 生态系统提供了新的机会。
这对开发者来说意味着什么呢?
- 如果是SPA开发人员: 您的工作流程将保持不变。Vite 将继续提供流畅快速的体验。
- 如果是自定义SSR应用的开发人员: 框架作者和插件维护者现在可以使用环境 API 优化其针对SSR的开发流程。Vite 6 保持向后兼容,确保现有自定义SSR应用的平滑过渡。
- 如果是插件开发人员: 新API使插件维护者能够利用提供更高控制和精度的特性来构建更强大的集成,无论是在开发还是生产环境中。
借助实验性环境 API,Vite 让开发者在保持易用性和灵活性的同时更进一步。
Node.js 支持功能Vite 6 继续兼容 Node.js 18、20 和 22,不再兼容 Node.js 21。未来发布的版本很可能会需要更新版本的 Node.js,因为旧版本达到生命周期结束(EOL)阶段。
结论部分Vite 6.0 体现了精心设计的开发理念,引入了增强工作流程的功能,同时保持了前瞻性的视野和理念。其不断扩展的生态系统和社区、被大公司广泛采用以及对现代框架的支持,凸显了它在塑造未来 web 开发中的重要性。无论你是开始一个新项目还是升级现有项目,Vite 6.0 都能让开发者轻松地创建高效且高质量的应用程序。它不仅仅是一个工具,更是现代前端开发的基石之一。
共同學習,寫下你的評論
評論加載中...
作者其他優質文章
