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


【油猴脚本开发进阶】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 git@github.com: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 开发油猴脚本

文章作者: iKnow
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 iKnow !
评论
 本篇
【油猴脚本开发进阶】VSCode + Webpack + TypeScript 油猴开发环境搭建,本地调试、实时热刷新、自动构建和发布 【油猴脚本开发进阶】VSCode + Webpack + TypeScript 油猴开发环境搭建,本地调试、实时热刷新、自动构建和发布
【油猴脚本开发进阶】VSCode + Webpack + TypeScript 油猴开发环境搭建,支持本地调试、实时热刷新、自动构建和自动发布更新 本教程适合有一定编程基础的同学。 前置技术包括但不仅限于: 基础知识:HTML/CSS、
2022-08-03
下一篇 
Webpack + TypeScript 开发油猴脚本:斗鱼直播自动切换画质2.0 Webpack + TypeScript 开发油猴脚本:斗鱼直播自动切换画质2.0
Webpack + TypeScript 开发油猴脚本:斗鱼直播自动切换画质 2.0基于以下两个项目:斗鱼直播油猴脚本:自动切换最高画质或最低画质 切换画质基础实现:自动切换最高或最低画质 React + TypeScript + Ta
2022-08-01
  目录