# H1
## H2
```jsx
var foo = function (bar) {
return bar++;
};
console.log(foo(5));
const d = (<div>hello</div>)
```
https://i.songe.li/1x1.png#IyBIMQojIyBIMgpgYGBqc3gKdmFyIGZvbyA9IGZ1bmN0aW9uIChiYXIpIHsKICAgIHJldHVybiBiYXIrKzsKfTsKY29uc29sZS5sb2coZm9vKDUpKTsKY29uc3QgZCA9ICg8ZGl2PmhlbGxvPC9kaXY+KQpgYGA=

# H1
## H2
```jsx
var foo = function (bar) {
return bar++;
};
console.log(foo(5));
const d = (<div>hello</div>)
```

https://i.songe.li/1x1.png#IyBIMQojIyBIMgpgYGBqc3gKdmFyIGZvbyA9IGZ1bmN0aW9uIChiYXIpIHsKcmV0dXJuIGJhcisrOwp9Owpjb25zb2xlLmxvZyhmb28oNSkpOwpjb25zdCBkID0gKDxkaXY+aGVsbG88L2Rpdj4pCmBgYA==

测试

https://github.com/lisonge/src/raw/main/img/Snipaste_2022-08-18_11-43-07.png?k=v#hash

测试
https://github.com/lisonge/src/raw/main/img/Snipaste_2022-08-18_11-43-07.png?k

测试
https://github.com/lisonge/src/raw/main/img/Snipaste_2022-08-18_11-43-07.png

一个可能可行的解法是 Service Worker ，它独立于 标签页 存在，你可以在每个标签页 onunload 的时候给 Service Worker postMessage ，然后 Service Worker 去调用 await clients.matchAll() ，如果得到的列表长度是 0 ，就 doYourWork
有一个问题，文档里没有说明 Service Worker 何时被停止，而且我懒得测试，你可以自己试试

你这个代码根本不管用啊，sessionStorage 各个标签页是完全独立的
测试如下代码
```js
sessionStorage.setItem('reloaded', 'yes');
window.onunload = function(e) {
if (sessionStorage.getItem('reloaded') == null) {
fetch("http://127.0.0.1:8080/on", {
method: "GET",
keepalive: true
});
} else {
fetch("http://127.0.0.1:8080/off", {
method: "GET",
keepalive: true
});
}
};
```
只打开一个标签页然后关闭，结果如下

<运行 dev 环境也需要 3 分钟，搞不懂是什么问题！>
可能是你自定义了 UI 库的主题而且用是 sass 一类的变量，导致每次启动都要编译 ui 库的样式
如果你的样式是固定的，你可以设置缓存这个样式文件

有没有坤坤打篮球的动作？

#11 可以优化一下，把 try/catch 去掉

```js
let controller = new AbortController();
setTimeout(() => {
controller.abort();
}, 6000);

let isOk = await fetch("https://baidu.com/", {
mode: "no-cors",
signal: controller.signal
}).catch(()=>false);
```

楼主的问题也可以是 java 为什么要写 99% 都用不到的 额外的 空的 一堆什么也不干的 setter/getter

更新：现在支持使用 esm 使用 GM_api

babel 只是一个 js 编译器，处理也得看输出格式是什么，graphviz-react 是一个 esm 规范的模块。

看起来 browserify 在你当前的配置下并不支持 解析 esm 模块，而 react 目前是一个 commonjs 规范的模块

你需要配置 browserify 让其支持 esm 模块，或者换成 webpack/vite

更新了一下，又优化了一些问题，目前正在完善 GM_api 的类型注释和 让其支持 esm 引入

<https://github.com/lisonge/vite-plugin-monkey>


@shilianmlxg

应该是最便捷强大以及工程化的编写方式了

<https://github.com/lisonge/vite-plugin-monkey.git>

js 模块化之后就可以《模块热替换》，这是前端构建工具最重要的特性之一，有了它就能极大地提高开发速度

你改动单个文件，构建工具根据这个文件找到依赖边界，浏览器界面就能进行局部刷新，而不是重新刷新这个标签页

比如你改动 vue 文件的 template ，你的界面上这个组件的区域就会刷新，但是你的状态还在，不会刷新整个页面


node_modules 是有黑洞缺点，但是却解决了《单个项目直接或间接依赖了同一个库的不同版本》的问题

就是项目存在这样的依赖结构，这基本上是每个项目必现的问题
[email protected]
[email protected]
[email protected]

[email protected] 相对 [email protected] 发生完全破坏性更改，如何让 [email protected] 和 [email protected] 同时在这个项目正常工作？

除了 npm/pnpm/yarn 这类 node 包管理器，还有 deno ，我就没见过 《天然支持》多版本共存的依赖管理工具

另外 npm/yarn 以及 python 的 pip/pipenv/poetry 还有 java 的 maven/gradle 都存在 依赖提升 的问题，导致了你虽然只在项目声明了 A 包，但是你却可以直接使用 A 的依赖

比如 python 的 requests 依赖了 certifi ，你使用 pip 安装 requests 之后，你可以在你的项目里 import requests
也可以 import certifi ，但是这是不规范的，你只安装了 requests ，按理说应该只能 import requests ，不能使用 certifi
因为你没有 显式 声明或者安装

比如 java 的 com.blankj:utilcodex:1.31.0 这个包，它依赖了 com.google.code.gson:gson:2.8.5 ，当你在项目里声明这个包的依赖，虽然你的项目没有声明 com.google.code.gson:gson:2.8.5 但是你却可以直接使用 gson ，这就是依赖提升，
另外假设坏的情况下你的项目还有某个包依赖了 [email protected] ，它使用了 [email protected] 的一个 A 类，但是这个 A 类在 gson@2 里面没有，你不是得手动解决？ maven/gradle 能自动解决这个问题吗？

但是 node_modules + pnpm 下这些问题都不存在，开发者不需要手动改 sys 或者额外弄个 classloader

因此对我个人而言，我基本没有遇见 node 的依赖问题 ，而现在我用 pnpm ，通过文件链接的方式，磁盘占用问题和依赖提升问题也得到了良好的解决

倒是我以前写 Android 的时候，老是要针对某个包 exclude ，编译老是提示某个包缺失 类，但是 node 下我从来没有遇见这些问题

解决 node 的 node_modules 的黑洞问题，用 pnpm 或者 deno 就行