论坛 › 脚本开发 › 暴力猴脚本工程化打包

朱焱伟 发表于 2022-10-5 23:41:33

暴力猴脚本工程化打包

# 暴力猴脚本工程化打包
## 概述
`笑尘天雨`老哥最近在做[`rollup自动提升关键字插件`](https://www.npmjs.com/package/rollup-plugin-tampermonkey-auto-meta), 评论区[`voeoc`](https://bbs.tampermonkey.net.cn/thread-3021-1-1.html)也表示需要这样的使用rollup来处理油猴的轮子。

我不懂rollup,对提升关键字这方面需求也不大,但觉得挺牛逼的。之后发现暴力猴里确实有这类rollup打包油猴的轮子,下面就来试试暴力猴里rollup打包油猴的轮子:
`violentmonkey/generator-userscript`

## 尝试violentmonkey/generator-userscript过程
### 准备工作
开始前确保npm网络通畅,设置好镜像;另外踩坑过程中发现之后要用到`yarn dlx`指令,低版本1.x的yarn不能用,所以要确保yarn是比较高的`berry`版本
- `nrm add taobaohttps://registry.npmmirror.com/`

#### 升级yarn
```sh
npm install -g yarn
yarn set version berry
```

#### 确保网络通畅
此步不一定要做,但我网络不通畅,终端需要设置一下,不然从github拉取时不一定成功
```
unset all_proxy && unset ALL_PROXY
export ALL_PROXY=socks5://127.0.0.1:1080
export all_proxy=socks5://127.0.0.1:1080
```

### 开始
```sh
pnpm --package github:violentmonkey/generator-userscript --package yo dlx yo @violentmonkey/userscript
npm run dev
```
pnpm安装之后然后就会出现脚手架问项目的配置,填好.
!(data/attachment/forum/202210/05/233933tyf4f54e2ptwmmh2.png)
文件组织大概如下
```
├── package.json
├── pnpm-lock.yaml
├── README.md
├── rollup.conf.js
└── src
    ├── app.js
    ├── index.js
    ├── meta.js
    ├── style.css
    ├── style.module.css
    └── types
      ├── css.d.ts
      └── index.d.ts
```
在`npm run dev`之后,会即时热更新`dist/index.user.js`,此时可以去src里写相关代码,看看效果,可以搭配脚本猫王的vscode插件实时更新到浏览器。
这个环境就搭建完了,看看效果。
暴力猴工程化解决方案`violentmonkey/generator-userscript`的主要好处,大概是支持jsx语法,支持ts,更方便地写css,rollup打包比webpack打包可读性强一点。实际好不好用,有待进一步观察。

## 其他
题外话,文档里顺便提了`@violentmonkey/dom`的库,也是一个异步获取元素的库,能用,但使用体验不太好。
测试脚本:[~~CB站添加recurbate链接按钮之测试violentmonkey/dom~~](https://scriptcat.org/)
油猴工程化目前有很多方法,不大能看明白,知道的老哥可以写一些发在论坛讲讲。好像如果要支持jsx这类语法,就得打包编译,在脚本猫站上只能发个没有可读性的js,源代码得另外托管在github上,不知道有没有好点的解决方案。

## 相关资料
- [在暴力猴中使用摩登语法](https://violentmonkey.github.io/guide/using-modern-syntax/)
- [升级yarn版本](https://yarnpkg.com/getting-started/migration)
- (https://violentmonkey.github.io/guide/observing-dom/)

笑尘天雨 发表于 2022-10-6 00:49:23

* 支持jsx这类语法,就得打包编译,在脚本猫站上只能发个没有可读性的js,源代码得另外托管在github上,不知道有没有好点的解决方案

答: 目前没号的解决方案，毕竟浏览器不支持jsx，肯定是要经过编译的。

*油猴工程化目前有很多方法,不大能看明白,知道的老哥可以写一些发在论坛讲讲

答: 老实说，我自己都没写几个脚本，顺便那个脚本里有栗子可以参考，如果想使用jsx的话，应该也是可以的

王一之 发表于 2022-10-6 01:01:38

- 在脚本猫站上只能发个没有可读性的js,源代码得另外托管在github上

关于这个，webpack有一个`devtool = 'source-map'`的选项，可以打包出一个勉强可读的脚本文件，rollup我没有了解，应该也是有类似的

我觉得油猴工程话在写一些比较大的脚本是很有必要的，可以上一些类似ts/jsx、babel的高级特性，而且大脚本如果写在同一个份文件中，那也是一个灾难。

王一之 发表于 2022-10-6 01:04:16

发现哥哥脚本不对劲。。。。内容中我删除了

朱焱伟 发表于 2022-10-6 08:57:53

哥哥们给的建议很好，我去了解一下source-map，认同'写大点脚本在同一个文件是灾难'的观点。主要是我目前没写大脚本的需要，就想在小脚本里用点新特性。

查看完整版本: 暴力猴脚本工程化打包