Vite 引入源码打包的依赖问题 / useSyncExternalStore 的使用

2024-12-05

今天的工作继续研究哪个 simple-mind-map 的使用,想把它的主题功能引用过来,和之前一样依旧是在打包方面犯了难。我问了这方面更熟悉的 @Akr 大佬,他看到文档提示说该项目并没有做打包(其实我也看到了,作者说是旧版本,就无视了),而是在 NPM 包直接分发了源码(其实依旧是这样)。而在其提供的 Demo 中,使用了 Vue 的 transpileDependencies 对其进行了处理。Vite 有一个类似配置,叫 optimizeDeps.include,我试了下,并不管用。

@Akr 让我试试修改包的内容,于是查阅了相关的文章《如何优雅的修改第三方依赖?pnpm patch 实现》,修改完包 type: "module" 调整类型之后,出现了找不到依赖文件的错误。

Cannot find module '/Users/paul/Documents/项目/remix-shadcn-ts/node_modules/.pnpm/[email protected]_patch_hash=pgdwjd5fqkfded3jxct2r3p6mi/node_modules/simple-mind-map-plugin-themes/src/dark/index' imported from /Users/paul/Documents/项目/remix-shadcn-ts/node_modules/.pnpm/[email protected]_patch_hash=pgdwjd5fqkfded3jxct2r3p6mi/node_modules/simple-mind-map-plugin-themes/index.js

这个可以修改包的引用代码(加入 .js 后缀)搞定,但是要修改的内容太多了,后续更新可维护性很差,其他同事还不一定会用。感觉不如把整个代码拉到项目里面来自己魔改,应该就不会出现这么多问题,时间有限,明天继续。

晚上一下心血来潮,用 Cursor 写了一波代码。各位都知道我小窝的日记是可以加配乐的,该功能在后台没有全局的播放器,在切换日记时会自动暂停,于是想着能不能用 useSyncExternalStore 自己手搓一个全局状态,来达到这样的功能。

简单和 AI 描述需求后,我发现它写的挺好,可惜样式方面达不到我想要的预期,自己手动调整了一些。关于 useSyncExternalStore 实现一个全局状态,AI 并没有发现自己写了个 Bug。

我用了 Cursor 的 Chat 模式问了它有关该代码的问题,然后按照我的理解来介绍吧。首先 Subscribe 函数里负责插入多个 Listener 函数,一旦状态改变,需要调用每一个 Listener 函数,通过 getSnapshot 函数返回最新的状态,React 将会使用这个值和之前的作比较(没错,并不需要我们自己做比较算法),从而实现的将一个外部状态同步回 React 工作流上。这个设计我认为很像发布订阅模式,之前我写过不少类似的逻辑。

既然搞清楚了 useSyncExternalStore 的逻辑,那么也就知道问题了,AI 忽略了对象的引用问题,React 的浅比较发现不到变化,因此需要使用 ... 大法,让对象的引用发生变化,才会让 React 比较出差异。不过在追问它的时候,它也确实找出问题了。

除此之外,晚上还做了这些事:

  • 联系苹果客服解决 iPad 不能购买 AC 的问题

    • 按照他去升级系统和重置设置均未解决
  • 修了两张图,返给一位老师了
  • 原神日常委托和部分剧情
潭影 一般
概览页 时间轴
奇趣音乐盒 技术源于 Kico Player
Emmm,这里是歌词君