Vite 5.0有哪些新变化?

##Rollup 4

Vite 现在使用 Rollup 4,它也带来了一些重大的变化,特别是:

  • 导入断言(assertions 属性)已被重命名为导入属性(attributes 属性)。
  • 不再支持 Acorn 插件。
  • 对于 Vite 插件,this.resolve 的 skipSelf 选项现在默认为 true。
  • 对于 Vite 插件,this.parse 现在只支持 allowReturnOutsideFunction 选项。

你可以阅读 Rollup 的发布说明 中的破坏性变更,了解在 build.rollupOptions 中构建相关的变更。

如果你正在使用 TypeScript,请确保将 moduleResolution: ‘bundler’(或 node16/nodenext)设置为 Rollup 4 需要它。或者你可以设置 skipLibCheck: true。

##弃用CJS节点API

Vite 的 CJS Node API 已弃用。调用 时require(‘vite’),现在会记录弃用警告。应该更新文件或框架以导入 Vite 的 ESM 版本。

在一个基础的Vite项目中,需要确保:

  1. 文件vite.config.js内容使用ESM语法。
  2. 最接近的package.json文件具有"type": “module”,或使用.mjs/.mts扩展名,例如vite.config.mjs或vite.config.mts。

对于其他项目,有一些通用方法:

  • 将 ESM 配置为默认值,如果需要,选择加入 CJS:添加"type": "module"到项目中package.json。所有*.js文件现在都解释为 ESM,并且需要使用 ESM 语法。您可以使用扩展名重命名文件.cjs以继续使用 CJS。
  • 将 CJS 保留为默认值,如果需要,选择加入 ESM:如果项目package.json没有"type": “module”,则所有*.js文件都将解释为 CJS。您可以使用扩展名重命名文件.mjs以改用 ESM。
  • 动态导入Vite:如果需要继续使用CJS,可以import(‘vite’)改为使用动态导入Vite。这要求您的代码是在async上下文中编写的,但仍应易于管理,因为 Vite 的 API 大部分是异步的。

##重新设计 define 和 import.meta.env.* 的替换策略

在Vite 4 中,define 和 import.meta.env.* 特性在开发和构建中使用的是不同的替换策略:

  • 在开发时,这两个特性分别作为全局变量注入到 globalThis 和 import.meta 中。
  • 在构建时,这两个特性都使用正则表达式进行静态替换。

这导致在尝试访问这些变量时,开发和构建存在一致性问题,有时甚至导致构建失败。例如:

// vite.config.js
export default defineConfig({define: {__APP_VERSION__: JSON.stringify('1.0.0'),},
})
const data = { __APP_VERSION__ }
// 开发:{ __APP_VERSION__: "1.0.0" } ✅
// 构建:{ "1.0.0" } ❌const docs = 'I like import.meta.env.MODE'
// 开发:"I like import.meta.env.MODE" ✅
// 构建:"I like "production"" ❌

Vite 5 通过在构建中使用 esbuild 来处理替换,使其与开发行为保持一致。

##SSR 外部模块值现在符合生产环境行为

在 Vite 4 中,服务器端渲染的外部模块被包装为 .default 和 .__esModule 处理,以实现更好的互操作性,但是它并不符合运行时环境(例如 Node.js)加载时的生产环境行为,导致难以捕获的不一致性。默认情况下,所有直接的项目依赖都是 SSR 外部化的。

Vite 5 现在删除了 .default 和 .__esModule 处理,以匹配生产环境行为。在实践中,这不应影响正确打包的依赖项,但是如果你在加载模块时遇到新的问题,你可以尝试以下重构:

// 之前:
import { foo } from 'bar'// 之后:
import _bar from 'bar'
const { foo } = _bar
// 之前:
import foo from 'bar'// 之后:
import * as _foo from 'bar'
const foo = _foo.default

注意,这些更改符合 Node.js 的行为,因此也可以在 Node.js 中运行这些导入进行测试。如果更喜欢坚持使用之前的方式,也可以将 legacy.proxySsrExternalModules 设置为 true。

##worker.plugins 现在是一个函数

在 Vite 4 中,worker.plugins 接受一个插件数组 ((Plugin | Plugin[])[])。从 Vite 5 开始,它需要配置为一个返回插件数组的函数 (() => (Plugin | Plugin[])[])。这个改变是为了让并行的 worker 构建运行得更加一致和可预测。

##允许路径包含 . 回退到 index.html

在 Vite 4 中,即使 appType 被设置为 ‘SPA’(默认),访问包含 . 的路径也不会回退到 index.html。从 Vite 5 开始,它将会回退到 index.html。

##调整开发和预览 HTML 服务行为

在 Vite 4 中,开发服务器和预览服务器会根据 HTML 的目录结构和尾部斜杠的不同来提供 HTML。这会导致在测试构建后的应用时出现不一致的情况。Vite 5 重构成了一个单一的行为,如下所示,给定以下文件结构:

