twitch drops manager

Twitch는 매니저를 떨어 뜨립니다

데브

1. 로컬 파일에 탬퍼 몬키 액세스를 허용하십시오
2. npm i 또는 npm ci 로 DEP를 설치하십시오.
3. npm run dev . 이제 ./dist/ 에 2 개의 파일이 표시됩니다.
   • dist/index.dev.user.js : ** 브라우저 에이 사용자 스크립트를 설치해야합니다. ** 일치하는 웹 페이지에서 dist/index.debug.js 로드하는 간단한 로더입니다.
   • dist/index.debug.js : 이것은 eval-source-map 사용한 개발 빌드입니다. @require file://.../dist/index.debug.js 통해 dist/index.dev.user.js 에 의해 자동으로로드됩니다 .
4. src/index.ts를 편집하면 CSS 이하의 파일을 가져올 수도 있습니다. 원하는 경우 SCSS를 사용할 수 있습니다.
5. https://twitch.com/으로 이동하여 콘솔을 열면 작동하는 것을 볼 수 있습니다.

LiverEload는 기본적 으로이 크롬 확장을 사용합니다

알아채다

메타 데이터 구성을 변경할 때마다 웹 팩 서버를 다시 시작하고 새로 생성 된 dist/index.dev.user.js usercipt를 브라우저에 다시 설치해야합니다.

크로스 사이트 요청

GM.xmlHttpRequest 직접 호출하거나 GM.xmlHttpRequest https://github.com/trim21/gm-petch를 기반으로 Fetch API를 사용할 수 있습니다.

TypeScript

TypeScript를 정상적으로 사용하십시오. src/index.ts를 참조하십시오

의존성

NPM에서 패키지를 사용하는 두 가지 방법이 있습니다.

사용자 설명 방법

원래 사용자 스크립트 방법과 마찬가지로 사용자 스크립트 메타 데이터의 요구 섹션에 추가하고 config/webpack.config.base.cjs에서 제외해야합니다.

웹 팩 방법

NPM과 함께 패키지를 설치하고 코드로 가져 오면 Webpack은이를 처리합니다.

짓다

npm run build

dist/index.prod.user.js 는 최종 스크립트입니다. 배포를 위해 GreasyFork에 수동으로 복사 할 수 있습니다.

작게 하다

Greasyfork에는 제한이 있으므로 코드는 난독 화되거나 조정되어서는 안됩니다.

GreasyFork에 스크립트를 배포 할 필요가없는 경우 원하는대로 미수를 활성화하십시오.

자동으로 배포됩니다

GitHub Actions는 GH-PAGES 브랜치에 Production Userscript를 배포합니다.

예

배포

GreasyFork의 자동 업데이트 기능을 자동으로 사용할 수 있습니다.

Q & A

TamperMonkey는 스크립트 전에 추가 라인 (모든 @require )을 추가하기 때문에 프로덕션 코드에서 소스 맵이 잘 작동하지 않을 수 있습니다. 이것에 대한 좋은 수정이 있는지 모르겠습니다. eval Prefix와 함께 Webpack Config devtool 사용하여 예상대로 작동하도록 하여이 템플릿에서 소스 맵이 비활성화되어야합니다.

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