Skip to content
On this page

007 前端开发周报

研究架子鼓, 预防老年痴呆的利器.

本周内容

  • 部署ezMusic, 发现新问题 #ezMusic
  • 搭了一个基于vite的兼容ie11的初始化模板 #baseViteIe11

ezMusic

线上部署

因为是基于 nuxt3 开发的, 所以直接用 vercel 部署是在方便不过的了. 访问地址: https://ezmusic.muyi.dev/

部署后发现几个问题.

  • 基于 @apply 的样式丢失. 暂时还没排查.
  • 由于 .dev 的域名天然需要 ssl 支持, 我本地 nas 中的后端接口和资源文件却是非 https环境, 所以直接配置无效. 本地增加反向代理处理 https.
  • 经过几天的实际使用, 发现功能和实际使用场景并不完全相符, 大多数情况下根本不需要访问音乐列表, 只需要能随机播放指定内容即可. 所以音乐列表会调整, 默认情况下不再显示.

baseViteIe11

手里有个ie6时代的项目需要改版, 终于不用再缝缝补补了. 但依旧给了一些限制, 如:

  • 边做边设计, 无法直观的看到新版全貌.
  • 首页完全改掉.
  • 部分内页只改头尾, 部分内页不调整.
  • 用户中心不调整.
  • 尽可能向下兼容.
  • seo.

由于 ie 已经宣布阵亡了, 所以争取了一下, 最终决定兼容至 ie11.

打包工具

起初, 考虑使用 parcel 打包, 但看了下 vite, 在 @vitejs/plugin-legacy 的加持下, 可以兼容到 ie11, 所以最终还是选择了 vite.

css 样式

由于 ie11 不支持 css 变量. 所以 tailwindcs/windicss/unocss 这些都无法使用.

起初决定基于 scss 手搓一套类 unocss 的代码. 后来在这个项目中发现 nuxodin/ie11CustomProperties 可以让 ie11 支持 css 变量.

但经过几天的实际体验, 并不是所有 css 变量都能被很好的处理掉, 但都不是大问题. 权当 ie11 做降级处理了.

解决了 css 变量问题后, 放弃了手搓 css 的想法, 最终还是选择了 unocss.

css icon

unocss 中 css icon 无法被 ie11 支持. 经过这两天的尝试, 最终选择了直接用 <svg /> 的方式引入 icon 图标. 尺寸 & 颜色 都可以很好的被支持.

js 脚本

依旧沿用老项目的技术栈, jQuery + layer.

升级了 jQuery 到 3.6.0, 官方给的说法是支持的 ie10+.

有了 vite 和 legacy 的加持, 除了 async/promise 外, 其他 js 的新特性都可以正常使用.