「折腾」使用 rollup.js 模块化编写 GM 脚本

吐槽/反馈/建议:我的咸鱼心  爱发电-@wdssmq

五月份了,又可以领大会员 B 币了,不过 B 站又改了些东西,导致我之前写的提醒脚本也要相应的修改;

「- 很多说明要详细到什么程度也是好难把握 -」

脚本获取及说明见:

「GM 脚本」大会员 B 币领取提醒_电脑网络_沉冰浮水


2022-09-12:

弄了个 rollup 插件出来:

wdssmq/rollup-plugin-monkey: 使用 rollup 开发「GM_脚本」:

https://github.com/wdssmq/rollup-plugin-monkey

视频演示:

「小代码」rollup.js 开发「GM_脚本」演示_哔哩哔哩_bilibili:

https://www.bilibili.com/video/BV1qe4y1d7ZM

使用 Rollup 等工具实现「工程化」开发「GM_脚本」的优点包括:

  • 模块化开发:使用 Rollup 可以将「GM_脚本」按照模块化的方式进行开发,使得代码更加清晰、易于维护。
  • 代码压缩和消除死码:Rollup 支持对代码进行压缩,并可以分析项目中未使用的代码并消除它们,从而减小文件体积,提高「GM_脚本」的加载速度。
  • ES6/ES7 语法支持:Rollup 可以将 ES6/ES7 代码转换为 ES5 代码,从而使得「GM_脚本」在不同浏览器中都可以运行。
  • 打包插件支持:Rollup 支持插件机制,可以通过插件扩展其打包功能,例如支持 CSS、图片等资源的打包。
  • 自动化构建:使用 Rollup 可以实现「GM_脚本」的自动化构建,减少手动操作,提高开发效率。
  • 浏览器热重载:借助像 rollup-plugin-monkey 这样的插件,可以在修改代码时自动构建并刷新浏览器,从而快速预览更改后的效果,极大地提高了开发效率和准确性。

通过使用 Rollup 等工具来实现「GM_脚本」的工程化开发,可以使开发流程更加快速灵活,同时也有利于团队协作和项目管理。


一直以来,针对同一个网站的功能脚本会塞进一个文件里,比如之前 B 站的脚本有 330 行,维护修改是真的痛苦;

「果然还是拆成小文件然后自动拼接会比较方便吧!」 ← 虽然这么想,但是咸鱼星人什么的。。

好在前不久终于开始填这个坑了,使用的方案就是「rollup.js」;

rollup.js本身的教程可参考文末推荐,事实上终于决定水出本文也是因为阮一峰碰巧在这个时机写了介绍;


如果你也想用来构建「GM_脚本」则可以参考下我的使用姿势;

  • GM_脚本的应用环境是浏览器,所以对应的输出格式是format: 'iife'
  • GM_脚本开头需要加入==UserScript== …… ==/UserScript==注释,可以作为bannerrollup.js拼接进来;
  • 配置定义文件rollup.config.js支持从外部引入内容作为参数,所以banner定义值可以写在一个单独的文件里,比如src/__info.js,同样作为脚本命名的name也可以由该文件提供;
  • 所以不同脚本项目可以使用同样的rollup.config.js内容,而只需要修改src/__info.js中的定义;
  • 我弄了份empty\_def作为初始项目,除了src/__info.js外还有src/_base.js,封装了各种「初始常量或函数」;「- 就是风格不太统一的感觉 -」
  • src/main.js中可以使用import _bcoin from './_bcoin';单纯拼接不同文件进来,虽然会得到一行黄字:Import of non-existent exports,不过我们就是要这样用;

userscript/empty_def:https://github.com/wdssmq/userscript/tree/master/empty_def

userscript/bilibili:https://github.com/wdssmq/userscript/tree/master/bilibili「历史原因,导出文件还是later.user.js,要不要改呢」

最新 B 币领取提醒:https://github.com/wdssmq/userscript/blob/master/bilibili/src/_bcoin.js「只是提醒,并不能自动领」


打包工具 rollup.js 入门教程 - 阮一峰的网络日志:

http://www.ruanyifeng.com/blog/2022/05/rollup.html

Module 的语法 - ES6 教程 - 网道:

https://wangdoc.com/es6/module.html


爱发电

本文标题:《「折腾」使用 rollup.js 模块化编写 GM 脚本》作者:沉冰浮水
原文链接:https://www.wdssmq.com/post/20120627834.html
特别注明外均为原创,转载请注明。

分享到微信

扫描二维码

可在微信查看或分享至朋友圈。

相关文章

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

网站分类

搜索

本周旧文

wdssmq/blog-astro: 一个基于 Astro 的静态博客;

本质上,面临一个代码问题时,我们需要的是另一个人愿意为「你」的问题投入精力,并且有相应的技术知识。。

接上一条,Resilio Sync 换 Syncthing 感觉也是略大的工程。。Orz

去年 GoodSync 送了一年授权,然后也确实用上了;本来想着到期就换 Syncthing,结果前几天临期提醒,花 ¥381 续了三年 Orz,两者定位和使用姿势还是有些差别的。。更早是用 Resilio Sync 和 BCompare,但是前者内存占用太高,后者并不是自动同步的定位。。

2024 年了,姑且备份下嘟特存档。。

……,一个不知名的小众样式库 + 内联样式混写这种入坑姿势确实很有槽点,但是,「已经开始学」并且能够持续是绝对值得肯定的。。

在贴吧看过很多提问了,就有种错觉:好多人为了提一个问题专门注册了贴吧,问题本身可能得到有效回答,也可能没有(和提问的点及具体姿势有关。。但无论如何,之后就和注销了账号一样没有然后了,好像之后永远不用学相应的东西一样。。

《恶魔娃娃》

- 他们正研究你究竟是真正的大人,还是伪装成大人的小孩

- 我自己都研究很久了

乐高 DC 里,(基本就蝙蝠侠家,,年龄最小的那个无论是谁感觉人设都会变得一样 - -

所以,就感觉和祥林嫂一样,每天都需要向外「签到」自己的情绪感受,然而又并没有什么「需要」我这样的签到……

爱发电支持者

最新留言

友情链接

  • 订阅本站的 RSS 2.0 新闻聚合
召唤伊斯特瓦尔