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

Kished

本帖最后由 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. 在扩展市场安装 ESLint 和 Prettier 插件，用于格式化代码和错误检查
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 开发油猴脚本

李恒道

新开发者！
欢迎哥哥

Ne-21

欢迎哥哥     

王一之

广告时间：
哥哥可以试试用用这个webpack插件和vscode插件+脚本猫

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

https://github.com/scriptscat/scriptcat-vscode

BlenderB

王一之 发表于 2022-8-3 10:26
广告时间：
哥哥可以试试用用这个webpack插件和vscode插件+脚本猫

好的，先做个记号收藏，下次再看

q3666

很不错，期待更新哟！