版本检测 version check

unplugin-version-check

Project version check

描述

当我们构建一个网站系统的时候，这个时候可能需要用到实时版本检测更新，解决方案其实已经有了很多，但是现在前端框架和构建工具很多很杂，这里主要是对主流的几个构建工具做一个插件处理。主要是有vite webpack rspack，我们写一个插件，同时兼容三个构建工具，这里最重要的是unplugin这个库，有兴趣的朋友可以了解了解。

项目地址在这里github:unplugin-version-check，有兴趣的朋友可以提提pr意见，顺带也可以帮点点star😂

Install

npm install -D unplugin-version-check 

支持

type	status
vite	✅
webpack	✅
rspack	✅

使用

vite

vite.config.js

import versionCheck from 'unplugin-check-version/vite'
export default {
    plugins:[versionCheck(/*option*/)]
}

webpack

webpack.config.js

const versionCheck = require('unplugin-check-version/webpack')
module.exports = {
    plugins:[versionCheck.default(/*option*/)]
}

rspack

rspack.config.js

const versionCheck = require('unplugin-check-version/rspack')
module.exports = {
    plugins:[versionCheck.default(/*option*/)]
}

Option

interface Position {
  top?: string | number
  bottom?: string | number
  left?: string | number
  right?: string | number
}
// Background v0.1.10 新增 
// eg: { size: 'auto 100%', position:'right',repeat: 'no-repeat',image:''} 
// background 的属性都是css background对应的属性，size 对应 background-size,position 对应background-position
type Background = Record<string, any> 

-----------版本v0.1.10 ------------

• 🚀 feature ：systemName 支持函数类型
• 🚀 feature ：添加background 参数

属性名	描述	类型	默认值
systemName (v0.1.10 添加了函数类型)	系统名称	string |()=>string	"systemName"
time	间隔触发时间	number	30000
position	提示框位置	Position	--
title	提示框的标题	string	"Discover new version"
describe	提示框描述	string	"Detected a new version of the system, please update!"
btnText	更新按钮文字	string	"Update now "
overlay	提示框的蒙层	boolean	true
background v0.1.10	提示框背景设置	Background	--

配置示例

{
        position: {
            bottom: 12,
            right: 12
        },
        title: '发现新版本',
        describe: '检测到系统有新版本，请更新！',
        btnText: '立即更新',
        overlay: false,
        background: {
            size: 'auto 100%',
            repeat: 'no-repeat',
            image: "url(data:image/jpeg;base64,i.........)"
        }
    }

结果：