twitch drops manager

Twitch Drops Manager

Dev

1. Ermöglichen
2. Installieren Sie DEPs mit npm i oder npm ci .
3. npm run dev um Ihre Entwicklung zu beginnen. Jetzt sehen Sie 2 Dateien in ./dist/
   • dist/index.dev.user.js : ** Sie sollten dieses UserScript in Ihrem Browser installieren. ** Es ist ein einfacher Loader, der dist/index.debug.js auf der übereinstimmenden Webseite lädt.
   • dist/index.debug.js : Dies ist der Entwicklungsbau mit eval-source-map . Es wird automatisch von dist/index.dev.user.js über @require file://.../dist/index.debug.js metadata geladen .
4. Bearbeiten SRC/INDEX.TS, Sie können sogar CSS oder weniger Dateien importieren. Sie können SCSS verwenden, wenn Sie möchten.
5. Gehen Sie zu https://twitch.com/ und öffnen Sie die Konsole. Sie werden sehen, dass sie funktioniert.

Leberoad ist standardmäßig aktiviert. Verwenden Sie diese Chrome -Erweiterung

BEACHTEN

Jedes Mal, wenn Sie Ihre Metadata -Konfiguration ändern, müssen Sie den WebPack -Server neu starten und das neu generierte dist/index.dev.user.js -Benutzerkript in Ihrem Browser erneut installieren.

Cross Site -Anfrage

Sie können GM.xmlHttpRequest direkt anrufen oder eine Fetch-API verwenden, die auf GM.xmlHttpRequest https://github.com/trim21/gm-fetch basiert

Typoskript

Verwenden Sie TypeScript wie normal, siehe src/index.ts

Abhängigkeiten

Es gibt zwei Möglichkeiten, ein Paket auf NPM zu verwenden.

UserScript Way

Wie bei der ursprünglichen Benutzercript -Art müssen Sie sie zu dem Abschnitt Ihres Benutzungsskript -Metadaten hinzufügen und in config/webpack.config.base.cjs ausschließen

Webpack Weg

Installieren Sie Pakete einfach mit NPM und importieren Sie sie in Ihren Code. WebPack kümmert sich um sie.

Bauen

npm run build

dist/index.prod.user.js ist das endgültige Skript. Sie können es manuell kopieren, um den Einsatz zu erhalten.

Minifieren

Es gibt eine Einschränkung in FreasyFork, Ihr Code darf nicht verschleiert oder abgebildet werden.

Wenn Sie Ihr Skript nicht in GreasyFork bereitstellen müssen, aktivieren Sie das Minify, wie Sie möchten.

automatisch bereitgestellt

GitHub-Aktionen bereitstellen Produktionsnutzerkripte für GH-Pages-Filiale.

Beispiel

eingesetzt

Sie können die automatische Aktualisierungsfunktion von GreasyFork automatisch verwenden.

Fragen und a

Möglicherweise funktioniert die Aktivierung von Quellkarte, die im Produktionscode nicht gut funktionieren, da TamperMonkey vor Ihrem Skript zusätzliche Zeilen (alle Ihre @require ) hinzufügt. Ich weiß nicht devtool ob es eine eval Lösung dafür gibt.

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