本帖最后由 朱焱伟 于 2022-10-8 00:07 编辑
vite和rollup的两种油猴工程化方案
两种油猴工程化脚手架的使用
pnpm create monkey
pnpm install
pnpm run dev
在pnpm run dev之前,最好在vite.config.js里把match的地址改下
match: ['https://www.google.com/']
// e.g 改成 match: ['https://www.baidu.com/']
比如把默认的谷歌改成百度,然后去看效果。
具体设置,阅读油猴脚本工程化在vite的最佳实践
npx create-tampermonkey helloworld
cd helloworld
pnpm install
pnpm run dev
具体设置,阅读Curly_Brackets的rollup油猴插件
已知的几种油猴工程化方案
目前油猴脚本工程化解决方案很多,我知道的有上面几种,其中油中的老哥们造了两个基于webpack的轮子,给油猴工程化带来了多样性。
可读性和关键词提升
个人有个痛点,就是我希望托管在脚本猫站上的脚本具有可读性,不是大型脚本的话开个github的仓库不是很有必要。没有可读性,也可以,如果能从user.js大概还原出整个工程,我也满足了。
有没有一种可能,使用rollup打包,只通过一个user.js还能还原出整个工程?
一之哥在暴力猴脚本工程化的帖子回复里告诉我,webpack有一个devtool = 'source-map'的选项，可以打包出一个勉强可读的脚本文件,rollup里应该也有类似的。
rollup里确实有类似的,在rollup.config.js里设置sourcemap: 'inline':
function devConfigs() {...
return defineConfig({...
output: {...
sourcemap: 'inline'
}
}
}
这样设置sourcemap为'inline'后,就会在输出的user.js后的最后一行加上一行sourceMappingURL的base64编码的注释(一行,很长)
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjo...
通过这个注释,就能实现编译后的user.js,映射到真正的多个文件的源代码。在脚本match后的网站开F12的sources,在油猴文件夹下,能看到src目录里面原来的代码,这样就通过一个user.js还原出了整个工程的源代码。
我并不会设置rollup,知道这个是因为上面所说的,基于rollup的create-tampermonkey这个工具,默认开箱生成的user.js就帮我们把这个工作做了。不仅如此,这个create-tampermonkey还内置自动生成 UserScript Header的功能。
之前笑尘天雨老哥在做rollup自动提升关键字插件,大概功能是通过写注释的方法把提取到头部注释UserScript中;而create-tampermonkey构建工具内置Curlyのrollup-plugin-tampermonkey-header插件,可以达到不写注释,直接写GM_函数,就直接在编译出来的user.js文件头生成`// @grant GM_`的效果。这个过程,对脚本作者来说,是透明的,并不需要关心。我试了下,搭配vscode补全插件tampermonkey-snippets,写个GM_出来提示补全,同时自动在user.js生成文件头,确实很舒适。
所以: 代码提示上,可以通过vscode补全插件tampermonkey-snippets实现GM_*代码补全;关键词提升上,create-tampermonkey也能帮我们生成user.js的文件头;可读性上,自动生成的//# sourceMappingURL=可以帮我们从一个user.js还原整个工程。
在这几个方面,我对基于rollup的create-tampermonkey的评价是,十分满意。
jsx语法和框架支持
但是create-tampermonkey对jsx语法和框架支持上,并不能开箱可用。可以开箱即用的,是基于vite的vite-plugin-monkey,这个monkey脚手架用起来,可以支持hmr,体验更加好,推荐使用。从esbuild官网上的动图,可以看到vite的esbuild具有速度优势。关于preact/react/svelte/vanilla/vue/solid,这个脚手架还提供了一些例子:create-monkey,可作为参考。好处不多说,与正常 vite 项目开发体验一致。
优缺点和改进
create-tampermonkey的优缺点:
- 好处是可读性,可还原性,rollup能自动提升关键字
- 缺点是jsx语法和框架支持不能开箱即用
- 同步代码方法和脚本猫有冲突
vite-plugin-monkey的优缺点:
- 好处是速度快,jsx语法,丰富的框架支持,模块热替换hmr,开箱即用,自动注入脚本配置头部注释
- 缺点是可读性(个人需要)
create-tampermonkey的改进
create-tampermonkey在跑起来之后,勾选油猴管理器的Allow acess to file URLs选项,就能打开user.js自动弹出安装界面。这个安装界面安装的是一个空脚本(dev.user.js),其唯一作用就是require本地即时编译的main.dev.user.js,这是它的代码同步到浏览器的方法。
而脚本猫vscode插件同时也监测到user.js变化并同步到浏览器,这样就可能出现两个相同脚本的情况,摧毁小猫咪之后,可能会出现端口占用的情况.能用,但有点麻烦。
另外,它并不能开箱就支持jsx,作为一个基于rollup的脚手架,暴力猴脚手架支持jsx,那能不能把这个功能加进来?理论可行,但需要配置babel.config.json.暴力猴能用jsx,是因为vm-dom和vm-ui,以及babel翻译。
// @require https://cdn.jsdelivr.net/npm/@violentmonkey/dom@2
// @require https://cdn.jsdelivr.net/combine/npm/@violentmonkey/dom@2,npm/@violentmonkey/ui@0.7
这可以在src/meta.json里去设置
"@require":["某url1","某url2","某url3"]
设置之后,可以使用document.body.append(VM.m(VM.h("div", null, "hello, world")));语句,但仍然不可用jsx语法,因为还没有设置babel来翻译。这在暴力猴脚手架里是这样设置babel.config.js的:
// 暴力猴的babel.config.js
plugins: [
['@babel/plugin-transform-react-jsx', {
pragma: 'VM.h', // use 'VM.hm' if you don't need SVG support and don't want to call VM.m
pragmaFrag: 'VM.Fragment',
}],
],
我们只需用同样的方法,在create-tampermonkey生成的工程里这样去设置babel.config.json应该就能支持jsx。
(然而,我并不知道怎样去设置babel.config.json。。。)
vite-plugin-monkey的改进
可读性可能并不是这个脚手架本身的缺点,只是我个人想让他也能像create-tampermonkey那样具有可还原源码的功能,如果这个问题解决了,这个vite脚手架就完美了。经过对sourcemap的设置,我开始先得到:
//# sourceURL=chrome-extesnion:/xxxx/user.js
从这个url点进去,是在油猴管理器里查看编译之后的user.js,这个没什么用。再尝试,得到:
//# sourceMappingURL=data:application/json;charset=utf-8;base64,xxxx
这次点进去看,得到源码了,但是是vite起的本地服务器里面的源码,还是没什么用。
(不知道怎么设置vite的sourcemap选项,以得到具有可还原性的sourceMappingURL,让user.js和其他东西解耦)
sourcemap还原
create-tampermonkey生成的user.js可以还原工程源码,还有一个简单的判断方法,就是在在线source-map-visualization网站,点击custom按钮,把dist/main.dev.user.js上传,然后你就能看到整个工程的源码。还有个相应的source-map-visualize命令行工具,但没跑成功,似乎是这个cli工具依赖在线网站。
总结
vite的油猴脚手架是最好用的,的确属于最佳实践,可以一试,rollup的油猴脚手架次之。
本文留下两个关于怎么配置的问题:
- 配置
create-tampermonkey生成的工程,使之支持jsx语法
- 配置
vite-plugin-monkey生成的工程,让他生成完整可用的sourcemap
具体一点,就是让rollup脚手架支持jsx的语句;让vite脚手架生成//# sourceMappingURL=的注解,使之编译出的user.js放到在线网站上能看到源码。这两个问题,我搞不定,看看有没有什么方法。
相关资料
置顶卡
沉默卡
照妖镜
