【前端功能点】字体包压缩

思路

1. 创建一个前端项目，该项目只需要展示一个页面

2. 点击提交，会修改font-spider.html这个文件
3. 修改成功后，执行写好的shell.sh脚本生成压缩后的字体包
4. 复制出压缩后的字体包使用即可

为什么要这么麻烦？这样做有什么好处？

原因

1. font-spider 包对html文件中动态生成的文字无法提取，故前端三大框架均不能直接使用
2. 当然也可以将字体压缩的逻辑放在开发的项目中，但这样的话，项目会感觉很乱，打包配置也要做些修改

好处

1. 提取成新项目后，属于一个单独的项目，不会影响到业务项目
2. 全程只有将文字复制到文本框这步算是最复杂的，整体操作简单，有可视化界面
3. 其他项目也能通用，类似一个工具项目

大致讲下关键逻辑

1. 点击提交，获取表单数据
2. 对数据做处理（文字去重）
3. 利用showOpenFilePicker该api调起文件上传，返回一个Promise，如果用户选了文件会得到文件信息
4. 拿到文件信息的对象时，再调用文件信息的createWritable方法,该方法也是一个Promise用于创建一个可写流
5. 将数据写入，并关闭写入流，弹出成功提示
6. 新的html文件生成后，执行shell.sh文件
7. 从fonts目录中复制压缩后的字体包即可

一下就是 以上关键逻辑的代码实现

function submit() {
  const from = document.getElementById("form");
  const formData = new FormData(form);
  const chats = formData.get("words").trim();
  const name = formData.get("word-name").trim();
  let c = "";
  if (chats) {
    new Set(chats.split("")).forEach((v) => {
      c += v;
    });
  }
  if (c) {
    const whireFile = async () => {
      const title = document.getElementById("title");
      title.innerText = "加载中...... 请等待";
      title.style.color = "red";
      const [fileHider] = await window.showOpenFilePicker();
      const file = await fileHider.getFile();
      const writable = await fileHider.createWritable();
      await writable.write(
        `<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><title>字蛛-压缩字体包</title><style>@font-face{font-family:${name};src: url("./fonts/${name}.TTF")}</style></head><body><div style="font-family: ${name};">${c}</div></body></html>`
      );
      await writable.close();
      title.innerText = " 字蛛-压缩字体包";
      setTimeout(() => {
        alert("加载完成");
      }, 300);
    };
    whireFile();
  } else {
    alert("请输入有效字符");
  }
}

shell脚本

#! /bin/bash
echo "hello woild"
# 执行命令
font-spider ./font-spider.html

总结下

• 这种实现目前也存在一些问题，操作上依然有些麻烦
• 源代码 gitee.com/luocheng-fu...