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

[油猴脚本开发进阶]VSCode+Webpack+TypeScript工程化开发环境模板

[复制链接]

该用户从未签到

1

主题

4

回帖

93

积分

初级工程师

积分
93
发表于 2022-8-2 23:49:52 | 显示全部楼层 | 阅读模式

本帖最后由 Kished 于 2023-1-9 06:19 编辑

【油猴脚本开发进阶】VSCode+Webpack+TypeScript 油猴开发环境搭建,支持本地调试、实时热刷新、自动构建和自动发布更新

前置技术包括但不仅限于:

  • 基础知识:HTML/CSS、JavaScript、TypeScript
  • 开发工具和环境:VSCode、npm、git
  • 了解油猴(Tampermonkey)的基础使用

视频教程:https://www.bilibili.com/video/BV1oB4y1478c

章节概要

  1. 从 GitHub clone 基础项目
  2. 使用 VSCode 打开项目
  3. 安装依赖,测试是否正常运行
  4. 添加油猴脚本代码,进行脚本本地开发
  5. 版本控制与自动构建
  6. 发布脚本和自动更新

教程将以我最近的一个小项目(斗鱼自动切换画质)为基础进行讲解。

项目地址:https://github.com/Eished/tampermonkey-template

此项目作为油猴开发模板的优点:

  • 配置简单
  • 和前端开发框架一致的开发体验
  • 支持本地网页自动热刷新和目标网站自动热刷新
  • 支持本地模拟目标网站,网页加载速度快,大幅提高开发效率
  • 支持 Tampermonkey API 提示和自动补全

1. 从 GitHub clone 基础项目

Git 基础内容可以看我的 Git 笔记:https://github.com/Eished/git_notes 描述有视频教程地址

  1. 安装 git
  2. 打开 gitbash ,输入cd d:/web 进入开发目录 (web是自己创建的开发文件夹)
    • 创建文件夹,复制 cd d:/web,使用 Shift + insert 粘贴内容到 gitbash 里面运行
  3. 在开发目录下执行:git clone [email]git@github.com[/email]:Eished/douyu-helper.git
    • 此操作将下载本教程用的演示项目
  4. 下载完后输入 cd douyu-helper 进入开发目录

2. 使用VSCode打开项目

  1. 安装 VSCode:VSCode 详细安装教程 - 知乎专栏
  2. 在扩展市场安装 ESLintPrettier 插件,用于格式化代码和错误检查
  3. 打开 VSCode,选择打开文件夹,地址栏输入d:/web/douyu-helper
  4. Ctrl + 反单引号 打开 VSCode 终端

3. 安装依赖,测试是否正常运行

  1. 安装 nodejs、npm、yarn:如何在Windows 10上安装nodejs, npm 和yarn - 知乎专栏
  2. 安装依赖:VSCode 终端执行 yarn install
  3. 运行项目:
    • VSCode 内 Ctrl + shift + b 选择 start & dev
    • 自动打开浏览器页面,即正常运行

4. 添加油猴脚本代码,进行脚本本地开发

  1. 打开油猴插件读取本地文件权限:油猴脚本开发指南

  2. 打开 dist/ 目录下生成的 douyu.dev.user.js 文件

  3. 复制 // ==/UserScript== 头文件代码,粘贴到油猴插件新建的脚本中。(不要后面多余的代码)

  4. 在新建的脚本中修改文件引入路径:// @require file://d:/web/douyu-helper/dist/douyu.dev.user.js

    • 或者修改开发环境油猴头文件配置信息:config/dev.meta.json 中的

      "require": ["file://<你的文件路径>/douyu-helper/dist/douyu.dev.user.js"]
    • 修改完配置文件要重新启动项目,再复制重新生成的头文件。

  5. 回到浏览器打开的本地页面,刷新页面即可看到油猴插件已运行。

    • src/index.ts 修改一些内容,即可看到浏览器热刷新和控制台输出等内容
    • 但不建议在 src/index.ts 内开发,里面有 webpack 逻辑,建议代码写在 src/app.ts 中,可自行拆分组件
  6. 如何本地调试与匹配其它网站:开发文档

  7. 受到 scriptcat 后台脚本与油猴脚本通信方式的启发,使用 GM_addValueChangeListener 来实现在线调试自动热刷新。

