twitch drops manager

Twitch Drops Manager

开发

1. 允许TampermonKey访问本地文件URIS TAMPERMONKEY/FAQ
2. 使用npm i或npm ci安装DEP。
3. npm run dev开始开发。现在您将在./dist/中看到2个文件
   • dist/index.dev.user.js ：**您应该在浏览器中安装此用户标记。 **这是一个简单的加载程序，在匹配的网页上加载dist/index.debug.js 。
   • dist/index.debug.js ：这是带有eval-source-map的开发构建。它将通过@require file://.../dist/index.debug.js metadata自动通过dist/index.dev.user.js加载。
4. 编辑src/index.ts，您甚至可以导入CSS或更少的文件。如果愿意，可以使用SCSS。
5. 请访问https://twitch.com/并打开控制台，您会发现它正在工作。

默认情况下启用livereload，使用此Chrome Extension

注意

每次更改元数据配置时，您都必须重新启动WebPack服务器并安装新生成的dist/index.dev.user.js userscript再次在浏览器中。

跨站点请求

您可以直接致电GM.xmlHttpRequest或基于GM.xmlHttpRequest https://github.com/trim21/gm-fetch使用fetch api

打字稿

使用TypeScript作为正常，请参阅SRC/INDEX.TS

依赖性

在NPM上使用软件包有两种方法。

Userscript方式

像原始的用户订阅方式一样，您需要将它们添加到用户脚本元数据的要求部分中，并将它们排除在config/webpack.config.base.base.cjs中

Webpack方式

只需使用NPM安装软件包并将其导入您的代码，WebPack就会照顾它们。

建造

npm run build

dist/index.prod.user.js是最终脚本。您可以手动将其复制到油腻的fork进行部署。

缩小

油腻的牛肉有一个限制，您的代码不得被混淆或缩小。

如果您不需要将脚本部署到油腻的fork，请按照自己的方式启用缩小。

自动部署

GitHub Action将将生产用户订阅部署到GH-PAGES分支。

例子

部署

您可以自动使用GreasyFork的自动更新功能。

问答

您可能会发现启用源地图在生产代码中无法正常工作，因为Tampermonkey将在您的脚本之前添加额外的行（所有@require ）。我不知道是否有一个很好的修复程序，您需要将WebPack Config devtool带有eval Prefix来使其正常工作，因此在此模板中禁用源图。

https://webpack.js.org/configuration/devtool/#development