# 油猴脚本脚手架 By TS

**Repository Path**: leecaiy/tampermonkey-typescript

## Basic Information

- **Project Name**: 油猴脚本脚手架 By TS
- **Description**: 油猴脚本tampermonkey脚手架，完全支持TypeScript、热更新部署
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 7
- **Created**: 2022-09-02
- **Last Updated**: 2022-11-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 油猴脚本脚手架 

特性
- TypeScript完全支持
- Babel完全支持 使用目前主流的`@babel/preset-env`
- 热更新部署 每次更新会自动同步到油猴中，不需要手动复制粘贴！


## 使用方式

clone本项目，然后执行npm install

## 开发

一个完整的油猴脚本格式如下

```javascript
// ==UserScript==

// 这部分是头部区域，一般来说不会经常修改

// ==/UserScript==

// 这里是正文，也就是脚本的执行部分，是需要经常修改的
console.log('hello world')
```

## 头部区域

头部区域的开发是在`header/index.ts`，使用了typescript，这样会有IDE完全支持，而不是单纯的写几个注释

![img](https://s1.328888.xyz/2022/09/11/KLEVh.png)


开发完毕后执行`npm run build:header`编译

## 正文

正文开发是在`src/index.ts`，在开发时，如果使用到`GM_`相关函数，有完整的声明支持：

![img](https://s1.328888.xyz/2022/09/11/KEv6g.png)


## 热部署

1.先执行 `npm run build` 编译一次，编译结果为 `dist/main.js`

2.执行 `npm run start:server` 启动 `http://localhost:7000`服务

默认用户名/密码为`derjanb / secret`

在油猴中设置

![img](https://s1.328888.xyz/2022/09/11/KLm90.png)


3.点 + ，把第1步编译的结果`dist/main.js`粘贴进去 保存

![img](https://s1.328888.xyz/2022/09/11/KLLHn.png)

![img](https://s1.328888.xyz/2022/09/11/KLlFs.png)

![img](https://s1.328888.xyz/2022/09/11/KLm90.png)

4.执行 `npm run sync`，现在每次更新就会自动同步到油猴中了，不需要手动粘贴！

## 发布

执行 `npm run build` 编译最新的文件


## 备注

本项目中引用以下资源

[tempermonkey.d.ts](https://www.cnblogs.com/stumpx/p/15211436.html)

[server.js](https://github.com/Tampermonkey/tamperdav/blob/master/server.js)  （有修改）