5. 版本控制与自动构建

版本控制基础内容可以看我的 Git 笔记:https://github.com/Eished/git_notes 描述有视频教程地址

  1. github 创建项目,设置远程源。
    • 已有 GitHub 账户 fork 项目再 clone 则无需配置,可以直接 git push,并触发自动构建任务。
  2. git push 之后 GitHub Actions 将会自动运行构建。
  3. 生成文件在 dist 目录下。

6. 发布脚本和自动更新

  1. https://greasyfork.org 点击用户名,打开自己的主页
  2. 对于未发布的脚本:点击 导入脚本
    1. 找到构建文件的链接,在 dist 目录,例如:https://github.com/Eished/douyu-helper/blob/main/dist/douyu.user.js
    2. 右键编辑器右上角 raw 复制源文件链接地址
    3. 然后在输入框输入,例如: https://github.com/Eished/douyu-helper/raw/main/dist/douyu.user.js
    4. 默认勾选自动更新
    5. 点击导入
  3. 对于已发布的脚本:
    1. 进入脚本的管理页面
    2. 选择:源代码同步
    3. 填入链接从 GitHub 复制的链接,例如:https://github.com/Eished/douyu-helper/raw/main/dist/douyu.user.js
    4. 勾选:自动-更新...
    5. 选择:更新设置并立即同步

7. 相关资料

  1. Webpack + TypeScript 开发油猴脚本:斗鱼直播自动切换画质2.0
  2. 斗鱼直播油猴脚本:自动切换最高画质或最低画质
  3. React + TypeScript + Tailwindcss 开发油猴脚本
已有4人评分好评 油猫币 贡献 理由
lty123 + 1 + 7 ggnb!
小C + 1 + 2 ggnb!
BlenderB + 1 + 3 哥哥你要坚持住更新下去啊
王一之 + 1 + 4 + 1 ggnb!

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

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    629

    主题

    5147

    回帖

    6025

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6025

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

    发表于 2022-8-3 09:05:19 | 显示全部楼层
    新开发者!
    欢迎哥哥
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    前天 18:29
  • 签到天数: 698 天

    [LV.9]以坛为家II

    27

    主题

    733

    回帖

    7209

    积分

    荣誉开发者

    精通各种语言的HelloWord!

    积分
    7209

    荣誉开发者油中2周年生态建设者油中3周年挑战者 lv2

    发表于 2022-8-3 09:15:24 | 显示全部楼层
    欢迎哥哥     
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-3-13 10:14
  • 签到天数: 211 天

    [LV.7]常住居民III

    289

    主题

    3847

    回帖

    3776

    积分

    管理员

    积分
    3776

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

    发表于 2022-8-3 10:26:59 | 显示全部楼层
    广告时间:
    哥哥可以试试用用这个webpack插件和vscode插件+脚本猫

    https://github.com/scriptscat/scriptcat-webpack-plugin

    https://github.com/scriptscat/scriptcat-vscode
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

  • TA的每日心情
    擦汗
    2024-1-28 11:21
  • 签到天数: 59 天

    [LV.5]常住居民I

    18

    主题

    101

    回帖

    120

    积分

    中级工程师

    积分
    120
    发表于 2022-8-5 08:57:35 | 显示全部楼层
    王一之 发表于 2022-8-3 10:26
    广告时间:
    哥哥可以试试用用这个webpack插件和vscode插件+脚本猫

    好的,先做个记号收藏,下次再看
    回复

    使用道具 举报

  • TA的每日心情

    2024-2-16 22:31
  • 签到天数: 5 天

    [LV.2]偶尔看看I

    1

    主题

    15

    回帖

    15

    积分

    助理工程师

    积分
    15
    发表于 2023-4-8 15:28:32 | 显示全部楼层
    很不错,期待更新哟!
    回复

    使用道具 举报

    发表回复

    本版积分规则

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