2024 年 11 月 26 日,Vite 团队及其生态系统合作伙伴宣布推出 Vite 6,这不仅是一次简单的版本迭代,更是一次革命性的升级。
Vite 6.0 的发布,标志着我们迈入了前端工具链的新纪元。
今天,我们就来聊聊 Vite 6.0 最引人注目的亮点——全新的 Environment API!
Vite 的成长与影响
自 Vite 5 发布以来,Vite 的采用率持续增长,npm 每周下载量从 750 万次跃升至 1700 万次。Vitest 的受欢迎程度不断攀升,并开始形成自己的生态系统。
从 Storybook 推出的由 Vitest 驱动的新测试功能,到众多知名企业如 OpenAI、Google、Apple、Microsoft 等的选择,Vite 证明了自己在企业级应用中的可靠性和性能优势。
Environment API:Vite 6 的核心
Vite 6.0 引入了多项重大更新和改进,其中最引人注目的便是全新的环境 API。
这个 API 让框架作者能够提供更接近生产环境的开发体验,同时也为整个生态系统分享新的构建块。
Environment API 的核心功能包括:
多环境配置:允许定义多个环境,每个环境可以有自己的入口文件和环境变量。 环境隔离能力:提供独立的入口文件配置、环境特定的构建设置和严格的环境变量隔离。
Environment API 使用示例
下面是一个使用 Environment API 的配置示例,展示了如何为客户端和服务器端设置不同的入口文件和环境变量:
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
experimental: {
environments: {
client: {
entry: 'entry-client.tsx',
env: { baseUrl: 'http://xxx.com' }
},
server: {
entry: 'entry-server.tsx',
env: { baseUrl: 'http://xxx.com' }
}
}
}
});
在这个配置中,我们定义了两个环境:client
和 server
。
每个环境都有自己的入口文件和环境变量,这样我们可以针对不同的运行环境进行特定的构建和优化。
实际应用场景
Environment API 的引入,为以下场景带来了革命性的改变:
SSR 框架开发:客户端与服务端代码分离,环境特定的插件支持,以及精确的依赖分析。 多平台应用:Web、Desktop、Mobile 多端统一管理,平台特定的构建优化,以及条件编译支持。
其他重要更新
除了 Environment API,Vite 6.0 还带来了其他重要更新:
Node.js 支持:支持 Node.js 18、20 和 22+ 版本,移除 Node.js 21 支持。 技术升级:包括 resolve.conditions
默认值优化、JSON stringify 增强、HTML 元素资产引用扩展、Sass 现代 API 默认启用,以及库模式下的 CSS 文件名自定义。
随着 Vite 6.0 的发布,我们有理由相信,前端开发将变得更加高效和灵活。让我们一起拥抱变化,探索 Vite 6.0 带来的无限可能!