插件传送门
源码传送门 (GitHub)
源码传送门 (Gitee)
背景
截止发帖日,WebIDE (laf.run & laf.dev) 中对云函数的读写策略是:优先将浏览器中缓存的代码注入到 DOM 中,若无缓存才会注入云端 (已发布的) 代码;而无论是否有缓存,当你在编辑器中写入任意内容,都会自动产生与编辑器内容实时同步的本地缓存
所以当我在公司编写了一段云函数代码但没有发布,下班回到家中继续编写该云函数并发布,第二天在公司想要继续编辑该云函数,问题就来了:公司设备中的代码是本地缓存里的,与已发布的云端代码不一致,我需要手动去删除缓存、重新加载网页才能得到最新的代码,然后才能继续工作
这样就很容易手滑写出「分支」,为了避免可能由此引发的种种问题,我决定开发一个插件来管理函数缓存
动手
选用了现成的脚手架 wokoo,可以用 Vue2 + Element 的经典组合开发可视化脚本,但开发过程中还是遇到了些问题,比如 Table 组件无法显示数据,最终在这个 issue 中找到了解决方案
开发完成后,发布脚本也是个问题,由于打包后的代码太长,而且 Greasy Fork 不支持发布压缩后的代码,只能通过引入 CDN 的方式实现,还要自己去部署 CDN 服务,非常麻烦
好在 Laf 有云存储的功能,我将打包好的脚本直接扔进去,然后开启网站托管,再把网址放到油猴脚本里,Bang! 大功告成🎉🎉
基本使用
开启脚本后会在右下角出现一个时钟图标的圆形按钮,点击按钮会弹出一个对话框,里面会显示当前登录账户下的所有应用和其下的云函数列表,以及最关键的是否存在本地缓存
如果存在缓存,可以点击右侧的「Diff」按钮查看代码差异
根据代码差异可自行决定是否同步代码,点击列表右侧的「同步」按钮
目前的同步方式非常简单粗暴,就是删除本地缓存然后刷新网页,强制让 DOM 加载云端代码
小结
尽管用曲线救国的方式勉强解决了问题,但还是希望有大佬或者官方出手做一个更好的方案,毕竟我的路子比较野😳
如果你还不知道如何使用油猴,可以参考 这篇文章
最后再吹一波 Laf,太好用辣👍!
补充
项目已开源 (见顶部链接),由于 greasyfork 奇葩的审核机制,在线安装可能失效,你可以将源码中 tampermonkey.js
的内容替换到油猴编辑器中,保存生成一个新的脚本就可以使用了