「折腾」使用 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


一直以来,针对同一个网站的功能脚本会塞进一个文件里,比如之前 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
特别注明外均为原创,转载请注明。

分享到微信

扫描二维码

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

相关文章

发表评论:

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