twitch drops manager

Twitch Drops Manager

enchufe

1. Permitir el acceso de Tampermonkey al archivo local URIS Tampermonkey/FAQ
2. Instale DEPS con npm i o npm ci .
3. npm run dev para comenzar su desarrollo. Ahora verá 2 archivos en ./dist/
   • dist/index.dev.user.js : ** Debe instalar estecrito de usuario en su navegador. ** Es un cargador simple que carga dist/index.debug.js en la página web coincidente.
   • dist/index.debug.js : Esta es la construcción de desarrollo con eval-source-map . Se cargará automáticamente por dist/index.dev.user.js a través @require file://.../dist/index.debug.js metadata, no lo agregue a su administrador de recipientes de usuarios.
4. Editar SRC/Index.ts, incluso puede importar CSS o menos archivos. Puedes usar SCSS si quieres.
5. Vaya a https://twitch.com/ y abra la consola, verá que está funcionando.

Livereload está habilitado de forma predeterminada, use esta extensión de Chrome

AVISO

Cada vez que cambie la configuración de su metadatos, tendrá que reiniciar el servidor Webpack e instalar el recién generado dist/index.dev.user.js Userscript en su navegador nuevamente.

Solicitud de sitio cruzado

Puede llamar GM.xmlHttpRequest directamente o usar una API de Fetch basada en GM.xmlHttpRequest https://github.com/trim21/gm-fetch

Mecanografiado

Use TypeScript como de costumbre, consulte SRC/Index.ts

dependencias

Hay dos formas de usar un paquete en NPM.

Forma de recluta de usuarios

Al igual que la forma original de usuarios de usuarios, deberá agregarlos a la sección Requerir metadatos de su script de usuario y excluirlos en config/webpack.config.base.cjs

Webpack Way

Simplemente instale paquetes con NPM e importe en su código, Webpack los cuidará.

Construir

npm run build

dist/index.prod.user.js es el script final. Puede copiarlo manualmente a GreasyFork para implementar.

Minificar

Hay una limitación en GreasyFork, su código no debe ser ofuscado ni minificado.

Si no necesita implementar su script en GreasyFork, habilite Minify como desee.

implementar automáticamente

Las acciones de GitHub implementarán la producción de usuarios de producción en la rama de las páginas GH.

ejemplo

desplegado

Puede usar automáticamente la función de actualización automática de GreasyFork.

Preguntas y respuestas

Puede encontrar habilitar el mapa fuente no funciona bien en el código de producción, porque Tampermonkey agregará líneas adicionales (todas sus @require ) antes de su script. No sé si hay una buena solución para esto, debe usar WebPack Config devtool con eval Prefix para que funcione como se esperaba, por lo que el mapa de origen está deshabilitado en esta plantilla.

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