[vite插件] 本地脚本猫脚本自动推送到浏览器

Yiero

[vite插件] 本地脚本猫脚本自动推送到浏览器

介绍

在使用 vite 工程写脚本猫脚本的时候, 在打包脚本的同时, 自动将打包完成的脚本推送到浏览器脚本猫插件中, 实现本地脚本和浏览器脚本的同步.

如果你使用的是 vscode, 直接使用王一之的 [scriptcat-vscode] 即可, 功能更多, 也比我这个插件完善.

功能

• 更迅速的脚本同步 (比起 @require <本地文件地址>)
• 开发版本和发布版本不再有差异化 (不需要 @require <本地文件地址> 或者手动复制粘贴同步)

[注意] 本功能不是自动热重载, 只是将本地脚本同步到浏览器中, 还是需要手动刷新网页重载脚本.

使用插件

• npm 链接: [@yiero/vite-plugin-scriptcat-script-push]

安装插件

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

import { defineConfig } from 'vite'
import scriptPushPlugin from '@yiero/vite-plugin-scriptcat-script-push'

export default defineConfig({
  plugins: [
    // 其他插件...

    // 自动将重建的脚本推送到 ScriptCat
    scriptPushPlugin()
  ],
})

开发脚本

添加构建命令

在 package.json 中添加命令, 使用 watch 模式构建脚本:

TS 项目:

{
    "scripts": {
        "watch": "tsc && vite build --watch",
    }
}

---

JS 项目:

{
    "scripts": {
        "watch": "vite build --watch",
    }
}

启动构建

npm run watch

如果插件成功安装, 会在 watching for file changes... 下面提示本地 ws 服务器开启:

watching for file changes...
[ScriptCat] WS server started on port 8642

连接脚本猫服务器

1. 打开 浏览器 - 脚本猫 脚本列表 界面
2. 点击左侧 工具 菜单栏
3. 找到 开发调试 一栏
4. 找到 VSCode地址 , 点击下方的按钮 连接
5. 如果使用自定义端口, 请修改 ws://localhost:8642 的值为对应的端口号: ws://localhost:<port> .

如果是首次连接, 建议把 自动连接vscode服务 勾选上. 然后后续开发脚本就不需要手动连接了, 启动本地 ws 服务器之后, 等待脚本猫自动连接上本地 ws 服务器即可.

6. 查看终端提示:

如果脚本猫连接 ws 服务器成功，会在终端提示:

[ScriptCat] client-1 connected

自动推送脚本

连接完成后, 再次修改代码, 触发 vite 重建流程时, 插件将自动将打包完成的脚本推送到所有已连接的客户端.

如果脚本成功同步, 会在终端提示:

[ScriptCat] broadcast to client-1: <本地文件地址>

---

进阶配置

参数	类型	描述	默认值
port	number	WebSocket 服务器的端口号	8642
match	RegExp	用于匹配要广播的文件的正则表达式	/\.js$/

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 服务器在构建完成之后就被关闭了, 等不到客户端来连接.

july25

咪的天！这都细节自动化到这了，不懂不懂，依旧古法炮制

王一之

我觉得vite插件也是挺好的