Vite 4.0 正式发布!

简介: Vite 4.0 正式发布!

下面就来看看 Vite 4.0 有哪些更新吧! 1.webp.jpg

与 Vite 3 相比,这个主版本的的更新范围更小,主要目标是升级到 Rollup 3。Vite 团队与生态系统紧密合作,以确保这个新的主要版本顺利升级。

Rollup 3

Vite 现在正在使用 Rollup 3,这使我们能够简化 Vite 的内部资源处理并有许多改进。

Vite core monorepo 框架插件

@vitejs/plugin-vue@vitejs/plugin-react 从 Vite 的第一个版本开始就是 Vite core monorepo 的一部分。这有助于在进行更改时获得紧密的反馈循环,因为同时测试和发布了 Core 和插件。

借助 vite-ecosystem-ci,可以通过在独立仓库上开发的这些插件获得此反馈,因此从 Vite 4 开始,它们已从 Vite core monorepo 中移出。

在开发过程中使用 SWC 的新 React 插件

SWC 现在是 Babel 的成熟替代品,尤其是在 React 项目中。SWC 的 React 快速重新刷新比 Babel 快很多,对于某些项目来说,SWC 现在是一个更好的选择。从 Vite 4 开始,有两个插件可用于不同的 React 项目。

(1)@vitejs/plugin-react

@vitejs/plugin-react 是一个使用 esbuild 和 Babel 的插件,以较小的包占用空间和能够使用 babel transform pipeline 的灵活性实现快速 HMR。

(2)@vitejs/plugin-react-swc (新)

@vitejs/plugin-react-swc 是一个新的插件,在构建过程中使用 esbuild,但在开发过程中将 Babel 替换为 SWC。 对于不需要非标准 React 扩展的大型项目,冷启动和热更新 (HMR) 会加快。

兼容性

现代浏览器构建现在默认以 Safari 14 为目标,以实现更广泛的 ES2020 兼容性。这意味着现代构建现在可以使用 BigInt,并且不再转译空值合并运算符。如果需要支持旧的浏览器,可以像往常一样添加@vitejs/plugin-legacy

将 CSS 作为字符串导入

在 Vite 3 中,.css 文件的默认导出可能会引入 CSS 的双重加载。

css

复制代码

import cssString from './global.css';

这种双重加载可能会发生,因为会发出.css文件,并且很可能 css 字符串也会被应用代码使用。从 Vite 4 开始,.css默认导出被弃用。在这种情况下,需要使用 ?inline 查询后缀修饰符,因为它不会发出导入的.css样式。

css

复制代码

import stuff from './global.css?inline'

其它功能

  • 预打包依赖项时支持 patch-package;
  • 更简洁的构建日志输出并切换到 kB 以与浏览器开发工具保持一致;
  • 改进 SSR 期间的错误消息。

Vite 4.0 更新详情:github.com/vitejs/vite…

相关文章
|
JavaScript 应用服务中间件 nginx
Vue打包并发布项目
Vue打包并发布项目
|
2月前
|
资源调度 JavaScript 前端开发
如何实现一个类似 vite 的脚手架并发布 npm
本文介绍了如何实现一个类似 Vite 的脚手架工具。通过详细解析和实践,文章分享了从零开始构建脚手架的过程,包括技术选型、开发步骤及发布 NPM 包的完整流程。最终目标是让用户能够通过 `yarn create electron-prokit myapp` 快速搭建 Electron 项目。项目源码可在 GitHub 上获取。
35 5
|
4月前
|
资源调度 JavaScript 索引
Vue2开发插件并发布到npm
这篇文章介绍了如何使用Vue 3、TypeScript和Vite开发一个下拉框组件`vue-amazing-selector`,并将其发布到npm,包括了项目的创建、组件开发、配置webpack、编写组件代码、导出组件、编译、npm包初始化、发布流程以及在项目中使用该插件的完整步骤。
Vue2开发插件并发布到npm
|
4月前
|
JavaScript 前端开发
什么是前端构建工具?vite和vite脚手架的关系!
【8月更文挑战第1天】前端构建工具简析
89 4
|
5月前
|
JavaScript
Vite 项目中如何去集成 Sass
Vite 项目中如何去集成 Sass
71 0
|
7月前
|
JSON Rust JavaScript
Vite 5.0 正式发布
Vite 5.0 正式发布
173 2
|
资源调度 JavaScript 前端开发
Vite2.0 正式发布,了解一下文档
Vite2.0 正式发布,了解一下文档
46 0
|
JavaScript
为老的vueCli项目添加vite支持
为老的vueCli项目添加vite支持
145 0
为老的vueCli项目添加vite支持
|
资源调度 JavaScript 前端开发
nuxt2-storybook-vite:环境搭建、基础使用 / nuxt项目组件库
nuxt2-storybook-vite:环境搭建、基础使用 / nuxt项目组件库
343 0
|
前端开发
关于我写了一个vite插件那些事
在我们开发的过程中有开发模式和生产模式,那有些测试代码会在开发模式的时候使用,在生产环境要删掉,一般是手动删除,另一种就是判断环境变量,但是环境变量不好处理template代码以及css代码,为此我写了一个插件将解决以上问题。
221 0
关于我写了一个vite插件那些事
下一篇
DataWorks