# TamperMonkey-CLI

**Repository Path**: touchx_admin/tampermonkey-cli

## Basic Information

- **Project Name**: TamperMonkey-CLI
- **Description**: 更加高效的开发油猴脚本插件，支持TS、TSX、Vue、SASS
- **Primary Language**: NodeJS
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2022-02-12
- **Last Updated**: 2022-02-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## TamperMonkey-CLI

> 更加高效的开发油猴脚本插件
>
> 推荐组合：TS、TSX、Vue、SASS

![](https://img.shields.io/badge/license-GPL-blue) ![](https://img.shields.io/badge/platform-windows%20linux%20macos-brightgreen) ![](https://img.shields.io/badge/author-horion007-orange) ![](https://img.shields.io/badge/version-1.0.0-informational)

## 特点

1. 完整的TypeScript开发体验
2. 支持Vue单文件组件（vue2）
5. 完整的油猴API类型提示（不包括GM_download、GM_downloadURL）
6. 自动生成 UserScript
7. 根据代码中应用到的命令自动生成@grant标记（省时省力！）

## 如何使用

1. 克隆到本地

   ```bash
   git clone git@gitee.com:horizon007/tampermonkey-cli.git
   ```

2. 安装依赖

   ```bash
   yarn
   # 或
   npm install
   ```

3. 在 `projects/{projectName}/main.ts` 中编写入口代码

3. 执行打包命令

   ```bash
   yarn build [项目名称] # 项目名称是projects下的文件夹名称，缺省会自动寻找
   # 或
   npm run build [项目名称]
   ```

## 项目目录

**project**

- build
  - config.js    配置文件（各种文件的位置、代码压缩等都可以在此处修改配置）
  - ...
- inject    将目录中的代码在打包时通过esbuild注入到bundle中
- projects    项目目录，其中每个子目录是一个项目
  - example    项目，可以创建多个，目录名称即项目名称

    - main.ts    入口文件

    - manifest.js    清单文件（包含名称、作者等信息，用于生成脚本的UserScript标记）

## 使用须知

### Vue单文件组件

> 由于是自己写的解析器，可能不常见的用法暂不支持，使用前请确保页面中存在Vue或清单文件内require引入Vue
>
> [!] 注意是Vue2不是3

script标签支持lang属性，取值范围为 js(默认) | ts | tsx

style标签支持lang属性，取值范围为 css(默认) | sass | scss，暂不支持scoped属性

#### 如何导入并使用Vue组件？

```js
import MyComponent from './xxx.vue';

// 非vue文件内 1
new Vue({
    components: {
        MyComponent
    }
});
// 非vue文件内 2
Vue.use(MyComponent);

// vue文件内
export default {
    name: 'xxx',
    components: {
        MyComponent
    }
}
```

被转换后的Vue组件格式为：，其返回一个函数对象，可以供Vue直接应用

```js
Vue.component('组件内的name，在标签中使用此名称和导入名称都可以', {
    template: 'xxxx',
    ...
});
```