twitch drops manager

Twitch Drops Manager

開発者

1. TamperMonkeyがローカルファイルのuris tampermonkey/faqへのアクセスを許可します
2. npm iまたはnpm ciでDEPSをインストールします。
3. 開発を開始するためのnpm run dev 。これで./dist/に2つのファイルが表示されます
   • dist/index.dev.user.js ：**このuserscriptをブラウザにインストールする必要があります。 **一致したWebページにdist/index.debug.jsをロードするのは簡単なローダーです。
   • dist/index.debug.js ：これはeval-source-mapを備えた開発ビルドです。 @require file://.../dist/index.debug.js metadata経由でdist/index.dev.user.jsによって自動的にロードされます。ユーザースクリプトマネージャーに追加しないでください。
4. src/index.tsを編集すると、CSS以下をインポートすることもできます。必要に応じてSCSを使用できます。
5. https://twitch.com/に移動し、コンソールを開くと、機能していることがわかります。

livereloadはデフォルトで有効になり、このChrome拡張機能を使用します

知らせ

メタデータ構成を変更するたびに、WebPackサーバーを再起動して、新しく生成されたdist/index.dev.user.jsユーザースクリプトをブラウザにインストールする必要があります。

クロスサイトのリクエスト

GM.xmlHttpRequestを直接呼び出すか、 GM.xmlHttpRequest https://github.com/trim21/gm-fetchに基づいてフェッチAPIを使用できます

タイプスクリプト

通常どおりタイプスクリプトを使用して、src/index.tsを参照してください

依存関係

NPMでパッケージを使用するには、2つの方法があります。

userscriptの方法

元のuserscriptの方法と同様に、ユーザースクリプトメタデータの要求セクションにそれらを追加し、config/webpack.config.base.cjsでそれらを除外する必要があります

webpackの方法

npmでパッケージをインストールし、コードにインポートするだけで、Webpackは注意してください。

建てる

npm run build

dist/index.prod.user.jsは最終スクリプトです。展開するには、手動でGreasyforkにコピーできます。

削除します

Greasyforkには制限があり、コードを難読化または縮小してはなりません。

スクリプトをGreasyforkに展開する必要がない場合は、好きなようにMinifyを有効にしてください。

自動的に展開します

GitHub Actionsは、Production UserscriptをGH-Pagesブランチに展開します。

例

展開

Greasyforkの自動更新機能を自動させることができます。

Q＆A

TamperMonkeyはスクリプトの前に追加の行（すべての@require ）を追加するため、生産コードではソースマップがうまく機能しないことがわかります。これに適した修正があるかどうかはわかりません。WebPackConfig devtoolを使用してeval Prefixを使用して、予想どおりに機能するようにする必要があるため、このテンプレートではソースマップが無効になります。

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