userscript-template's Introduction

rollup-userscript-template

This is a template repository for a userscript. It bundles typescript, react and JSX/TSX script files into a single userscript file with rollup

Features:

Bundle everything into a single userscript files in dist/bundle.user.js
Typescript support
React support
JSX/TSX support
Metablock generation from package.json and meta.json with rollup-plugin-userscript-metablock
Development script in dist/dev.user.js. Automatically fetches the newest version on F5
Source map support

Installation

Clone the repository and install dependencies with npm

git clone [email protected]:cvzi/rollup-userscript-template.git
cd rollup-userscript-template
npm install

Usage

Bundle

Bundle everything from src/ into dist/bundle.user.js:

npm run build

npx rollup --config

Development server

npm run serve

node -r esm server.js

This will automatically update dist/bundle.user.js when code changes and serve it on localhost:8124.

It also creates a second userscript dist/dev.user.js, if you install it in Tampermonkey, it will automatically fetch the latest version from http://localhost:8124/bundle.user.js once you reload a website with F5.

Bundle without source map

Bundle for publishing without sourcemapping to dist/release-3.2.1.user.js

npm run build:release

or on Windows

npm run build:release:win32

Other

Typescript types for GM.* object are incomplete. See types/GM/index.d.ts
Currently react is not bundled, but imported with @require. To bundle it, remove output.globals and external from rollup.config.js

Recommend Projects