Skip to content

大家好,我是农村程序员,独立开发者,行业观察员,前端之虎陈随易。

  • 关注公众号:陈随易,获取最新文章推送 (很多内容只在公众号发布)
  • 个人网站 1️⃣:https://chensuiyi.me
  • 个人网站 2️⃣:https://me.yicode.tech
  • 加入交流群,公众号或者个人网站联系我即可

我会在这里分享关于 编程技术独立开发行业资讯思考感悟 等内容。

所有文章都是古法手打,经过了深度思考和总结,不含 AI 添加剂,请放心食用,一起灵魂交流。

如果本文能给你提供启发或帮助,欢迎动动小手指,一键三连 (点赞评论转发),给我一些支持和鼓励,谢谢。


先插播一条新闻,Bun v1.2.12 于2025年5月4日发布了,本次的更新内容不多,主要是提高 Bun 在前端开发的体验以及对 Nodejs 的进一步兼容和问题修复。

更为期待的是2天后的 VSCode v1.100 的发布,大家没关注的可以关注一下,到时我会详细分享更新内容,也可以加微信 chensuiyime,进到技术与搞钱交流群。

下面分享这个困扰我好久的问题:Bun运行Uniapp小程序报错

我从 NodejsAll in Bun 有段时间了,把后端接口,前端 Web 都换成了 Bun 来一把梭,但是呢,只梭了 2/3,还缺少了最后一块拼图:小程序

提示:我只用 JSVue 写接口、前端和小程序,所以所谓的 All in Bun,就是这 3 个端都用 Bun 来运行开发。

首先看看报错,提示的是 unplugin-vue-reactivity-transform 插件的 shared.genCacheKey 不是一个函数。

unplugin-vue-reactivity-transform 插件何许人也?是小程序的依赖库 @vue-macros/reactivity-transform 里面的东西。

这个 @vue-macros/reactivity-transform 依赖有什么效果呢?如上图,是一个语法糖,可以让我们使用变量,数据的时候,不要麻烦地写 .value 去赋值和获取。

原本这个功能是内置在 Vue3 里面的,在 Vue 3.4 版本被最终移除。

好在前端大佬 智子 创建了一个额外的语法糖仓库 vue-macros,里面就有这个 $ref 写法的语法糖,所以我就一直用了下来。

但自从我 All in Bun 以来,好几个版本都因为这个语法糖插件报错,无法启动项目,起初,我以为这只是一个简单的问题...(其实真的很简单)。

之前呢,我以为是刚切到 Bun 水土不服导致的,所以就没管,在等待 Bun 跟新以解决这个问题的同时,继续使用 pnpm 来跑 Uniapp 小程序。

没想到一直到昨天发布的 Bun v1.2.12 还是有这个问题,不行,忍无可忍了,我必须把这个问题的罪魁祸首揪出来!我要真正地 All in Bun,不然强迫症那是真的蓝瘦香菇啊。

于是我搜索了一遍 genCacheKey 这个函数,发现是一个叫 @vue/shared 的包报的错。

我找到这个包,一搜,这不是有吗,怎么会报错呢?

又是一番定位,分析,查找,终于找到了原因所在,原来是 uniapp 的 @vue/shared 版本是 v3.4.21,这个版本是没有 genCacheKey 函数的!

@vue-macros/reactivity-transform 中的 @vue/sharedv3.5.13 版本,也就是说,是版本不兼容导致的。

而使用 Bun 开发,默认是只能存在一个版本 (如果知道怎么多版本共存可以评论区留言分享),

知道了问题就好解决了,所以,我在 package.json 文件,写了一个 overrides 字段,并把 @vue/shared 的版本固定为 v3.5.13

这么一来,uniapp 小程序终于跑起来了,All in Bun 又往前踏出了一步,这下舒服了。

喜欢交流技术的小伙伴,欢迎加我微信 chensuiyime,留言:技术,进群一起交流。

何以解忧,唯有代码。不忘初心,方得始终。