[功能建议] dev client

[WOSHIZHAZHA120]

使用场景: 当脚本定义了大量可配置项 得在两个脚本间不断开关调试, 非常难受, 想参考 https://github.com/the1812/Bilibili-Evolved 的 dev client 功能, 但是那个是基于 webpack 开发的, 换成 vite 就没思路不会写了

[lisonge]

不好意思，没看懂 当脚本定义了大量可配置项 得在两个脚本间不断开关调试 是什么意思，可否直接详细说明你的实际应用场景

[WOSHIZHAZHA120]

说白了就是想数据共享 (? 在build后的脚本内配置好url链接dev服务器后让dev状态下的脚本可以继续使用当前脚本的数据 而不必多创建一个新的 dev 脚本

[lisonge]

继续使用当前脚本的数据

这里的数据来自哪里？

[lisonge]

也许设置 MonkeyOption.server.prefix=false 可以满足你的需求？

https://github.com/lisonge/vite-plugin-monkey/blob/fbc30716276ea5db9b1ce217423fe074ad080913/packages/vite-plugin-monkey/src/node/types.ts#L155

[WOSHIZHAZHA120]

这么说呢, 假设脚本叫 123, 那么开启dev的时候就会有个 dev:123, 我的想法就是使用build之后的脚本 以一种特殊的方法 连接上 dev 服务器并继续开发 dev服务器可以通过GM_getValue获取与build后的脚本相同的数据 从而实现数据共享

我有个习惯就是开始dev的时候删除build后 然后dev完再安装build测试, 但这样就会有一个每次都得手动配置变量的麻烦

[WOSHIZHAZHA120]

看起来修改prefix能够直接覆盖而不清除数据 那就这样凑合着用吧

[WOSHIZHAZHA120]

其实感觉 dev client 实现原理也挺简单的 但是我没找到如何获取 entryList

[lisonge]

我有个习惯就是开始dev的时候删除build后

你可以不用删除，关闭脚本就行

[WOSHIZHAZHA120]

我有个习惯就是开始dev的时候删除build后

你可以不用删除，关闭脚本就行

确实是习惯 所以才想提出这个建议的

[lisonge]

其实感觉 dev client 实现原理也挺简单的 但是我没找到如何获取 entryList

其实也不能叫 dev 模式，应该叫 serve 模式，这种模式下，@vite/client 和 其他插件比如 @vitejs/plugin-react 和 你的脚本的入口 通过 桥接脚本 添加到 宿主环境，你的代码所处环境是 宿主环境的ESM环境

build 模式下则是打包你的代码，没有桥接脚本了，直接运行打包好的代码

[WOSHIZHAZHA120]

那有办法获取entryList吗 有了的话或许可以在entry里面拦截原有代码 并将@client和main.ts注入到document.head或许也能实现类似效果 (?

[lisonge]

那有办法获取entryList吗 有了的话或许可以在entry里面拦截原有代码 并将@client和main.ts注入到document.head或许也能实现类似效果 (?

呃呃，说实话我没搞懂你这样的目的是啥？

---

如果你想实现 https://github.com/the1812/Bilibili-Evolved 的 贡献指南 类似的功能

你只需要运行 vite build --watch 然后 dist 目录下会出现构建产物 xxx.user.js ，而且产物会跟随源代码改变自动刷新构建文件

之后的步骤和 它的贡献指南一致，把 xxx.user.js 的头部注释部分复制到 浏览器扩展，另外 在那些 @require 下面再添加一行 @require file://{{ xxx.user.js的绝对路径 }}

---

请注意，这样你就失去了 serve 模式下的代码热重载功能，也就是说，如果你正在开发 https://github.com/the1812/Bilibili-Evolved/tree/master/src/ui vue 组件，你每更改一次 vue 文件，必须要手动刷新浏览器页面，并且用鼠标点击手动回到刚刚的ui状态，你才能看到 vue 组件的实际更改效果

不能做到下图这种效果，这会使得开发体验大大降低

[lisonge]

那有办法获取entryList吗 有了的话或许可以在entry里面拦截原有代码 并将@client和main.ts注入到document.head或许也能实现类似效果 (?

1. 获取entryList，使用 server.transformIndexHtml, 示例代码
2. 将@client和main.ts注入到document.head, 这不正是插件的桥接脚本已经在做的吗？

[WOSHIZHAZHA120]

确实是 我为什么要浪费一晚上时间研究这个可有可无的东西 就这样吧 不讨论了