twitch drops manager

Twitch Drops Manager

dev

1. Autoriser l'accès à Tampermonkey au fichier local Uris Tampermonkey / FAQ
2. Installez les DEP avec npm i ou npm ci .
3. npm run dev pour démarrer votre développement. Vous verrez maintenant 2 fichiers dans ./dist/
   • dist/index.dev.user.js : ** Vous devez installer ce SCRIRE USERS dans votre navigateur. ** C'est un chargeur simple qui charge dist/index.debug.js sur la page Web correspondant.
   • dist/index.debug.js : Il s'agit de la construction de développement avec eval-source-map . Il sera automatiquement chargé par dist/index.dev.user.js via @require file://.../dist/index.debug.js métadonnées, ne l'ajoutez pas à votre gestionnaire USterScript.
4. modifier src / index.ts, vous pouvez même importer des CSS ou moins de fichiers. Vous pouvez utiliser SCSS si vous le souhaitez.
5. Allez sur https://twitch.com/ et ouvrez la console, vous verrez que cela fonctionne.

LiveleLoad est activé par défaut, utilisez cette extension chromée

AVIS

Chaque fois que vous modifiez votre configuration de métadonnées, vous devrez redémarrer le serveur WebPack et installer le dist/index.dev.user.js à nouveau dans votre navigateur dans votre navigateur.

Demande de site croisé

Vous pouvez appeler GM.xmlHttpRequest directement ou utiliser une API Fetch basée sur GM.xmlHttpRequest https://github.com/trim21/gm-fetch

Manuscrit

Utilisez TypeScript comme d'habitude, voir src / index.ts

dépendances

Il existe deux façons d'utiliser un package sur NPM.

Utilisateur Script

Comme la manière d'origine Script, vous devrez les ajouter à la section requise de vos métadonnées de script utilisateur et les exclure dans config / webpack.config.base.cjs

Webpack way

Installez simplement des packages avec NPM et importez-les dans votre code, WebPack en prendra soin.

Construire

npm run build

dist/index.prod.user.js est le script final. Vous pouvez le copier manuellement sur Greasyfork pour le déploiement.

Minimer

Il y a une limitation de la vie graisseuse, votre code ne doit pas être obscurci ou minifié.

Si vous n'avez pas besoin de déployer votre script sur grasyfork, activez Minify comme vous le souhaitez.

déploiement automatique

Les actions GitHub déploieront la production USERScript de production dans la branche GH-Pages.

exemple

déployé

Vous pouvez utiliser automatiquement la fonction de mise à jour automatique de GreasyFork.

Q&R

Vous pouvez trouver l'activation de la carte source qui ne fonctionne pas bien dans le code de production, car Tampermonkey ajoutera des lignes supplémentaires (toutes vos @require ) avant votre script. Je ne sais pas s'il y a un bon correctif pour cela, vous devez utiliser WebPack Config devtool avec eval Prefix pour le faire fonctionner comme prévu, de sorte que la carte source est désactivée dans ce modèle.

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