[vite插件] 本地脚本猫脚本自动推送到浏览器
# 本地脚本猫脚本自动推送到浏览器## 介绍
在使用 vite 工程写脚本猫脚本的时候, 在打包脚本的同时, 自动将打包完成的脚本推送到浏览器脚本猫插件中, 实现本地脚本和浏览器脚本的同步.
> 如果你使用的是 vscode, 直接使用王一之的 [(https://marketplace.visualstudio.com/items?itemName=CodFrm.scriptcat-vscode)] 即可, 功能更多, 也比我这个插件完善.
## 功能
- 更迅速的脚本同步 *(比起 `@require <本地文件地址>`)*
- 开发版本和发布版本不再有差异化 *(不需要 `@require <本地文件地址>` 或者手动复制粘贴同步)*
> *[注意]* 本功能不是自动热重载, 只是将本地脚本同步到浏览器中, 还是需要手动刷新网页重载脚本.
## 使用插件
> - npm 链接: [[@yiero/vite-plugin-scriptcat-script-push](https://www.npmjs.com/package/@yiero/vite-plugin-scriptcat-script-push)]
### 安装插件
```bash
npm install @yiero/vite-plugin-scriptcat-script-push -D
# or
yarn add @yiero/vite-plugin-scriptcat-script-push -D
# or
pnpm add @yiero/vite-plugin-scriptcat-script-push -D
```
### 配置插件
> `vite.config.js / vite.config.ts`
```ts
import { defineConfig } from 'vite'
import scriptPushPlugin from '@yiero/vite-plugin-scriptcat-script-push'
export default defineConfig({
plugins: [
// 其他插件...
// 自动将重建的脚本推送到 ScriptCat
scriptPushPlugin()
],
})
```
### 开发脚本
#### 添加构建命令
> 在 `package.json` 中添加命令, 使用 `watch` 模式构建脚本:
> `TS` 项目:
```json
{
"scripts": {
"watch": "tsc && vite build --watch",
}
}
```
---
> `JS` 项目:
```json
{
"scripts": {
"watch": "vite build --watch",
}
}
```
#### 启动构建
```bash
npm run watch
```
> 如果插件成功安装, 会在 `watching for file changes...` 下面提示本地 ws 服务器开启:
```bash
watching for file changes...
WS server started on port 8642
```
#### 连接脚本猫服务器
1. 打开 *浏览器* - 脚本猫 *脚本列表* 界面
2. 点击左侧 *工具* 菜单栏
3. 找到 *开发调试* 一栏
4. 找到 *VSCode地址* , 点击下方的按钮 ***连接***
5. 如果使用自定义端口, 请修改 `ws://localhost:8642` 的值为对应的端口号: `ws://localhost:<port>` .
> 如果是首次连接, 建议把 `自动连接vscode服务` 勾选上. 然后后续开发脚本就不需要手动连接了, 启动本地 ws 服务器之后, 等待脚本猫自动连接上本地 ws 服务器即可.
!(data/attachment/forum/202512/24/000047camdwthk2unxwiut.png)
6. 查看终端提示:
> 如果脚本猫连接 ws 服务器成功，会在终端提示:
```bash
client-1 connected
```
#### 自动推送脚本
连接完成后, 再次修改代码, 触发 vite 重建流程时, 插件将自动将打包完成的脚本推送到所有已连接的客户端.
> 如果脚本成功同步, 会在终端提示:
```bash
broadcast to client-1: <本地文件地址>
```
---
### 进阶配置
| 参数 | 类型 | 描述 | 默认值 |
| ------- | -------- | -------------------------------- | --------- |
| `port`| `number` | WebSocket 服务器的端口号 | `8642` |
| `match` | `RegExp` | 用于匹配要广播的文件的正则表达式 | `/\.js$/` |
```ts
import { defineConfig } from 'vite'
import scriptPushPlugin from '@yiero/vite-plugin-scriptcat-script-push'
export default defineConfig({
plugins: [
// 在自定义端口上推送 .user.js 后缀的文件
scriptPushPlugin({
// 自定义端口
port: 8642,
// 自定义要推送的脚本名称匹配, 修改为只匹配文件名以 `.user.js` 结尾的文件
match: /\.user\.js$/
})
],
})
```
## 注意
1. 同一时间只能开启一个 ws 服务器, 即无法同时开发多个项目.
2. 脚本同步只能在通过 `watch` 模式构建时触发.
> 因为本质上是通过开启一个本地 WebSocket 服务器, 等客户端 (浏览器脚本猫拓展) 连接本地 WebSocket 服务器, 之后再将脚本内容广播到客户端.
>
> 使用 `watch` 模式构建 vite 服务会一直维持在后台, 本地 WebSocket 服务器也会保持开启状态. 如果只是执行一次 `build`, 本地 WebSocket 服务器在构建完成之后就被关闭了, 等不到客户端来连接. 咪的天！这都细节自动化到这了，不懂不懂，依旧古法炮制{:4_108:} 我觉得vite插件也是挺好的
页:
[1]