前端实现发布版本，浏览器自动刷新

2024-07-09

376 字约 2 分钟

...

使用nodejs脚本生成版本信息json文件 + 监听页面显示和隐藏会触发的visibilitychange（页面显示和隐藏）事件（可以随意使用各种监听方式）

实现原理：

1、使用nodejs编写脚本，获取package.json版本信息，并保存为json文件，存放在构建打包的目录下（比如，public目录）

2、使用页面显示和隐藏会触发的visibilitychange事件，监听页面的显示和隐藏操作，如果页面显示，则请求打包放在dist根目录下的版本信息json文件，对比当前打包版本的version与历史版本信息json文件中version是否一致，如果不一致，则触发浏览器刷新

3、vite打包项目使用.env文件 + import.meta.env保存当前打包变量（webpack打包项目可以使用definePlugin插件 + process.env 保存变量）

1、使用nodejs编写获取package.json版本信息的脚本

import { execSync } from 'child_process'  
import fs from 'fs'
import dotenv from 'dotenv' 
import dayjs from 'dayjs'



const versionInfoPath = 'versionInfo.json' 
const pagePath = 'package.json'
const publicPath = 'public' 
const autoPush = false 
const isVite = true 
let pageInfo = {}


let versionInfoObj = {} 



if (fs.existsSync(versionInfoPath)) {
  versionInfoObj = JSON.parse(fs.readFileSync(versionInfoPath).toString())
}

if (fs.existsSync(pagePath)) {
  pageInfo = JSON.parse(fs.readFileSync(pagePath).toString())
}


if (pageInfo && versionInfoObj.version === pageInfo.version) {
  console.warn('\x1B[33m%s\x1b[0m', 'warning: 当前的git版本数据已经存在了!\n')
} else {

  versionInfoObj = {
    version: pageInfo.version,
    name: pageInfo.name,
    date: dayjs().format('YYYY-MM-DD HH:mm:ss'),
  }
  const saveInfoStr = JSON.stringify(versionInfoObj, null, 2)
  fs.writeFileSync(versionInfoPath, saveInfoStr)

  
  console.log(
    '\x1b[32m%s\x1b[0m',
    `execute success: file address is ${process.cwd()}/${versionInfoPath}\n`,
  )
}


if (fs.existsSync(publicPath)) {
  fs.writeFileSync(
    `${process.cwd()}/${publicPath}/${versionInfoPath}`,
    fs.readFileSync(versionInfoPath),
  )
}


if (isVite) {
  

  const envPath = `${process.cwd()}/.env`
  
  const envContent = fs.readFileSync(envPath, {
    encoding: 'utf-8',
  })

  
  const envVariables = dotenv.parse(envContent)
  const versionInfoStr = JSON.stringify(versionInfoObj)
  
  envVariables.VITE_GIT_INFO = versionInfoStr

  
  const updatedEnvContent = Object.entries(envVariables)
    .map(([key, value]) => `${key}=${value}`)
    .join('\n')

  
  console.log(updatedEnvContent)
  fs.writeFileSync(envPath, updatedEnvContent, { encoding: 'utf-8' })

  console.log('\x1b[32m%s\x1b[0m', '.env 文件已更新')
}

2、配置执行获取git版本信息脚本命令



"scripts": {
   "build:git": "npm run get-git && vite build",
    "get-git": "node scripts/useNodeGetGitInfo.js",
},

3、项目入口JS文件，监听`visibilitychange`事件

 
  const gitInfo = import.meta.env.VITE_GIT_INFO
  const gitInfoObj = gitInfo && JSON.parse(gitInfo)
  if (document.visibilityState === 'hidden') return
  fetch(`/versionInfo.json?v=${Date.now()}`)
    .then((res) => {
      return res.json()
    })
    .then((data) => {
      if (data.version !== gitInfoObj.version) {
        location.reload()
      }
    })