Vite4新特性介绍,相较于Vite3有哪些新功能?
- Vue学习
- 2022-07-23
- 1993热度
- 0评论
官方介绍更新日志:https://vitejs.dev/blog/announcing-vite3.html#dev-improvements
Github更新日志:https://github.com/vitejs/vite/blob/v4.4.1/packages/vite/CHANGELOG.md
Vite3更新日志
Vite 不再支持 Node v12,因为它已经进入了 EOL 阶段。现在你必须使用 Node 14.18+ 及以上版本。
迁移指南:https://cn.vitejs.dev/guide/migration.html#general-changes
1.Terser
现在是一个可选依赖。如果你使用的是 build.minify: 'terser'
,需要手动安装.
npm i -D terser
2.import.meta
import.meta.glob 的 key 现在是相对于当前模块。
// 文件:/foo/index.js
const modules = import.meta.glob('../foo/*.js')
// 转换为:
const modules = {
- '../foo/bar.js': () => {}
+ './bar.js': () => {}
}
多个模式可以作为数组传递
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' } })
import.meta.globEager 已经弃用,使用 import.meta.glob('*', { eager: true }) 来代替。
import.meta.glob('./dir/*.js', { eager: true })
3.自动生成 https 证书
当使用 https 时需要一个合法可用的证书。在 Vite v2 中,如果没有配置证书,Vite 会自动生成和缓存一个自签名的证书。 从 Vite v3 开始,我们推荐手动创建你自己的证书。如果你仍想要使用 v2 中的自动生成,该功能可以通过添加 @vitejs/plugin-basic-ssl 到项目插件中来实现。
import basicSsl from '@vitejs/plugin-basic-ssl'
export default {
plugins: [basicSsl()]
}
Vite4更新日志
官方文档:https://vitejs.dev/blog/announcing-vite4.html
安装后,同步升级@vitejs/plugin-vue、@vitejs/plugin-react到4.0版本即可。
安装Vite
要求 { node: '^14.18.0 || >=16.0.0' },直接指定版本升级好多依赖项报错,推荐重新安装重新配置。
npm create vite@latest