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

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

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

    5 天前
  • 签到天数: 147 天

    [LV.7]常住居民III

    9

    主题

    42

    帖子

    382

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    382

    荣誉开发者国庆纪念章喜迎中秋

    发表于 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的每日心情
    开心
    2022-11-24 01:43
  • 签到天数: 126 天

    [LV.7]常住居民III

    201

    主题

    2622

    帖子

    2653

    积分

    管理员

    Rank: 10Rank: 10Rank: 10

    积分
    2653

    荣誉开发者喜迎中秋热心会员活跃会员突出贡献三好学生管理员家财万贯油中2周年

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

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

    使用道具 举报

  • TA的每日心情
    郁闷
    2 小时前
  • 签到天数: 26 天

    [LV.4]偶尔看看III

    60

    主题

    320

    帖子

    430

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    430

    荣誉开发者国庆纪念章油中2周年

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

    使用道具 举报

    该用户从未签到

    0

    主题

    19

    帖子

    21

    积分

    助理工程师

    Rank: 1

    积分
    21
    发表于 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的每日心情

    5 天前
  • 签到天数: 147 天

    [LV.7]常住居民III

    9

    主题

    42

    帖子

    382

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    382

    荣誉开发者国庆纪念章喜迎中秋

    发表于 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

    主题

    19

    帖子

    21

    积分

    助理工程师

    Rank: 1

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

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

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

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

    回复

    使用道具 举报

  • TA的每日心情

    5 天前
  • 签到天数: 147 天

    [LV.7]常住居民III

    9

    主题

    42

    帖子

    382

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    382

    荣誉开发者国庆纪念章喜迎中秋

    发表于 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的每日心情
    开心
    6 小时前
  • 签到天数: 114 天

    [LV.6]常住居民II

    0

    主题

    32

    帖子

    97

    积分

    初级工程师

    Rank: 4

    积分
    97

    油中2周年国庆纪念章

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

    使用道具 举报

  • TA的每日心情
    郁闷
    2 小时前
  • 签到天数: 26 天

    [LV.4]偶尔看看III

    60

    主题

    320

    帖子

    430

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    430

    荣誉开发者国庆纪念章油中2周年

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

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

    使用道具 举报

  • TA的每日心情
    郁闷
    2 小时前
  • 签到天数: 26 天

    [LV.4]偶尔看看III

    60

    主题

    320

    帖子

    430

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    430

    荣誉开发者国庆纪念章油中2周年

    发表于 前天 21:13 | 显示全部楼层
    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.
    回复

    使用道具 举报

    发表回复

    本版积分规则

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