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