前端发布项目自动更新

思路：无论vue还是react打包都会有dist文件夹，内部有index.html。我是想根据index.html中的script src地址是否改变，判断项目是否有新内容。

具体代码如下

首先先拿到生产环境中index.html文本，由于是单页面应用使用fetch('/?_stamp='+Date.now())来拿到html文本。并获取所有的src地址。

const scriptReg = /\[^"']+)/gm;

async function getScriptSrcs() {
  const html = await fetch('/?_timestamp=' + Date.now()).then((res) =>
    res.text(),
  );
  scriptReg.lastIndex = 0;
  let result = [];
  let match;
  while ((match = scriptReg.exec(html))) {
    result.push(match.groups.src);
  }

  return result;
}

全局定义lastSrcs表示旧的地址数组，然后和新的newScripts对比，如果长度不同或者某一项不同则表示项目有新内容更新。

async function needUpdate() {
  const newScripts = await getScriptSrcs();

  if (!lastSrcs) {
    lastSrcs = newScripts;
    return false;
  }
  let result = false;
  if (lastSrcs.length !== newScripts.length) {
    result = true;
  }
  for (let i = 0; i < lastSrcs.length; i++) {
    if (lastSrcs[i] !== newScripts[i]) {
      result = true;
      break;
    }
  }
  lastSrcs = newScripts;
  return result;
}

最终我们使用轮询的方式监听是否变化。

const autoRefresh=()=>{
    setTimeout(async()=>{
        const willUpdate = await needUpdate();
         if (willUpdate) {
          const result = confirm('页面有更新，请刷新页面');
         if (result) {
            location.reload();
          }
        }
        autoRefresh();
    },5000);
}

最后在main.ts中引入即可。有什么问题私信哦。