[油猴脚本开发进阶]VSCode+Webpack+TypeScript工程化开发环境模板
本帖最后由 Kished 于 2023-1-9 06:19 编辑## 【油猴脚本开发进阶】VSCode+Webpack+TypeScript 油猴开发环境搭建，支持本地调试、实时热刷新、自动构建和自动发布更新
前置技术包括但不仅限于：
- 基础知识：HTML/CSS、JavaScript、TypeScript
- 开发工具和环境：VSCode、npm、git
- 了解油猴（Tampermonkey）的基础使用
视频教程：[https://www.bilibili.com/video/BV1oB4y1478c](https://www.bilibili.com/video/BV1oB4y1478c)
### 章节概要
1. 从 GitHub clone 基础项目
2. 使用 VSCode 打开项目
3. 安装依赖，测试是否正常运行
4. 添加油猴脚本代码，进行脚本本地开发
5. 版本控制与自动构建
6. 发布脚本和自动更新
教程将以我最近的一个小项目（斗鱼自动切换画质）为基础进行讲解。
项目地址：[https://github.com/Eished/tampermonkey-template](https://github.com/Eished/tampermonkey-template)
此项目作为油猴开发模板的优点：
- 配置简单
- 和前端开发框架一致的开发体验
- 支持本地网页自动热刷新和目标网站自动热刷新
- 支持本地模拟目标网站，网页加载速度快，大幅提高开发效率
- 支持 Tampermonkey API 提示和自动补全
### 1. 从 GitHub clone 基础项目
> Git 基础内容可以看我的 Git 笔记：[https://github.com/Eished/git_notes](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：(https://zhuanlan.zhihu.com/p/264785441)
2. 在扩展市场安装 `ESLint` 和 `Prettier` 插件，用于格式化代码和错误检查
3. 打开 VSCode，选择打开文件夹，地址栏输入`d:/web/douyu-helper`
4. `Ctrl + 反单引号` 打开 VSCode 终端
### 3. 安装依赖，测试是否正常运行
1. 安装 nodejs、npm、yarn：[如何在Windows 10上安装nodejs, npm 和yarn- 知乎专栏](https://zhuanlan.zhihu.com/p/511509101)
2. 安装依赖：VSCode 终端执行 `yarn install`
3. 运行项目：
- VSCode 内 `Ctrl + shift + b` 选择 `start & dev`
- 自动打开浏览器页面，即正常运行
### 4. 添加油猴脚本代码，进行脚本本地开发
1. 打开油猴插件读取本地文件权限：[油猴脚本开发指南](https://bbs.tampermonkey.net.cn/thread-1550-1-1.html)
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. 如何本地调试与匹配其它网站：[开发文档](https://github.com/Eished/douyu-helper/tree/main/docs)
7. 受到 `scriptcat` 后台脚本与油猴脚本通信方式的启发，使用 `GM_addValueChangeListener` 来实现在线调试自动热刷新。
### 5. 版本控制与自动构建
> 版本控制基础内容可以看我的 Git 笔记：[https://github.com/Eished/git_notes](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](https://greasyfork.org) 点击用户名，打开自己的主页
2. 对于未发布的脚本：点击 [导入脚本](https://greasyfork.org/zh-CN/import)
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. (https://iknow.fun/2022/08/01/webpack-typescript-kai-fa-you-hou-jiao-ben-dou-yu-zhi-bo-zi-dong-qie-huan-hua-zhi-2-0/)
2. [斗鱼直播油猴脚本：自动切换最高画质或最低画质](https://iknow.fun/2021/08/03/dou-yu-zhi-bo-cha-jian-zi-dong-qie-huan-zui-gao-hua-zhi-huo-zui-di-hua-zhi/)
3. (https://iknow.fun/2022/05/25/react-typescript-tailwindcss-kai-fa-you-hou-jiao-ben/)
新开发者！
欢迎哥哥 欢迎哥哥 广告时间：
哥哥可以试试用用这个webpack插件和vscode插件+脚本猫
https://github.com/scriptscat/scriptcat-webpack-plugin
https://github.com/scriptscat/scriptcat-vscode
王一之 发表于 2022-8-3 10:26
广告时间：
哥哥可以试试用用这个webpack插件和vscode插件+脚本猫
好的，先做个记号收藏，下次再看 很不错，期待更新哟！
页:
[1]