├── index.html
├── file.html
└── dir└── index.html
请求过往版本 (dev)过往版本 (preview)现在 (dev & preview)
/dir/index.html/dir/index.html/dir/index.html/dir/index.html
/dir/index.html (SPA fallback)/dir/index.html/index.html (SPA fallback)
/dir//dir/index.html/dir/index.html/dir/index.html
/file.html/file.html/file.html/file.html
/file/index.html (SPA fallback)/file.html/file.html
/file//index.html (SPA fallback)/file.html/index.html (SPA fallback)

##Manifest 文件现在默认生成到 .vite 目录中

在 Vite 4 中,manifest 文件(build.manifest,build.ssrManifest)默认会生成在 build.outDir 的根目录中。

从 Vite 5 开始,这些文件将默认生成在 build.outDir 中的 .vite 目录中。这个改变有助于解决当公共文件被复制到 build.outDir 时,具有相同 manifest 文件名时的冲突。

##CLI 快捷功能键需要一个额外的 Enter 按键

CLI 快捷功能键,例如 r 重启开发服务器,现在需要额外的 Enter 按键来触发快捷功能。例如,r + Enter 可以重新开发服务器。

这个改动防止 Vite 吞噬和控制操作系统特定的快捷键,允许更好的兼容性,当将 Vite 开发服务器与其他进程结合使用时,并避免了之前的注意事项。

##移除 --https 标志和 https: true

resolvePackageEntry 和 resolvePackageData API 已被移除,因为它们暴露了 Vite 的内部机制,并在过去阻碍了 Vite 4.3 的潜在优化。这些 API 可以被第三方包替代,例如:

  • resolvePackageEntry: import.meta.resolve 或者 import-meta-resolve 库。

  • resolvePackageData: 与上述相同,向上爬取包目录以获取根 package.json。或者使用社区的 vitefu 库。

  • import { resolve } from 'import-meta-env'
    import { findDepPkgJsonPath } from 'vitefu'
    import fs from 'node:fs'const pkg = 'my-lib'
    const basedir = process.cwd()// `resolvePackageEntry`:
    const packageEntry = resolve(pkg, basedir)// `resolvePackageData`:
    const packageJsonPath = findDepPkgJsonPath(pkg, basedir)
    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'))
    

