https://github.com/cvzi/rollup-userscript-template

Bundle javascript, typescript, react and JSX/TSX script files into a single userscript file with rollup
https://github.com/cvzi/rollup-userscript-template

rollup tampermonkey-userscript typescript userscript

Last synced: 3 days ago
JSON representation

Bundle javascript, typescript, react and JSX/TSX script files into a single userscript file with rollup

• Host: GitHub
• URL: https://github.com/cvzi/rollup-userscript-template
• Owner: cvzi
• License: mit
• Created: 2020-10-24T22:14:30.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-12-16T11:14:40.000Z (about 1 month ago)
• Last Synced: 2025-01-15T14:32:33.179Z (10 days ago)
• Topics: rollup, tampermonkey-userscript, typescript, userscript
• Language: JavaScript
• Homepage:
• Size: 979 KB
• Stars: 49
• Watchers: 3
• Forks: 6
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• stars - cvzi/rollup-userscript-template
• awesome-pt - cvzi/rollup-userscript-template

README

        
# 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](https://rollupjs.org/)

## Features:

*   Bundle everything into a single userscript files in [dist/bundle.user.js](dist/bundle.user.js)

*   Typescript support

*   React support

*   JSX/TSX support

*   Metablock generation from [package.json](package.json) and [meta.json](meta.json) with [rollup-plugin-userscript-metablock](https://github.com/FlandreDaisuki/rollup-plugin-userscript-metablock)

*   Development script in [dist/dev.user.js](dist/dev.user.js). Automatically fetches the newest version on F5

*   Source map support

## Installation

Clone the repository and install dependencies with npm

```sh

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`

or

`npx rollup --config`

### Development server

`npm run serve`

or

`node -r esm server.js`

This will automatically update `dist/bundle.user.js` when code changes and serve it on [localhost:8124](http://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](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.mjs](rollup.config.mjs)