twitch drops manager

Twitch Drops Manager

คนกิน

1. อนุญาตให้ tampermonkey เข้าถึงไฟล์ท้องถิ่น uris tampermonkey/faq
2. ติดตั้ง DEP ด้วย npm i หรือ npm ci
3. npm run dev เพื่อเริ่มการพัฒนาของคุณ ตอนนี้คุณจะเห็น 2 ไฟล์ใน ./dist/
   • dist/index.dev.user.js : ** คุณควรติดตั้งผู้ใช้นี้ในเบราว์เซอร์ของคุณ ** มันเป็นตัวโหลดแบบง่าย ๆ ที่โหลด dist/index.debug.js บนหน้าเว็บที่ตรงกัน
   • dist/index.debug.js : นี่คือการพัฒนาสร้างด้วย eval-source-map มันจะถูกโหลดโดยอัตโนมัติโดย dist/index.dev.user.js ผ่าน @require file://.../dist/index.debug.js ข้อมูลเมตา อย่าเพิ่มลงในตัวจัดการผู้ใช้งานของคุณ
4. แก้ไข src/index.ts คุณสามารถนำเข้า CSS หรือน้อยกว่าไฟล์ คุณสามารถใช้ SCSS ได้หากต้องการ
5. ไปที่ https://twitch.com/ และเปิดคอนโซลคุณจะเห็นว่ามันใช้งานได้

LiverEload เปิดใช้งานโดยค่าเริ่มต้นใช้ส่วนขยาย Chrome นี้

สังเกต

ทุกครั้งที่คุณเปลี่ยนการกำหนดค่าข้อมูลเมตาของคุณคุณจะต้องรีสตาร์ทเซิร์ฟเวอร์ WebPack และติดตั้ง dist/index.dev.user.js ผู้ใช้งานที่สร้างขึ้นใหม่ในเบราว์เซอร์ของคุณอีกครั้ง

คำขอข้ามไซต์

คุณสามารถโทร GM.xmlHttpRequest โดยตรงหรือใช้ API Fetch ตาม GM.xmlHttpRequest https://github.com/trim21/gm-fetch

ตัวพิมพ์ใหญ่

ใช้ typescript ตามปกติดู src/index.ts

การพึ่งพาอาศัยกัน

มีสองวิธีในการใช้แพ็คเกจบน NPM

วิธี Userscript

เช่นเดียวกับวิธี Userscript ดั้งเดิมคุณจะต้องเพิ่มลงในส่วนที่ต้องการข้อมูลเมตาของสคริปต์ผู้ใช้ของคุณและไม่รวมอยู่ใน config/webpack.config.base.cjs

Webpack Way

เพียงติดตั้งแพ็คเกจด้วย NPM และนำเข้าในรหัสของคุณ WebPack จะดูแลพวกเขา

สร้าง

npm run build

dist/index.prod.user.js เป็นสคริปต์สุดท้าย คุณสามารถคัดลอกไปยัง Greasyfork ด้วยตนเองเพื่อปรับใช้

ลงน้อย

มีข้อ จำกัด ใน Greasyfork รหัสของคุณจะต้องไม่ทำให้งงงวยหรือ minified

หากคุณไม่จำเป็นต้องปรับใช้สคริปต์ของคุณกับ Greasyfork ให้เปิดใช้งาน minify ตามที่คุณต้องการ

ปรับใช้โดยอัตโนมัติ

การกระทำของ GitHub จะปรับใช้ Userscript การผลิตไปยังสาขา GH-PAGES

ตัวอย่าง

ปรับใช้

คุณสามารถใช้ฟังก์ชันการอัปเดตอัตโนมัติของ Greasyfork อัตโนมัติ

ถาม - ตอบ

คุณอาจพบว่าการเปิดใช้งานแผนที่ต้นฉบับไม่ทำงานได้ดีในรหัสการผลิตเนื่องจาก TamperMonkey จะเพิ่มบรรทัดพิเศษ ( @require ทั้งหมดของคุณ) ก่อนสคริปต์ของคุณ ฉันไม่ทราบว่ามีการแก้ไขที่ดีสำหรับสิ่งนี้คุณต้องใช้ WebPack Config devtool พร้อมคำนำหน้า eval เพื่อให้ทำงานได้ตามที่คาดไว้ดังนั้นแผนที่แหล่งที่มาจึงถูกปิดใช้งานในเทมเพลตนี้

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