##移除部分废弃 API

  • CSS 文件的默认导出(例如 import style from ‘./foo.css’):使用 ?inline 查询参数代替
  • import.meta.globEager:使用 import.meta.glob(‘*’, { eager: true }) 来代替
  • ssr.format: ‘cjs’ 和 legacy.buildSsrCjsExternalHeuristics(#13816)
  • server.middlewareMode: ‘ssr’ 和 server.middlewareMode: ‘html’:使用 appType + server.middlewareMode: true 来代替(#8452)

##扩展链接

新手入门-在Vue框架中嵌入前端Excel表格插件(上)

VUE 3 组件开发实战 – 在线电子表格文档编辑(一)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/154552.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《研发效能 100 问》首发,多位专家解读「研效提升」的破局之道?

为了可以帮助更多研发管理者和研发效能负责人,了解构建研发效能体系应从何做起,以及在构建过程中需要解决哪些疑难问题,有哪些最佳实践可以借鉴。2023 年 7 月,思码逸发起,由行业知名研发效能专家张乐老师担任出品人&a…

KT142C语音芯片客户反馈电脑端的配置文件,打开都正常,但是拷贝到KT142C内部就乱码

KT142C语音芯片客户反馈电脑端的配置文件,打开都正常,但是拷贝到KT142C内部就乱码 首先解释一下原理,KT142C内置的330Kbyte空间可供用户下载,实际上拿出程序部分的空间 作为声音存储介质的,也就是说,代码空…

[每周一更]-(第72期):Docker容器瘦身方式

Docker清理缓存操作 在构建测试的过程中,由于是自家小服务器,资源紧张,发现磁盘一直爆满,删除一些大镜像还是会占满的情况,就想到是不是也是缓存问题。 经过查询确实是build过程中的缓存启发的占用问题。 因此引出以下…

【自动驾驶解决方案】C++取整与保留小数位

一、C基础 1.1double型保留小数为&#xff0c;并以字符输出 #include <iostream> #include <sstream> #include <iomanip> // 包含std::fixedint main() {//浮点数double number 3.1415926;//转换工具类streamstd::stringstream stream;stream << s…

【微信小程序】2023年11月版本 关于小程序隐私保护指引设置的公告 | 修改微信小程序隐私保护 |小程序无法获取用户昵称 头像 性别 等问题

一、登录小程序后台 《关于小程序隐私保护指引设置的公告》 https://mp.weixin.qq.com/cgi-bin/announce?actiongetannouncement&announce_id11691660367cfUvX&version&langzh_CN&token 上面是官方的文档&#xff0c;但是由于比较陈旧&#xff0c;和现在的页面…

基于单片机的空气质量实时监测系统(论文+源码)

1. 系统设计 通过文献和市场调查&#xff0c;本设计的实现方案框架是以单片机为核心控制处理器搭建外围的功能模块如温度传感器模块、湿度传感器检测模块、二氧化碳传感器检测设备模块、无线通信模块和蜂鸣器声光报警提示模块来实现&#xff0c;辅以显示模块来展示。 该系统通…

利用ssh端口转发

你的本地机器IP是192.168.1.100&#xff0c;你有一个远程服务器&#xff0c;假设IP是 203.0.113.0&#xff0c;上面运行了一个web服务在 80 端口 由于某种原因&#xff0c;你在本地机器&#xff08;IP是192.168.1.100&#xff09;不能直接访问这个web服务&#xff0c;但你可以S…

数据仓库

一. 各种名词解释 1.1 ODS是什么&#xff1f; ODS层最好理解&#xff0c;基本上就是数据从源表拉过来&#xff0c;进行etl&#xff0c;比如mysql 映射到hive&#xff0c;那么到了hive里面就是ods层。 ODS 全称是 Operational Data Store&#xff0c;操作数据存储.“面向主题的…

Java 异常处理、继承、重写/重载

一、java异常处理&#xff1a; 三种类型的异常&#xff1a;检查性异常、运行时异常、错误。 所有的异常类是从java.lang.Exception类继承的子类。Exception类是Throwable类的子类。除了Exception类外&#xff0c;Throwable还有一个子类Error。 异常类有两个主要的子类&#…

OpenAI宫斗,尘埃落定,微软成最大赢家

周末被OpenAI董事会闹剧刷屏,ChatGPT之父Sam Altman前一天被踢出董事会,免职CEO,后一天重返OpenAI,目前结局未知。 很多同学想要围观,缺少背景知识,这里老章为大家简单介绍前因后果及涉及的人物,时间线,让大家轻松围观。 备好瓜子,开始。 1、主角 先看一张图,看一…

Unity PackageManager 在离线环境下使用

在一台上网的电脑上运行工程C:\Users\XXX\AppData\Local\Unity\cache\npm\packages.unity.com 目录下的包们拷贝到不上网的电脑即可。 如果有异常&#xff0c;则清空 C:\Users\XXX\AppData\Local\Unity\cache\packages\packages.unity.com 目录和项目工程下Library\Package…

Python学习(打基础版)

以前只是大致的了解&#xff0c;现在比较完整的整理一下笔记&#xff0c;以后工作可能会用到。 学习地址如下所示&#xff1a;黑马程序员python教程&#xff0c;8天python从入门到精通&#xff0c;学python看这套就够了_哔哩哔哩_bilibili 第一章 环境配置 1 初识Python 人…

Ubuntu Server download

前言 Ubuntu——公共云、数据中心和边缘上最受欢迎的 Linux 发行版。自成立以来&#xff0c;Ubuntu 一直在获得市场份额&#xff0c;截至今天已接近 50%。 Ubuntu Server download VersionUbuntu Server 其它主机型号版本Ubuntu AMD历史版下载百度云Ubuntu Server all Ubuntu…

Redis内存满了会宕机吗

当 Redis 的内存数据满了&#xff0c;它不会立即宕机。Redis 会根据一些内存管理策略来处理内存数据满的情况&#xff0c;具体行为取决于你的 Redis 配置和所使用的版本。 处理方式 一般来说&#xff0c;当 Redis 内存数据满了&#xff0c;以下是可能发生的情况&#xff1a; …

VivadoAndTcl: read_xdc

读取一个或者多个物理和时序约束。 read_xdc constraints0.xdc read_xdc {constraints0.xdc constraints1.xdc}

阿里8年经验之谈 —— 分享一次接口性能摸底测试过程!

接口性能测试是用于验证应用程序中的接口是否可以满足系统的性能要求的一种测试方法。确定应用程序在各种负载条件下的性能指标&#xff0c;例如响应时间、吞吐量、并发性能等&#xff0c;以便提高系统的性能和可靠性。本文主要讲述接口性能测试从前期准备、方案设计到环境搭建…

SQL常见函数整理 —— LAG() 向上偏移

1. 用法 窗口函数&#xff0c;用于访问窗口中当前行之前的行的数据。该函数可以根据需要计算当前行之前的值&#xff0c;使我们能够轻松地比较不同行之间的差异和变化。 2. 基本语法 LAG(column, offset, default_value) OVER (ORDER BY column)column&#xff1a;代表在返回…

【香橙派】实战记录1——简介及烧录 Linux 镜像

文章目录 一、简介1、参数2、结构3、其他配件4、下载资料 二、基于 Windows PC 将 Linux 镜像烧写到 TF 卡的方法1、使用 balenaEtcher 烧录 Linux 镜像的方法2、效果 一、简介 Orange Pi Zero 3 香橙派是一款开源的单板卡片电脑&#xff0c; 新一代的arm64开发板&#xff0c;…

百度搜索万亿规模特征计算系统实践

作者 | Jay 导读 本文主要介绍百度搜索在全网万亿级规模内容做内容理解的工程实践&#xff0c;涉及机器学习工程化、资源调度、存储优化等多个Topic。 全文6648字&#xff0c;预计阅读时间17分钟。 01 业务背景 百度收录了互联网海量内容&#xff0c;要索引这些内容&#xff0…