twitch drops manager

Twitch Drops Manager

ديف

1. السماح للوصول إلى TarmperMonkey
2. تثبيت DEPS مع npm i أو npm ci .
3. npm run dev لبدء تطورك. الآن سترى ملفين في ./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 metadata ، لا تضيفه إلى مدير المستخدمين.
4. تحرير src/index.ts ، يمكنك حتى استيراد CSS أو أقل ملفات. يمكنك استخدام SCSS إذا أردت.
5. انتقل إلى https://twitch.com/ وافتح وحدة التحكم ، سترى أنها تعمل.

تم تمكين Livereload افتراضيًا ، استخدم هذا الامتداد الكروم

يلاحظ

في كل مرة تقوم فيها بتغيير تكوين بيانات التعريف الخاصة بك ، سيتعين عليك إعادة تشغيل خادم WebPack وتثبيت dist/index.dev.user.js في متصفحك مرة أخرى.

طلب الموقع المتقاطع

يمكنك الاتصال بـ GM.xmlHttpRequest مباشرة أو استخدام واجهة برمجة تطبيقات Fetch استنادًا إلى GM.xmlHttpRequest https://github.com/trim21/gm-fetch

TypeScript

استخدم TypeScript كالمعتاد ، انظر SRC/INDEX.TS

التبعيات

هناك طريقتان لاستخدام حزمة على NPM.

WESTERSCRIPT WAY

مثل طريقة المستخدمين الأصليين ، ستحتاج إلى إضافتها إلى قسم متطلبات Metadata لنصوص المستخدم الخاصة بك ، واستبعادها في config/webpack.config.base.cjs

WebPack طريقة

ما عليك سوى تثبيت الحزم باستخدام NPM واستيرادها في الكود الخاص بك ، وستعني WebPack.

يبني

npm run build

dist/index.prod.user.js هو البرنامج النصي النهائي. يمكنك نسخها يدويًا إلى GreasyFork للنشر.

Minify

هناك قيود في GreasyFork ، يجب ألا يتم التغلب على الكود الخاص بك أو تم تحديده.

إذا كنت لا تحتاج إلى نشر البرنامج النصي الخاص بك إلى GreasyFork ، فقم بتمكين Minify كما تريد.

نشر تلقائيا

ستنشر إجراءات GitHub مستخدمي الإنتاج على فرع صفحات GH.

مثال

تم نشرها

يمكنك استخدام وظيفة تحديث Auto GreasyFork.

سؤال وجواب

قد تجد أن خريطة المصدر تمكين لا تعمل بشكل جيد في رمز الإنتاج ، لأن TarmperMonKey سيضيف خطوطًا إضافية (كل ما تبذلونه @require ) قبل البرنامج النصي. لا أعرف ما إذا كان هناك حل جيد لهذا ، فأنت بحاجة إلى استخدام WebPack Config devtool مع Premix eval لجعله يعمل كما هو متوقع ، لذلك يتم تعطيل الخريطة المصدر في هذا القالب.

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