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

【油猴脚本开发进阶】VSCode + Webpack + TypeScript 开发环境搭建

[复制链接]

该用户从未签到

1

主题

1

帖子

78

积分

初级工程师

Rank: 4

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

本帖最后由 Kished 于 2022-8-6 05:51 编辑

本帖最后由 Kished 于 2022-8-6 05:50 编辑

【油猴脚本开发进阶】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/douyu-helper

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

  • 配置简单
  • 符合前端工程化开发习惯,和前端开发框架一致的开发体验
  • 支持本地网页热刷新和在线网页热刷新
  • 支持本地模拟在线网页,网页加载和调试速度更快

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 开发油猴脚本
已有2人评分好评 油猫币 贡献 理由
BlenderB + 1 + 3 哥哥你要坚持住更新下去啊
王一之 + 1 + 4 + 1 ggnb!

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

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

    [LV.5]常住居民I

    354

    主题

    3128

    帖子

    3129

    积分

    管理员

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

    Rank: 10Rank: 10Rank: 10

    积分
    3129

    猫咪币纪念章国庆纪念章中秋纪念章荣誉开发者家财万贯管理员

    发表于 2022-8-3 09:05:19 | 显示全部楼层
    新开发者!
    欢迎哥哥
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    昨天 09:04
  • 签到天数: 167 天

    [LV.7]常住居民III

    25

    主题

    647

    帖子

    6280

    积分

    荣誉开发者

    精通各种语言的HelloWord!

    Rank: 10Rank: 10Rank: 10

    积分
    6280

    猫咪币纪念章活跃会员三好学生热心会员中秋纪念章国庆纪念章荣誉开发者家财万贯

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

    使用道具 举报

  • TA的每日心情
    慵懒
    昨天 02:52
  • 签到天数: 69 天

    [LV.6]常住居民II

    153

    主题

    2029

    帖子

    2157

    积分

    管理员

    Rank: 10Rank: 10Rank: 10

    积分
    2157

    猫咪币纪念章热心会员活跃会员突出贡献三好学生中秋纪念章国庆纪念章管理员家财万贯

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

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

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

    使用道具 举报

  • TA的每日心情
    擦汗
    7 天前
  • 签到天数: 38 天

    [LV.5]常住居民I

    11

    主题

    82

    帖子

    72

    积分

    初级工程师

    Rank: 4

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

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

    使用道具 举报

    发表回复

    本版积分规则

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