use-upgrade

快速上手 ​

安装 ​

sh
npm add -D @use-upgrade/vite-plugin
sh
pnpm add -D @use-upgrade/vite-plugin
sh
yarn add -D @use-upgrade/vite-plugin
sh
bun add -D @use-upgrade/vite-plugin

常规用法 ​

在 vite.config.ts 中引入插件即可：

typescript
import useUpgradePlugin from '@use-upgrade/vite-plugin'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [useUpgradePlugin()], 
})

默认情况下，插件是不生效的，也就是说 use-upgrade 在每次网站更新时都会触发。
满足以下任一条件，才会生效，跳过某次版本提醒：

通过 Git 提交信息 ​

在最后一次 Git 提交的 message 中包含 [use-upgrade-skip]，例如：

bash
git commit -m "fix: 修复样式问题 [use-upgrade-skip]"

环境变量 ​

设置环境变量：

bash
USE_UPGRADE_SKIP = true

关于 .env 文件

Vite 在启动阶段（也包括加载此插件时）是不读取 .env 的，如果这个环境变量写在 .env 里，那么需要用 loadEnv() 才能读取到。

Vite 命令行参数 ​

在 vite build 时添加 --use-upgrade-skip 参数：

bash
vite build -- --use-upgrade-skip

手动开启 ​

typescript
useUpgradePlugin({ skip: true })

原理 ​

当上述任一条件满足时，插件会在构建产物的 index.html 的 <head> 中注入一个 <meta> 标签：

html
<meta name="useUpgradeSkip" />

use-upgrade 在请求 index.html 时，如果发现该标签，就会跳过本次版本更新的回调提醒。

标签的 name 可通过 skipMetaName 配置项来自定义；修改后，请同时修改 use-upgrade 初始化函数中同字段配置项，两边需要保持一致，否则无法正确应用。