大家好,我叫CUGGZ。7月13日,Vite3.0正式发布,堪称下一代前端工具链。Vite团队决定至少每年发布一个新的Vite主版本,以与Node.js的EOL保持一致,并借此机会定期审查Vite的API,为生态系统中的项目提供更短的迁移路径。去年2月,Vite2正式发布。从那时起,它的使用量不断增长,每周npm下载量超过100万次。发布后,迅速形成了一个庞大的生态系统。Vite正在推动一场新的网络框架创新竞赛。Nuxt3默认使用Vite。SvelteKit、Astro、Hydrogen和SolidStart都是用Vite构建的。Laravel现在已经决定默认使用Vite。ViteRuby展示了Vite如何改进RailsDX。作为Jest的Vite原生替代品,Vitest正在取得长足进步。Storybook使用Vite作为官方构建器。而且这个名单还在继续增长。大多数这些项目的维护者都参与了Vite核心的改进,与Vite团队和其他贡献者密切合作。新文档新的v3文档发布,可以到vitejs.dev查看。Vite现在使用支持深色模式的新VitePress默认主题。生态中的几个项目的文档也已经迁移到VitePress(Vitest、vite-plugin-pwa和VitePress)。如果需要访问Vite2的文档,可以到v2.vitejs.dev中查看。另外还有一个新的main.vitejs.dev,每次提交到Vite主分支都会自动部署。这在测试Beta版本或为核心开发做出贡献时很有用。官方西班牙语翻译已添加到文档中。目前,官网文档提供英文、简体中文、日文和西班牙文版本。CreateVitestartertemplatecreate-vite模板是一个很好的工具,可以用你最喜欢的框架快速测试Vite。在Vite3中,所有模板都有一个与新文档一致的新主题。线上体验模板:Vite:https://stackblitz.com/edit/vitejs-vite-qff3vk?file=index.html&terminal=devVite+Vue:https://stackblitz.com/edit/vitejs-vite-4hxjez?file=index.html&terminal=devVite+Svelte:https://stackblitz.com/edit/vitejs-vite-f3pc98?file=index.html&terminal=devVite+React:https://stackblitz.com/edit/vitejs-vite-s1q16q?file=index.html&terminal=devVite+Preact:https://stackblitz.com/edit/vitejs-vite-rndlvv?file=index.html&terminal=devVite+Lite:https://stackblitz.com/edit/vitejs-vite-8zaxwn?file=index.html&terminal=dev这个主题现在被所有模板共享。对于更完整的解决方案,包括linting、测试设置和其他功能,可以使用基于Vite的官方模板,例如create-vue和create-svelte。AwesomeVite有一个社区维护的模板列表。很棒的Vite:https://github.com/vitejs/awesome-vite#templates。开发改进ViteCLIVITEv3.0.0在320毫秒内准备就绪?本地:http://127.0.0.1:5173/?网络:使用--host来公开除了对CLI的外观改进之外,默认的开发服务器端口现在是5173,而预览服务器的端口现在是4173。这一变化保证了Vite避免与其他工具的冲突。改进的WebSocket连接策略Vite2的痛点之一是在代理后面运行时配置服务器。Vite3更改了默认连接方案,因此在大多数情况下它可以开箱即用。所有这些设置现在都通过vite-setup-catalogue进行测试,作为Vite生态系统CI的一部分。冷启动改进Vite现在可以避免在冷启动期间完全重新加载插件在获取最初静态导入的模块时注入导入。import.meta.globimport.meta.glob支持被覆盖。以下是Glob导入指南中的新增内容:多个匹配模式可以作为数组传递。import.meta.glob(['./dir/*.js','./another/*.js'])现在支持否定匹配模式(前缀为!)以忽略某些文件。import.meta.glob(['./dir/*.js','!**/bar.js'])可以指定命名导入以改进tree-shaking。import.meta.glob('./dir/*.js',{import:'setup'})可以使用查询选项为导入提供自定义查询以供其他插件使用。import.meta.glob('./dir/*.js',{query:{custom:'data'}})eager作为Glob导入的标识符传入。import.meta.glob('./dir/*.js',{eager:true})使WASM导入与未来标准保持一致修改WebAssembly导入API以避免与未来标准发生冲突并使其更加灵活:importinitfrom'./example.wasm?init'init().then((instance)=>{instance.exports.test()})构建改进ESM成为SSR构建的默认格式生态系统中的大多数SSR框架已经使用ESM构建。因此,Vite3将ESM作为SSR构建的默认格式。这使我们能够简化之前的SSR外部化启发式方法,它默认外部化依赖项。改进的RelativeBase支持Vite3现在可以正确支持RelativeBase(使用base:''),允许构建工件部署到不同的base而无需重建。当在构建时不知道基础时,这很有用。减少构建大小Vite关心其发布和安装足迹;快速安装新应用程序是一项功能。Vite打包了它的大部分依赖项,并尽可能尝试使用现代轻量级替代方案。继续这个持续的目标,Vite3的发布大小比v2小30%。Bug修复在过去的三个月里,Vite上未解决的问题数量从770个减少到400个。而这种下降是在新打开的PR处于历史最高水平的时候发生的。兼容性说明Vite不再支持Node.js12,现在需要Node.js14.18+。Vite现在作为ESM发布。ModernBrowserBaseline现在支持具有原生ES模块、原生ESM动态导入和import.meta功能的浏览器。ViteCore升级在开发Vite3的同时,也提升了协作者为ViteCore贡献的体验。单元和E2E测试已迁移到Vitest,提供更快、更稳定的DX。VitePress构建现在作为CI的一部分进行测试。Vite升级到pnpm7,跟随生态系统的其余部分。Playgrounds已从packages目录移至/playgrounds。包和游乐场现在是“类型”:“模块”。插件现在使用unbuild构建,plugin-vue-jsx和plugin-legacy已移至TypeScript。生态系统为v3准备就绪Vite团队与生态系统中的项目密切合作,以确保Vite支持的框架为Vite3做好准备。vite-ecosystem-ci允许我们针对Vite的主分支运行生态系统中主要参与者的CI,并接收在引入回归之前及时报告。v3版本将很快与大多数使用Vite的项目兼容。下一步Vite团队将在接下来的几个月里确保所有基于Vite构建的项目顺利过渡。Rollup团队正在开发下一个主要版本,它将在未来几个月内发布。一旦Rollup插件生态系统有时间更新,Vite团队将跟进一个新的主要版本。这将是今年引入更多重大变化的另一个机会,可以利用这些变化来稳定此版本中引入的一些实验性功能。
