基于Whistle的本地插件热更新调试方案（零侵入无需源码）

通过 Whistle 代理工具 实现本地插件调试是行业常见方案，无需源码工程接入

一、技术方案流程图

二、具体实现步骤

1. 本地文件服务搭建

# 安装http-server
npm install -g http-server
# 启动本地服务（在插件js打包目录执行）
http-server -p 8080 --cors

关键参数：

• -p 8080：端口号
• --cors：解决跨域问题

2.安装运行Whistle

whistle官方文档

• 启动whistle w2 start

• 成功示例

  C:\Windows\System32>w2 start
  [i] whistle@2.9.99 started
  [i] 1. use your device to visit the following URL list, gets the IP of the URL you can access:
         http://127.0.0.1:8899/
         http://192.168.31.204:8899/
         Note: If all URLs are inaccessible, check firewall settings
               For help see https://github.com/avwo/whistle
  [i] 2. set the HTTP proxy on your device with the above IP & PORT(8899)
  [i] 3. use Chrome to visit http://local.whistlejs.com/ to get started
  

• 浏览器打开运行地址

3. Whistle 规则配置 以及 插件工程文件相关配置

• 在网络中找到对应的配置文件config.json复制到本地，将网站的配置代理到本地，并在config文件中配置自己的插件信息

  • http://120.71.60.87:20002/s/__config/config.json http://127.0.0.1:8080/__plugins/config.json

  • {
        官方其他配置，不要动...
      "plugins": [
          官方配置，不要动，下方添加...
         {
          "id": "wpDemo",
          "client": 0,
          "available": true,
          "former": false,
          "scripts": [
            {
              "appType": 2,
              "name": "wpDemo.js",
              "type": "js",
              "implementClass": "WpDemo"
            },
             {
              "appType": 2,
              "name": "wpDemo.css",
              "type": "css"
            }
          ]
        }
      ]
    }
    
    

• 代理好config.json后，网站便会访问wpDemo.js插件；配置插件js代理到本地打包好的插件js

  • http://120.71.60.87:20002/s/__plugins/wpDemo/wpDemo.js http://127.0.0.1:8080/__plugins/wpDemo.js

• 完整配置示例：

# 规则示例：替换工程的插件请求到本地
# 目标插件js + 空格 + 本地插件js
# http://120.71.60.87:20002/s/__plugins/WP/WP.js http://127.0.0.1:8080/__plugins/ssDemo.js
http://120.71.60.87:20002/s/__config/config.json http://127.0.0.1:8080/__plugins/config.json
http://120.71.60.87:20002/s/__plugins/wpDemo/wpDemo.js http://127.0.0.1:8080/__plugins/wpDemo.js

4.安装、配置、运行SwitchyOmega

• 使用Chrome浏览器 / Edge浏览器 安装SwitchyOmega插件
• 配置代理服务器，其地址就是whistle服务地址【例：http://127.0.0.1:8899/】
• 点击proxy运行

5.调试

• 写插件
• 打包
• 刷新浏览器
• 调试

三、适配处理

根据相应的插件开发文档，编写插件，和config.json文件，

将其都代理后，即可开始进行插件开发

四、方案优势分析

1. 零侵入性：无需修改主应用代码
2. 环境隔离：本地调试与线上完全分离
3. 多版本管理：通过路径参数切换不同构建版本

通过这套方案，你可以像调试普通Web应用一样进行插件开发，同时保持与主应用环境的完全隔离。

TODO：可以实现热加载，这样调试会更友好，实现了再写进来…