上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
12下一页
返回列表 发新帖

基于vite和rollup的两种油猴工程化方案

[复制链接]
  • TA的每日心情

    2024-3-20 21:39
  • 签到天数: 279 天

    [LV.8]以坛为家I

    11

    主题

    60

    回帖

    607

    积分

    荣誉开发者

    积分
    607

    荣誉开发者生态建设者

    发表于 2022-10-8 00:00:10 | 显示全部楼层 | 阅读模式

    本帖最后由 朱焱伟 于 2022-10-8 00:07 编辑

    vite和rollup的两种油猴工程化方案

    两种油猴工程化脚手架的使用

    基于vite的vite-plugin-monkey

    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的最佳实践

    基于rollup的create-tampermonkey

    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-domvm-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放到在线网站上能看到源码。这两个问题,我搞不定,看看有没有什么方法。

    相关资料

    已有1人评分好评 油猫币 贡献 理由
    王一之 + 1 + 8 + 1 哥哥用心了,资料很全!

    查看全部评分 总评分:好评 +1  油猫币 +8  贡献 +1 

    当冥想的日子飞逝,喧嚣的日子把我们唤去,且在此地留下些微的痕迹
  • TA的每日心情
    开心
    2024-3-13 10:14
  • 签到天数: 211 天

    [LV.7]常住居民III

    284

    主题

    3810

    回帖

    3739

    积分

    管理员

    积分
    3739

    管理员荣誉开发者油中2周年生态建设者喜迎中秋油中3周年挑战者 lv2

    发表于 2022-10-8 00:48:07 | 显示全部楼层
    哥哥用心了,资料很全!没想到之前写的webpack的插件哥哥也找到了

    不过也只是一个拼接油猴header的插件,算不上什么工程化,原本还想搞脚手架的,看了有挺多轮子就无限延期了
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

  • TA的每日心情
    无聊
    2023-11-2 17:37
  • 签到天数: 275 天

    [LV.8]以坛为家I

    107

    主题

    438

    回帖

    944

    积分

    荣誉开发者

    积分
    944

    荣誉开发者油中2周年卓越贡献生态建设者

    发表于 2022-10-8 11:00:13 | 显示全部楼层
    ggnb!!!!!!!!!!!!!!!!!
    I frequently record, because want to leave something.
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    55

    回帖

    84

    积分

    初级工程师

    积分
    84
    发表于 2022-10-14 11:04:49 | 显示全部楼层
    你好,我是 vite-plugin-monkey 的作者,首先谢谢你推荐我写的工具
    1.关于你说的 “有没有一种可能,使用rollup打包,只通过一个user.js还能还原出整个工程?”

    这是完全可以的,你之所以没有看到 sourcemap,这是因为我在 https://github.com/lisonge/vite-plugin-monkey/blob/724c5786ac86a565fd9e252142d2c37e80793ffd/packages/vite-plugin-monkey/src/node/index.ts#L313 把它关掉了

    我关掉它是因为我认为脚本运行的时候实际上是被一个 warpper 函数包裹运行的,并不是直接运行单个文件, 另外 sourcemap 会使得构建的 dist.user.js 文件大小增加,另外开发的时候是在 serve 模式下

    这些都使得 build 模式下的 sourcemap 意义不大

    但是你这个想法是很好的,我后续会在插件里让它支持 sourcemap


    2.关于你说的 “个人有个痛点,就是我希望托管在脚本猫站上的脚本具有可读性,不是大型脚本的话开个github的仓库不是很有必要。”

    实际上,你可以把多个小型脚本放在单个仓库管理, pnpm monorepo 是最适合这种项目结构的 ,也可以看这个其他人写的这个示例 https://github.com/pionxzh/userscripts.git



    回复

    使用道具 举报

  • TA的每日心情

    2024-3-20 21:39
  • 签到天数: 279 天

    [LV.8]以坛为家I

    11

    主题

    60

    回帖

    607

    积分

    荣誉开发者

    积分
    607

    荣誉开发者生态建设者

    发表于 2022-10-14 13:01:09 | 显示全部楼层
    shabby 发表于 2022-10-14 11:04
    你好,我是 vite-plugin-monkey 的作者,首先谢谢你推荐我写的工具
    1.关于你说的 “有没有一种可能,使用rol ...

    非常感谢作者大佬给我们写出这么好用的工具,没想到得到亲自回复了。
    1.关于sourcemap
    老哥的这个回答就是我想得到的,之前一直不明白。认同'sourcemap在build模式下意义不大',对我个人来说,油猴下sourcemap作用不是开发调试,只是想在发布脚本时能看到源码。(自己写的脚本没什么价值,可能发布之后就扔了,但怕之后不好维护)

    2.monorepo
    我密切关注老哥的动向,在发帖之后,我在v2ex也看到了相关回复,正准备用monorepo:
    [v2ex什么才是开发油猴脚本最好的体验](https://www.v2ex.com/t/851687)
    > 我认为 `单个仓库里有多个油猴脚本的项目结构` 其实很适合 我这个插件使用的 pnpm [monorepo]( https://juejin.cn/post/6944877410827370504) ,这个和用 vite 还是 webpack 构建没有关系。

    老哥很热心肠,帮别人用重构了项目:[Refactor vite #1 duanluanのtampermonkey-scripts](https://github.com/duanluan/tampermonkey-scripts/pull/1)

    当冥想的日子飞逝,喧嚣的日子把我们唤去,且在此地留下些微的痕迹
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    55

    回帖

    84

    积分

    初级工程师

    积分
    84
    发表于 2022-10-17 20:29:15 | 显示全部楼层

    v2.8.0 已支持为 build.user.js 生成正确的 sourcemap 映射

    在正确的配置下,devtools 控制台输出记录显示右侧的代码行将是正确的原始行

    关于这块的代码注释说明见 types.ts#L309-L335

    回复

    使用道具 举报

  • TA的每日心情

    2024-3-20 21:39
  • 签到天数: 279 天

    [LV.8]以坛为家I

    11

    主题

    60

    回帖

    607

    积分

    荣誉开发者

    积分
    607

    荣誉开发者生态建设者

    发表于 2022-10-17 20:37:37 | 显示全部楼层
    shabby 发表于 2022-10-17 20:29
    [md][v2.8.0](https://github.com/lisonge/vite-plugin-monkey/blob/v2.8.0/packages/vite-plugin-monkey/C ...

    从v2.8.0-alpha.0版已经试用,很好用!
    当冥想的日子飞逝,喧嚣的日子把我们唤去,且在此地留下些微的痕迹
    回复

    使用道具 举报

  • TA的每日心情
    开心
    22 小时前
  • 签到天数: 478 天

    [LV.9]以坛为家II

    0

    主题

    35

    回帖

    251

    积分

    高级工程师

    积分
    251

    油中2周年

    发表于 2022-11-19 22:45:55 | 显示全部楼层
    ggnb!!!
    回复

    使用道具 举报

  • TA的每日心情
    无聊
    2023-11-2 17:37
  • 签到天数: 275 天

    [LV.8]以坛为家I

    107

    主题

    438

    回帖

    944

    积分

    荣誉开发者

    积分
    944

    荣誉开发者油中2周年卓越贡献生态建设者

    发表于 2022-12-1 20:21:06 | 显示全部楼层
    shabby 发表于 2022-10-14 11:04
    你好,我是 vite-plugin-monkey 的作者,首先谢谢你推荐我写的工具
    1.关于你说的 “有没有一种可能,使用rol ...

    又看了一遍,哥哥牛逼
    I frequently record, because want to leave something.
    回复

    使用道具 举报

  • TA的每日心情
    无聊
    2023-11-2 17:37
  • 签到天数: 275 天

    [LV.8]以坛为家I

    107

    主题

    438

    回帖

    944

    积分

    荣誉开发者

    积分
    944

    荣誉开发者油中2周年卓越贡献生态建设者

    发表于 2022-12-1 21:13:21 | 显示全部楼层
    shabby 发表于 2022-10-17 20:29
    [md][v2.8.0](https://github.com/lisonge/vite-plugin-monkey/blob/v2.8.0/packages/vite-plugin-monkey/C ...

    发现确实有了映射了,但是我见过build以后的代码也可以进行source-map映射(就是打包上传的代码,我记得谷歌工具下面点击sourcemap就可以点到没有压缩的代码的位置了),不知道是怎么设置的
    I frequently record, because want to leave something.
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表